vue-svg-loader | webpack loader that lets you use SVG files | Frontend Framework library
kandi X-RAY | vue-svg-loader Summary
kandi X-RAY | vue-svg-loader Summary
🔨 webpack loader that lets you use SVG files as Vue components
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of vue-svg-loader
vue-svg-loader Key Features
vue-svg-loader Examples and Code Snippets
Community Discussions
Trending Discussions on vue-svg-loader
QUESTION
in my nuxt app , after changing route using this.$router.push({ path: '/path' }) i got the nodeOps.tagName(...) is undefined in firefox , in chrome i get cannot get access to .toLowerCase() of undefined in the same line .
it happens in createPatchFunction of vue.runtime.esm.js versions: nuxt:^2.14.12, vue:^2.6.12
ANSWER
Answered 2021-Aug-25 at 12:24It looks like you have an older version of Node? https://github.com/nuxt/nuxt.js/issues/2385#issuecomment-358111543
Try to upgrade it to the latest LTS aka 14 and double-check that you got the latest version of Nuxt too.
QUESTION
I am trying to use this library cryptocurrency-icons from Github inside my Nuxt SSR project
This library adds all the svg icons to ./node_modules/cryptocurrency-icons/svg/color directory
I made the following component in the components/BaseCryptoIcon.vue file
...ANSWER
Answered 2021-Aug-09 at 05:37You can try to make method in components/BaseCryptoIcon.vue:
QUESTION
I need to load an SVG file into a Vue template. It must be loaded in such a way that I can access the internal classes with js and css, so presumably I'm looking for an The SVG is located on an external server, not a part of my project. Vue-Svg-Loader works just fine if I have the svg as part of my project, but doesn't seem to work when the SVG isn't available until runtime. I've tried the following tag and not an tag.
ANSWER
Answered 2021-Jun-12 at 17:38In order to access the elements within an Unfortunately, this won't work in your case because the SVG files are coming from a different origin. The same-origin policy will block access to the , you'd need to wait until it was loaded (load event) and then access the child SVG document by its contentDocument property.
contentDocument. Here is an example, which also fails (logs null) because a data: URL is a different origin:
QUESTION
With @nuxtjs/svg in "vue-svg-loader" mode, SVGs are imported like so:
import ArrowRight from '~/assets/img/arrow-right.svg?inline'
But Jest has a problem with the "?inline" part:
ANSWER
Answered 2021-Mar-26 at 21:29For anyone bumping into this issue, solution is here:
jest.config.js
QUESTION
Using "vue-svg-loader" method to the letter in the module's docs, I get this error:
[Vue warn]: Invalid Component definition: data:image/svg+xml;base64,PHN2ZyB3aWR0...
My code is identical to the example.
Any idea why I'm getting such error?
(note that previously I tried to use the code from this answer and didn't get error, however a string "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhl..." was rendered on the page instead of the actual SVG image)
EDIT: below is my template's code, in /components/global/SvgIcon.vue.
ANSWER
Answered 2021-Mar-08 at 22:44Have a look at your nuxt.config.js config file and add a reference to module @nuxtjs/svg
(as described in the Installation section in the module's doc)
I've tested it by on a minimal project (nuxt hello world example + @nuxtjs/svg). Initially it worked ok and rendered the image correctly. After removing the module reference, I got the same error message as you've described.
QUESTION
I have a project with Vue 2.6, in which this error occurs at some stage of the style assembly (if I understand correctly). At the same time, I can neither build nor run the project, but all modules are successfully installed from the package.json
Error
ERROR TypeError: Cannot read property 'style-resources-loader' of undefined
Full detail:
...ANSWER
Answered 2020-Dec-12 at 12:31style-resources-loader is for automatically importing certain resources. vue-cli-plugin-style-resources-loader is just a wrapper for that. There probably isn't a need for both, and that may be causing the problem. Try removing one of the following devDependencies:
vue-cli-plugin-style-resources-loaderstyle-resources-loader
For example:
QUESTION
I tried following: https://github.com/visualfanatic/vue-svg-loader/tree/master
but there's a version conflict with vue-template-compiler since that's used in Vue 2.
I tried: https://github.com/visualfanatic/vue-svg-loader
but I'm missing a specific vue dependency.
I noticed there's a caveat with using typescript and you need to declare the type definition file. However, I still get "Cannot find module '../../assets/myLogo.svg' or its corresponding type declarations."
Here's what I added:
vue.config.js
...ANSWER
Answered 2020-Dec-02 at 04:41Can't say for sure, since I haven't tried with ts, but as posted here
this should work.
QUESTION
I've been trying to run my nuxt app in docker and the build seem to work for the most part other than it keep missing core.js dependencie. I've tried adding core-js manually, babel, tried to run the suggested install command in the error, but to no help.
Dockerfile:
...ANSWER
Answered 2020-Jun-22 at 15:38This had nothing to do with docker. I'm not sure how, but at some point reinstalling all the node modules installed the wrong core-js version.
Installing "core-js": "^2" seems to have solved it for now. Perhaps upgrading nuxt version would help too.
QUESTION
I use Vue-cli + vue-svg-loader to create an icon Library and then export it as package.
When I use it like this
...ANSWER
Answered 2020-Feb-21 at 12:54In functional component, second argument for render is context, not vm. Functional components has not own vm. See https://vuejs.org/v2/guide/render-function.html#Functional-Components, first argument is createElement and is analog to vm._c for normal components. In your case you must use _h instead of vm._c
It must not be so complex:
QUESTION
I'm using Vue/cli version 4.2.2 and I downloaded the vue-svg-loader, I was following the accepted answer here How can I import a svg file to a Vue component? and according to the comments, I have to configure vue.config.js but I could not find how exactly I should configure it.
Current these are the contents of my vue.config.js file:
...ANSWER
Answered 2020-Feb-13 at 11:23You need to configure webpack to use vue-svg-loader, something like this should work:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install vue-svg-loader
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
