2.0.md

svg-sprite-loader 2.0 overview

Breaking changes & how to migrate

tl;dr:

• Node.js >= 6 is required.
• name option was renamed to symbolId.
• regExp, prefixize, angularBaseWorkaround options was removed and will have no effect. Prefixize applies for symbol elements by default. Workaround for Angular enables automatically when 'angular' in window === true.
• Runtime API has changed, but compatible mode available via runtimeCompat: true.

In most cases following config should work:

// webpack 1
module.exports = {
  module: {
    loaders: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader?runtimeCompat=true'
      }
    ]
  }
}

// webpack 2
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          runtimeCompat: true
        }
      }
    ]
  }
}

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 switches in extract mode automatically if SVG image was imported from css/scss/html etc (see EXTRACTABLE_MODULE_ISSUER_PATTERN).
• Generated export format depends on webpack version, module.exports = ... for webpack 1, export default ... for webpack 2.

Sprite generator

• Sprite/symbol generator was moved to separate project svg-baker and fully reworked.

Client runtime

• New runtime API. Instead of symbol id runtime module now returns an object (class instance actually) which contains id, viewBox and content fields. Reason: make runtime more flexible, also it was requested in #32.

  // old
  import symbolId from './image.svg';
  // symbolId === '#image'
  
  const rendered = `
  <svg>
    <use xlink:href="${symbolId}" />
  </svg>`;
  
  
  // new
  import symbol from './image.svg';
  // symbol === SpriteSymbol<id: string, viewBox: string, content: string>
  
  const rendered = `
  <svg viewBox="${symbol.viewBox}">
    <use xlink:href="#${symbol.id}" />
  </svg>`;

  If you need old behaviour, set runtimeCompat option to true.

• Sprite/symbol javascript runtime was moved to 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 (svg-baker-runtime@efd32). Fixes #7.

• Encode special chars in url when modifying attributes (svg-baker-runtime@efd32). Fixes #79.

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. Fixes #66, #73, #83.
• 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.