# extract-svg-sprite-webpack-plugin

> Webpack plugin extract SVGs to separate file. Main purpose - extract images from CSS. But also works with SVGs imported from JS.

Latest version **0.8.1** (published 2020-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install extract-svg-sprite-webpack-plugin
pnpm add extract-svg-sprite-webpack-plugin
yarn add extract-svg-sprite-webpack-plugin
bun add extract-svg-sprite-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.1 |
| Published | 2020-04-27 |
| First published | 2018-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 40.8 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 174 |
| Author | JetBrains |
| Maintainers | kisenka |

## Links

- npm: https://www.npmjs.com/package/extract-svg-sprite-webpack-plugin
- Repository: https://github.com/JetBrains/svg-mixer
- Homepage: https://github.com/JetBrains/svg-mixer/tree/master/packages/extract-svg-sprite-webpack-plugin
- Issues: https://github.com/JetBrains/svg-mixer/issues
- npm.io page: https://npm.io/package/extract-svg-sprite-webpack-plugin

## Dependencies (6)

- [postcss](https://npm.io/package/postcss.md) ^7.0.14
- [svg-mixer](https://npm.io/package/svg-mixer.md) ^2.3.14
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2
- [svg-mixer-utils](https://npm.io/package/svg-mixer-utils.md) ^0.3.4
- [postcss-svg-mixer](https://npm.io/package/postcss-svg-mixer.md) ^0.3.17

## Recent versions

- 0.8.1 (latest) — 2020-04-27
- 0.8.0 — 2020-04-27
- 0.7.3 — 2020-04-06
- 0.7.2 — 2020-04-03
- 0.7.1 — 2020-04-02
- 0.7.0 — 2020-04-01
- 0.4.2 — 2019-07-23
- 0.4.1 — 2019-04-27
- 0.4.0 — 2019-04-27
- 0.3.8 — 2019-02-08
- 0.3.7 — 2018-12-05
- 0.3.6 — 2018-10-29
- 0.3.5 — 2018-10-29
- 0.3.4 — 2018-10-29
- 0.3.3 — 2018-09-28
- … 7 more at https://npm.io/package/extract-svg-sprite-webpack-plugin/versions

## README

# extract-svg-sprite-webpack-plugin

Webpack plugin extract SVGs to separate file. Main purpose - extract images from CSS.
But also works with SVGs imported from JS.

- [Demo](#demo)
- [Installation](#installation)
- [Example config](#example-config)
- [Configuration](#configuration)

## Demo

Input
```css
.img {
  background: url('img.svg');
}
```

Output
```css
.img {
  background: url('sprite.svg') no-repeat 0 0;
  background-size: 100% 104.50%;
}
```

## Installation

```
npm install extract-svg-sprite-webpack-plugin
```

<a name="example-config"></a>
## Example config

For "classic" SVG sprite you will need to setup 2 loaders: first for the SVGs, 
second for CSS, for generating proper styles for positioning symbol within the sprite. 

```js
const SpritePlugin = require('extract-svg-sprite-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: SpritePlugin.loader
      },      
      {
        test: /\.css$/,
        use: [
          'css-loader',
          SpritePlugin.cssLoader, /* should be right BEFORE css-loader */
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new SpritePlugin({ options })
  ]
}
```

## Configuration

### `emit`

> Type: boolean<br>
> Default: `true`

Emit sprite file. 

### `filename`

> Type: string | Function<br>
> Default: `sprite.svg`

File name of resulting sprite. `[contenthash]` token will be replaced with hash of
file content. 

### `publicPath`

> Type: string
> Default: null

Custom public path for sprites. By default webpack's `output.publicPath` will be used.

### `runtimeGenerator`

> Type: RuntimeGenerator

Custom runtime generator. Docs will be ASAP.

### `selector`

CSS selector for generated sprite styles. By default current selector is used, 
but is is possible to create separate style rule with sprite styles by specifying 
a valid CSS selector which will be appended to current rule. Note that original 
background image declaration will be moved to new rule. Example for `selector: '::after''`:

```css
/* Input */
.img {
  background: url('img.svg');
}

/* Output */
.img {}
.img::after {
  background: url('sprite.svg') no-repeat 0 0;
  background-size: 100% 104.50%;
}
```

### `spriteClass`

> Type: mixer.Sprite
> Default: mixer.Sprite

Custom sprite class. Docs will be ASAP.

### `spriteConfig`

> Type: Object
> Default: undefined

See [svg-mixer spriteConfig](https://github.com/JetBrains/svg-mixer/tree/master/packages/svg-mixer#spriteConfig).

### `spriteType`

> Type: 'classic' | 'stack'
> Default: 'classic'

See [svg-mixer spriteType](https://github.com/JetBrains/svg-mixer/tree/master/packages/svg-mixer#spriteType).

For classic sprite you will need to setup additional loader for CSS. See [example config](#example-config).

### `symbolClass`

> Type: mixer.SpriteSymbol
> Default: mixer.SpriteSymbol

Custom symbol class. Docs will be ASAP.

### `symbolId`

> Type: string | Function
> Default: '[name]'

How `<symbol id>` attribute should be named. All patterns from [loader-utils#interpolateName](https://github.com/webpack/loader-utils#interpolatename)
are supported. Also can be a function which accepts 2 args - file path and query 
string and should return a function.

## LICENSE

[MIT](https://github.com/JetBrains/svg-mixer/blob/master/LICENSE)

---
_Source: https://npm.io/package/extract-svg-sprite-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._