svg-sprite-loader

svg-sprite-loader copied to clipboard

Do you want to request a feature, report a bug or ask a question? Ask question that's potentially a feature

What is the current behavior? Extracts all svgs into one sprite file

What is the expected behavior? Extracts relative svgs into their own sprite, instead of one massive sprite

It you don't want to create a repository - create a gist with multiple files https://gist.github.com/timbomckay/70c26853a6b09c9516f8af6545b29073

If this is a feature request, what is motivation or use case for changing the behavior? SVGs Directory:

svg.js
icons/
|--collection1/
|--|--icon1.svg
|--|--icon4.svg
|--|--icon7.svg
|--collection2/
|--|--icon2.svg
|--|--icon5.svg
|--|--icon8.svg
|--collection3/
|--|--icon3.svg
|--|--icon6.svg
|--|--icon9.svg

Dist:

collection1.svg
--icon1.symbol
--icon2.symbol
--icon3.symbol
--icon4.symbol
--icon5.symbol
--icon6.symbol
--icon7.symbol
--icon8.symbol
--icon9.symbol

Expected Dist:

icons.js
collection1.svg
collection2.svg
collection3.svg

Please tell us about your environment:

• Node.js version: 8.11.1
• webpack version: 3.12.0
• svg-sprite-loader version: 4.1.2
• OS type & version: Windows 10 v1709

Any updates or thoughts on this?

This would be a great feature. I was surprised to find out this wasn't supported already.

This seems like a bug rather than a feature request because the documentation says "multiple sprites can be generated by specifying different loader rules restricted with include option", but this doesn't seem to work (in extract mode, at least).

I tried hacking lib/loader.js so that it would create a separate SVG compiler for each sprite:

// let svgCompiler = new SVGCompiler();
const svgCompilers = {};

module.exports = function loader(content) {
  ...
  if (!svgCompilers[matchedRules.spriteFilename]) {
    svgCompilers[matchedRules.spriteFilename] = new SVGCompiler();
  }
  let svgCompiler = svgCompilers[matchedRules.spriteFilename];
  ...
}

However, more work was needed because lib/plugin.js also assumes that there's only one matching rule and SVG compiler.

So, I tried to hack lib/plugin.js to make it recognize the set of SVG compilers that I defined inside my hacked version of the loader, then I modified lib/utils/get-matched-rule.js to return an array of matching rules instead of a single rule, but I eventually had to give up because I was in over my head.

This is rather serious. I thought I could overcome with going multi-compiler for Webpack and it doesn't work either.

have any good idea for extra multiple sprites?

@kisenka do you have any pointers in the right direction for anyone to start making fixes? I would love to keep using this package, so please assist.

any news?

Possible workaround for TWO sprites, works for me. Can be easy reworked for more than two sprites using switch-case in spriteFilename function

{
    test: /\.svg$/,
    include: [
        path.resolve(__dirname, "path-to-FIRST-sprite-icons"),
        path.resolve(__dirname, "path-to-SECOND-sprite-icons")
    ],
    loader: 'svg-sprite-loader',
    options: {
        spriteFilename: svgPath => svgPath.includes('path-to-FIRST-sprite-icons') ? 'first-sprite-name.svg' : 'second-sprite-name.svg',
        extract: true
    }
}

Works as expected, just change _sprites to your folder which contains subfolders with icons.

{
  test: /.svg$/,
  loader: 'svg-sprite-loader',
  options: {
    extract: true,
    spriteFilename: (name) => {
      return `${/_sprites([\\|/])(.*?)\1/gm.exec(name)[2]}.svg`;
    },
  },
},