2.0 alpha

[kisenka]

Hi all! I am preparing to release big update, it's already accessible as svg-sprite-loader@2.0.0-alpha.4.

Please read carefully about upcoming breaking changes, new features and bugfixes.

Breaking changes

Node.js >= 6 required

¯_(ツ)_/¯

If you think that Node.js < 6 should be supported, please vote up in this issue.

Targeting Webpack 2

¯_(ツ)_/¯

If you think that Webpack 1 should be supported, please vote up in this issue.

Loader should always be configured with plugin, otherwise error is thrown.

Reason: architectural changes.
Migration: just add a plugin in your webpack config

// webpack.config.js
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

...

{
  plugins: [
    new SpriteLoaderPlugin()
  ]
}

name config option renamed to symbolId

Reason: more obviously.

regExp config option was removed

Reason: symbolId should cover most of naming cases.

prefixize config option was removed

Reason: all symbol elements isolated by default.

angularBaseWorkaround config option was removed

Reason: Angular introduced ability to remove the base tag requirement, see correspondent issue comment. If you still need it check angular-svg-base-fix.

Runtime has changed

Instead of symbol id runtime module now returns an object (class instance actually) which contains id, viewBox and content fields. See SpriteSymbol class and runtime generator.

Reason: make runtime more flexible, also it was requested in #32.
Migration:

// old
import symbol from './image.svg';
const rendered = `
<svg>
  <use xlink:href="${symbol}" />
</svg>`;


// new
import symbol from './image.svg';

// now .viewBox is available
const rendered = `
<svg viewBox="${symbol.viewBox}">
  <use xlink:href="#${symbol.id}" />
</svg>`;

If you think that loader should provide compatibility in this case, please vote up in this issue.

Features, improvements and bugfixes

Auto configuring

Some magic now happens by default, viz:

• Used runtime module depends on webpack 'target' config option: browser sprite module will be used for 'web' target, and isomorphic sprite module for all other targets.
• Loader turns in extract mode automatically if SVG image was imported from css/scss/html etc (see EXTRACTABLE_MODULE_ISSUER_PATTERN config param).
• Generated export format depends on webpack version, module.exports = ... for webpack 1, export default ... for webpack 2.

Sprite generator

• Sprite/symbol generator was moved in separate project (svg-baker) and fully reworked. It's incredible customizable now. Customization via plugin coming soon.

Client runtime

• Sprite/symbol javascript runtime was moved in separate project (svg-baker-runtime) and fully reworked.
• Added ability to specify custom runtime generator via runtimeGenerator option (check default runtime generator for example).
• Runtime symbol is an object now (class instance actually). It contains id, viewBox and content fields. See SpriteSymbol class.
  • Fixes Get viewBox for SVG tag #32.
• Base URL fix in style attributes (via svg-baker-runtime).
  • Fixes Support workarounds for <base> in style attribute: #7.

Server side rendering

• Server side rendering done right! See example.
• Fixes Doesn't work on the server side  #19.

Extract sprite/sprites as separate file/files

• Extract sprite as separate file done right! See example.
• Ability to extract multiple separate sprites by webpack loader config (example will be soon).
• Ability to extract sprite for each chunk, like extract-text-webpack-plugin (example will be soon). Experimental feature, should be used with caution.
• Fixes ExtractSVGPlugin outputs [object Object] for all symbol IDs #66, Extract isn't working #73, extract svg #83.

TODO

• More tests and examples.

[eugene1g]

Great, trying to test it out now. Everything seems to compile well, but the sprite is not injecting into the body as with v1. Do I need to make an explicit call to trigger this now?

[kisenka]

@eugene1g sprite should injects automatically. Which webpack version is used?

[eugene1g]

Webpack2.

 {
      test: /\.svg$/,
      include: [faModulesSrcDir + "/fa-icon"],
      use: [
        {
          loader: "svg-sprite-loader",
          options: {
            symbolId: "[name]_[hash:base64:8]",
            spriteModule: "svg-sprite-loader/runtime/browser-sprite.build"
          }
        },

        "svgo-loader"
      ]
    }

If I leave out spriteModule, then nothing gets injected. If I manually specify it, then it get injected but .stringify() is called before any symbols get populated and the resulting SVG has no nodes

[eugene1g]

Ok two separate notes -

1. The default/parent spriteModule svg-sprite-loader/runtime/sprite.build does not have DOM mounting logic, so it makes sense that it doesn't get injected. Hence forcing it to use browser-sprite fixes that problem.

2. I include all JS scripts at the end of the page, so when browser-sprite gets loaded it immediately mounts because document.body exists but before my require("icon.svg") code gets executed (because webpack does not guarantee the order of execution of every module). Therefore, the sprite gets mounted with no symbols in it, as none are populated at runtime yet. If I force the mount to happen on DOMContentLoaded, then all symbols are populated as expected.

[kisenka]

@eugene1g I need your setup for case №1, could you please create a gist/repo with minimal setup which can reproduce described behaviour.