It doesn't generate svg sprite

[egorgrushin]

It doesn't generate svg sprite

[yisenliu]

@bensampaio I got it. Thank you so much.

[bensampaio]

Sorry for the delay. It seems correct to me but if you still didn't manage to make it work could you try to change your loader config to:

{
  loader: SvgStorePlugin.loader,
  options: { name: 'sprite.svg' },
  test: /\.svg$/,
}

The plugin depends on how the loader is configured so it could be that something is not working as expected when using use. Let me know if this makes a difference.

[egorgrushin]

@bensampaio Thank you for your answer!
So, I did like you said and now I'm getting this instead of css rule:
background: url(a2214b59b6a08d7bedadaac7928d7f90.svg) no-repeat
But inside this svg there is a code listed bellow

var publicPath = __webpack_public_path__;
                    var symbolUrl = 'sprite.svg#icon-logo_ru-9e720';
                    var viewUrl = 'sprite.svg#view-icon-logo_ru-9e720';

                    
                        var addCacheBust = typeof document !== 'undefined' && document.readyState === 'complete';
    
                        if (addCacheBust) {
                            symbolUrl = 'sprite.svg?icon-logo_ru-9e720#icon-logo_ru-9e720';
                            viewUrl = 'sprite.svg?icon-logo_ru-9e720#view-icon-logo_ru-9e720';
                        }
                    

                    module.exports = {
                        symbol: publicPath + symbolUrl,
                        view: publicPath + viewUrl,
                        viewBox: '0 0 277.3 35',
                        title: '',
                        toString: function () {
                            return JSON.stringify(this.view);
                        }
                    };

Of couse, no svg rendered as background.

so, tell me, please, How to fix it now?

[yisenliu]

I can't find the output file of svg sprite from the publicPath, here is my webpack.config.js:

rules: [ {
    test: /\.svg$/,
    loader: SvgStorePlugin.loader,
    options: {
      name: 'sprite-[hash:6].svg',
      iconName: '[name]',
      publicPath: '../images/'
    }
  }
],
plugins: [
    new SvgStorePlugin()
] 

here is the output css content:

background: url(../images/sprite-2a219b.svg#view-myIconName);

how can I remove the 'view-' from the output css? or any idea to fix it?

[bensampaio]

@yisenliu the iconName option must always set the [hash] since otherwise icon names can't be guaranteed to be unique.

Why do you want to remove view-? Without it your icons won't work in CSS.

[bensampaio]

@GrushinEgor I'm sorry for not coming back to you. Did you manage to fix the problem in the meantime? If not can you post your complete webpack config and describe the current behavior and your expected behavior?

[yisenliu]

@yisenliu the iconName option must always set the [hash] since otherwise icon names can't be guaranteed to be unique.

Why do you want to remove view-? Without it your icons won't work in CSS.

Thanks for replying.

iconName: '[name]', 

I'm sure each file is unique by adding 'include' option for files like this:

include: 'assets/svg/'

But even after changing to [hash], there is still no output file.
As for removing 'view-' is just for clean codes.

[bensampaio]

@yisenliu does it work if you remove the publicPath option?

If not, maybe there is a problem with one of your SVGs but no error is thrown. I suggest you try with less SVGs or SVGs from the example project in this repo to see if that makes a difference. Make sure your SVGs always have a viewBox.

[yisenliu]

Yes. If I remove the publicPath, the svg sprite with my svg files will be outputed.
But I need the sprite to be in the images folder.
I've tried to keep my publicPath and use your svgs from the example project, there is still nothing outputed.
I think the problem is there is no outputPath option in this loader to customize the sprite path, so it always accepts the path from output.path: path.resolve(__dirname,'dist')

[bensampaio]

@yisenliu I get the issue now. I think you want to use the name option and not the publicPath option. The publicPath is only meant for when your sprite is on a CDN.

So if I change the configuration you sent above it should look like this:

rules: [ {
    test: /\.svg$/,
    loader: SvgStorePlugin.loader,
    options: {
      name: '../images/sprite-[hash:6].svg',
      iconName: '[name]',
    }
  }
],
plugins: [
    new SvgStorePlugin()
] 

Can you try this and let me know if it works?

[yisenliu]

@bensampaio I tried your config, but it's not working.
It just changes url path url("../images/sprite-73b268.svg#view-fb") in the css file as well as the option publicPath:'../images/' and still get the error message:
GET http://localhost:8080/images/sprite-73b268.svg 404 (Not Found)

[bensampaio]

@yisenliu can you share your full config? I think the problem is in the ../. I am not sure if this is a common practice but I would expect your webpack configuration to be set in such a way that you would be able to set this loader like this:

rules: [ {
    test: /\.svg$/,
    loader: SvgStorePlugin.loader,
    options: {
      name: 'images/sprite-[hash:6].svg',
      iconName: '[name]',
    }
  }
],
plugins: [
    new SvgStorePlugin()
] 

What is the folder structure you want to achieve?

[yisenliu]

@bensampaio Thanks for replying. Here is my test repo.
https://github.com/yisenliu/webpack-test

The ideal public folder structure should be like this:

/dist
    /css/index.css
    /images/sprite.svg
    /js/index.bundle.js
    /index.html

[bensampaio]

@yisenliu I suggest you change this:

      {
        test: /\.svg$/,
        include: resolve('./src/assets/sprite/'),
        loader: SvgStorePlugin.loader,
        options: {
          name: 'sprite.svg',
          iconName: '[name]-[hash:6]',
          publicPath: '../images/',
          svgoOptions: {
            plugins: [
              {
                convertColors: { shorthex: false }
              }
            ]
          }
        }
      },

to this

      {
        test: /\.svg$/,
        include: resolve('./src/assets/sprite/'),
        loader: SvgStorePlugin.loader,
        options: {
          name: 'images/sprite.svg',
          iconName: '[name]-[hash:6]',
          svgoOptions: {
            plugins: [
              { collapseGroups: true },
              { convertPathData: true },
              { convertStyleToAttrs: true },
              { convertTransform: true },
              { removeDesc: true },
              { removeViewBox: false },
              { removeDimensions: true },
              { convertColors: { shorthex: false }},
            ]
          }
        }
      },

I appended the default SVGO options to your config since these are not optional for this loader / plugin to work. Maybe I should mention this in the README but first I want to see if it will work for you.

[yisenliu]

@bensampaio Yes, it did work for me. But if I have many sub websites under the same domain(e.g. http://www.xxx.com/ site1 /index.html, http://www.xxx.com/ site2 /index.html), the sprite won't be found because of the absolute path in the css file.
background: url(/images/sprite.svg#view-fb-ac9ff5)
https://github.com/yisenliu/webpack-test/blob/master/dist/css/index.css

Is there any way to change the absolute path to relative one?

[bensampaio]

No, but you can set the publicPath to http://www.xxx.com/.

[bensampaio]

Happy to hear. I'll close this issue then since your issue is fixed and the original author is not replying.