kisenka/svg-sprite-loader

# 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:

```js
// 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](https://github.com/JetBrains/svg-sprite-loader/tree/master/lib/configurator.js#L20) by default, viz:

- Used runtime module depends on webpack 'target' config option: [browser sprite module](https://github.com/JetBrains/svg-sprite-loader/blob/85ce360c37fa09ce6932c6d9d32635d2eed9756a/runtime/browser-sprite.js) will be used for 'web' target, and [isomorphic sprite module](https://github.com/JetBrains/svg-sprite-loader/blob/85ce360c37fa09ce6932c6d9d32635d2eed9756a/runtime/sprite.js) 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](https://github.com/JetBrains/svg-sprite-loader/blob/85ce360c37fa09ce6932c6d9d32635d2eed9756a/lib/config.js#L8)).
- 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](https://github.com/JetBrains/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](https://github.com/JetBrains/svg-sprite-loader/issues/32).
 
  ```js
  // 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](https://github.com/JetBrains/svg-baker/tree/master/packages/svg-baker-runtime) and fully reworked.
- Added ability to specify custom runtime generator via `runtimeGenerator` option (check default [runtime generator](https://github.com/JetBrains/svg-sprite-loader/blob/85ce360c37fa09ce6932c6d9d32635d2eed9756a/lib/runtime-generator.js) for example).
- Runtime symbol is an object now (class instance actually). It contains `id`, `viewBox` and `content` fields. See [SpriteSymbol class](https://github.com/JetBrains/svg-baker/blob/edb3814a5ec2d11ef940955739d86d4af7a2474d/packages/svg-baker-runtime/src/symbol.js). Fixes [#32](https://github.com/JetBrains/svg-sprite-loader/issues/32).
- Base URL fix in `style` attributes ([svg-baker-runtime@efd32](https://github.com/JetBrains/svg-baker/blob/efd324c4d9dfc2f82b5fe7ecf71c3ff07812593b/packages/svg-baker-runtime/test/utils.test.js#L132)). Fixes [#7](https://github.com/JetBrains/svg-sprite-loader/issues/7).
- Encode special chars in url when modifying attributes ([svg-baker-runtime@efd32](https://github.com/JetBrains/svg-baker/blob/efd324c4d9dfc2f82b5fe7ecf71c3ff07812593b/packages/svg-baker-runtime/test/utils.test.js#L164)). Fixes [#79](https://github.com/JetBrains/svg-sprite-loader/issues/79).

### Server side rendering

- Server side rendering done right! See [example](https://github.com/JetBrains/svg-sprite-loader/tree/master/examples/server-side-rendering). Fixes [#19](https://github.com/JetBrains/svg-sprite-loader/issues/19).

### Extract sprite/sprites as separate file/files

- Extract sprite as separate file done right! See [example](https://github.com/JetBrains/svg-sprite-loader/tree/master/examples/extract-sprite). Fixes [#66](https://github.com/JetBrains/svg-sprite-loader/issues/66), [#73](https://github.com/JetBrains/svg-sprite-loader/issues/73), [#83](https://github.com/JetBrains/svg-sprite-loader/issues/32).
- 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.