How to automatically inject extracted svg file?

Do you want to request a feature, report a bug or ask a question? Question.

What is the current behavior? I’ve extracted the svg sprites into separate file and it works, but I still have to manually inject it, and to make it worse, on production, development and Storybook it has to be done on 3 different ways. I’m currently using svg-sprite-injector but it doesn’t work on Storybook.

What is the expected behavior? Generic way to automatically inject path to svg file into the app, so it can be cached.

The best way is to create repo with minimal setup to demonstrate a problem (package.json, webpack config and your code). package.json:

{
    test:    /\.svg$/,
    include: [path.resolve(__dirname, '../src/assets/svg-icons')],
    use:     [
        {
            loader:  'svg-sprite-loader',
            options: {
                extract:        true,
                spriteFilename: 'icons.svg'
            }
        },
        {
            loader:  'svgo-loader',
            options: svgoConfig,
        },
    ],
},

Icon.vue where I’m injecting the svg sprites:

const svgSpriteInjector = require('svg-sprite-injector');
const svgFiles = require.context('@/assets/svg-icons', true, /\.svg$/);
svgFiles.keys().forEach(key => svgFiles(key));
svgSpriteInjector('icons.svg', {revision: 1});

Please tell us about your environment:

• Node.js version: 8.7.0
• webpack version: 3.8.1
• svg-sprite-loader version: 3.4.1
• OS type & version: Win 10

[nerisina]

Hello, I am having a similar issue with the svg-sprite-loader I am using storybook with vue js

My webpack config looks like this:

{
 test: /\.svg$/,
 loader: 'svg-sprite-loader',
 options: {
   extract: true,
   publicPath: '/'
 }
}

I also check out the git repository from @folmert and the HTML for the SVG isn’t working.

[nboisteault]

Hi

In default mode sprite and it’s symbols are part of your JS code, so browser will cache them like other resources.

JS code will change at every new release so if we want efficient cache we need to extract the sprite isn’t it ? It is not clear for me how to load this extracted sprit with webpack then.