sdvg/vue-cli-svg-symbol-sprite-demo

Create a sprite with the svg from a specific folder

Closed this issue · 4 comments

beatrizsmerino commented

Hello! I have a problem that is driving me crazy!

I am using svg-symbol-sprite-loader in a vue project.
I would like the sprite to be created only with the assets/images/icons/svg files.
Apparently I have an svg in the folder assets/fonts/DauphinPlain.
This is giving me an error in the console because it tries to include the font svg in the sprite.

image

image
image

I have read this but I don't know how to do it

image
image

I don't know how to do the regex so that it understands that it should only take the svg from that folder.
/.\/src\/assets\/images\/icons\/svg\/*.svg$/

please can you help me?

sdvg commented

Hello!

Try using the include option on the loader: https://webpack.js.org/configuration/module/#ruleinclude

You can also check this SO answer: https://stackoverflow.com/a/37477010

beatrizsmerino commented

Thanks!!

As I am using chainWebpack I have tried this, I guess it is another way to do the same thing without using the webpack configuration file.
But it is not working

https://stackoverflow.com/questions/57036131/vue-config-js-webpack-4-override-exclude-or-include-of-rule
image
image

beatrizsmerino commented

@sdvg Thanks!!
I have just solved the problem!

https://stackoverflow.com/questions/58391759/adding-svg-loader-to-vue-cli-project-for-a-specific-directory-only
image

image

  1. I include the path to the folder with the svg files that I want in the sprite created with the svg-symbol-sprite-loader package.
  2. And with another package file-loader I include the other svg files that I want to behave as such.
  • 🎉1