2.0 alpha

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 #32.
• Base URL fix in style attributes (via svg-baker-runtime).
  • Fixes #7.

Server side rendering

• Server side rendering done right! See example.
• Fixes #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 #66, #73, #83.

TODO

• More tests and examples.

[kisenka]

🎉 2.0 is out, please read migration guide & overview.

[kisenka]

svg-sprite-loader@2.0.0-alpha.3 with domready is published 😃