Skip to content

2.0.md

Latest commit

 

History

History
101 lines (75 loc) · 4.9 KB

2.0.md

File metadata and controls

101 lines (75 loc) · 4.9 KB

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.