I am trying to use kristerkari/react-native-svg-transformer, but I get following error after I run the metro:
error: assets/menu.svg: /user/Projects/mobile/assets/menu.svg: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
2 | import Svg, { Path } from "react-native-svg";
3 |
> 4 | const SvgComponent = props => <Svg overflow="visible" preserveAspectRatio="none" viewBox="0 0 24 24" width={24} height={24} {...props}><Path xmlns:default="http://www.w3.org/2000/svg" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" vectorEffect="non-scaling-stroke" fill="#949494" /></Svg>;
| ^^^^^^^^^^^^^
5 |
6 | export default SvgComponent;
I followed the instructions. I am using React 16.13.1 and RN 0.63.2. I tried to set the flag in babel.config.js like this:
module.exports = {
presets: [
'module:metro-react-native-babel-preset',
{ throwIfNamespace: false },
],
};
but it's not working. Any idea how can I bypass the warning or maybe alternative way to be able to import a SVG file without runtime conversion?
I've encountered the same problem in past, not sure if it's the correct solution but removing the xmlns in the svg file worked for me
Can you use path Svg by The same package whitout transformer svg but you must link with React native.
react-native link react-native-svg-transformer
The error is because of not using camel case tags. Please note that here you are using jsx (react). So please make the following changes.
sketch:type into sketchType
xmlns:xlink into xmlnsXlink
xlink:href into xlinkHref
xmlns:default into xmlnsDefault
And finally convert any css classes also into camelCase
Related
I am using yarn fluentui/react-northstar and i need to add custom icon using svg as this https://fluentsite.z22.web.core.windows.net/0.53.0/icon-viewer.
is there proper way or guideline to do add custom icons?
Have you seen this blog post? https://medium.com/swlh/fluentui-react-how-we-cut-more-than-30-of-components-bundle-size-by-creating-icons-package-474019d3123
It implies that this snippet creates a new SVG icon.
import { createSvgIcon } from "#fluentui/react-northstar";
const RobotIcon = createSvgIcon({
svg: ({ classes, props }) => (
<svg viewBox="0 0 16 16" className={classes.svg}>{...}</svg>
),
displayName: 'RobotIcon',
});
I haven't test it though, as I am currently looking to do the same with a gif image.
I tried to initialize bootstrap tooltip in vue cli globally.
so I placed this lines of code in App.vue 'mounted hook':
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
here I get bootstrap is undefined error.
and
this.$jQuery('[data-bs-toggle="tooltip"]').Tooltip();
has no error but doesn't work.
I import libraries in 'main.js' like so:
// popper
import popper from "vue-popperjs/dist/vue-popper.min";
// bootstrap
import bootstrap from "bootstrap/dist/css/bootstrap.rtl.min.css";
import bootstrapJs from "bootstrap/dist/js/bootstrap.min";
Vue.use(bootstrap);
Vue.use(popper);
Vue.use(bootstrapJs);
and jQuery has been imported above of all.
I'm using vuejs 2 and bootstrap 5. BS doc recommend using the first code. Maybe my approach is not the proper one to do this or my imported libraries are wrong. I can't figure out.
so any answer appreciated :-)
I want to insert content like <span class="some-class">text</span> inside tinymce editor using a button in vue js template. How could I accomplish that using the tinymce-vue wrapper?
Here's the code:
<template>
<tinymce-editor
api-key="my-api-key-here"
/>
<button #click="addContent">button</button>
</template>
import Editor from '#tinymce/tinymce-vue'
export default {
components: {
tinymceEditor: Editor
},
methods: {
addContent () {
tinymce.activeEditor.setContent('<span class="some-class">text</span>');
}
}
}
Edit:
I also installed tinymce using npm i tinymce --save and added the import import tinymce from 'tinymce/tinymce to the code above. Now I don't get the error 'tinymce' is not defined anymore, but the editor doesn't appear either.
If you want to use tinymce in vue with typscritt to set up your content and avoid the undefined error you need to import tinyMCE as
import { getTinymce } from '#tinymce/tinymce-vue/lib/cjs/main/ts/TinyMCE';
Then you can set your content
getTinymce().activeEditor.setContent('coucou');
In your event handler for the button click, you can call TinyMCE's .setContent() method to set editor content.
Here is a demo:
https://codesandbox.io/s/set-content-in-tinymce-in-vue-jzciu
Don't forget, tinymce-vue doesn't include the code for TinyMCE itself. You'll either have to use an API key (which you can get for free at tiny.cloud) or use a self-hosted installation of TinyMCE. (For more info, see Step 6, here: https://www.tiny.cloud/docs/integrations/vue/#procedure)
I finally gave up trying to get access to tinymce in Vue 3 component. It either undefined or if it is not undefined - setContent command just do nothing - no errors but still no content inserted.
I just used recommended for "#tinymce/tinymce-vue" way of data binding using v-model
It looks like this:
<Editor
v-model="someLocalVar"
api-key="no-api-key"
:init="{
plugins: 'lists link image table code help wordcount',
}"
/>
then
watch(someLocalVar, () => {
//do whatever you like with your someLocalVar
});
If you want to insert content into TinyMCE you should use its APIs to do so:
https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent
https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent
For example:
tinymce.activeEditor.setContent('<span class="some-class">text</span>');
tinymce.activeEditor.insertContent('<span class="some-class">text</span>');
I've been looking through the vuelayers documentation and have found little info on to use the vl-style-icon module, which is quite important if you want to create icons on your vuelayer map.
I'm pretty sure I have proper syntax when it comes to using it but marker.png won't load in through it. I've tried accessing it as just a normal image and it works fine so it is to my assumption that it's something with my syntax.
Here is my code:
<template>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 400px">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation" projection="EPSG:4326"></vl-view>
<vl-feature v-for="crime in crimePoints" :key="crime.id">
<vl-geom-point :coordinates="crime.coords"></vl-geom-point>
<vl-style-box>
<vl-style-icon src="./marker.png" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
</vl-feature>
<vl-layer-tile>
<vl-source-osm></vl-source-osm>
</vl-layer-tile>
</vl-map>
</template>
vl-style-box and vl-style-icon are the main points here. I have also checked to see if the points come up without vl-style-box and they do. What could be wrong with my code?
You can try like this:
<vl-style-icon :src="require('./marker.png')" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
If you used Vue CLI to create your vue project include this in your vue.config.js file. First section tells webpack to parse url attribute on custom tags other than what is already configured (Source).
module.exports = {
chainWebpack: config => {
config.module.rule('vue').use('vue-loader').tap(options => {
options.transformAssetUrls = {
'vl-style-icon': 'src',
...options.transformAssetUrls,
};
return options;
});
}
}
Run the following command to verify the correct vue-loader configuration is there
Source
vue inspect > output.js
I'm using vue-toastr on my Laravel 5.5 and Vuejs 2 project.
The toasts are being showednormally, but I want to set some options globally for the toasts, like position...
I can't do this.
In my app.js file I've imported toastr from vue-toastr, required the styles and then Vue.component('vue-toastr', Toastr);.
I've tried this.$refs.toastr.defaultPosition = "toast-bottom-left" on my app.js like the docs say but it gives me an error Cannot read property 'toastr' of undefined
Any help?
As covered in the documentation:
Add component html: for vue 1.x
<vue-toastr v-ref:toastr></vue-toastr>
Add component html: for vue 2.x
<vue-toastr ref="toastr"></vue-toastr>
Then you can use
this.$refs.toastr.defaultPosition = "toast-bottom-left"