# webpack-svg-sprite

> Build an SVG sprite file with Webpack and svg-sprite using configuration rather than imported dependencies in your app bundles.

Latest version **0.0.1** (published 2018-05-17) · ISC license · 0 weekly downloads

## Install

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

## 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.0.1 |
| Published | 2018-05-17 |
| First published | 2018-05-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 4.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Matt Mink |
| Maintainers | matthewjmink |

## Links

- npm: https://www.npmjs.com/package/webpack-svg-sprite
- Repository: https://github.com/matthewjmink/webpack-svg-sprite-plugin
- Homepage: https://github.com/matthewjmink/webpack-svg-sprite-plugin#readme
- Issues: https://github.com/matthewjmink/webpack-svg-sprite-plugin/issues
- npm.io page: https://npm.io/package/webpack-svg-sprite

## Dependencies (4)

- [fs](https://npm.io/package/fs.md) 0.0.1-security
- [path](https://npm.io/package/path.md) ^0.12.7
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [svg-sprite](https://npm.io/package/svg-sprite.md) ^1.4.0

## Recent versions

- 0.0.1 (latest) — 2018-05-17

## README

# Webpack SVG Sprite Plugin
Build an SVG sprite with Webpack and [svg-sprite](https://github.com/jkphl/svg-sprite) using configuration rather than imported dependencies in your app bundles. This is helpful if your app is not entirely powered by your bundled files - for example, a multi-page application made up of server-side and client-side components.

## Usage
**webpack.config.babel.js**
```javascript
import path from 'path';
import webpack from 'webpack';
import WebpackSVGSpritePlugin from 'webpack-svg-sprite';
import icons from './svg-sprite.js';
...
module.exports = {
    ...
    plugins: [
        new WebpackSVGSpritePlugin({icons}),
        ...
    ]
    ...
};
```
**svg-sprite.js**
```javascript
export default [
    'user',
    'lock',
    'menu',
    ...
];
```
It's up to you to include the sprite in your app now, but once you've got it, you can now do this:
```html
    <svg>
        <use href="#user"></use>
    </svg>
```
## Options
|Name|Type|Default|Description|
|---|---|---|---|
|**icons**|`Array<String>` \| `String`|`[]`|Either an array of icon names, or a reference to a config file containing the list. Each icon's file name will be used as the ID (i.e. `icon-name.svg` will be `'icon-name'`).|
|**context**|`String`|`'./icons'`|The path to the folder containing the separate SVG icon files.|
|**dest**|`String`|`'./dist'`|The path to the output folder where the generated SVG sprite file will be placed.|
|**filename**|`String`|`'sprite.svg'` <br>or the name of the config file if `options.icons` is a string.|The name of the generated SVG sprite file. (i.e. `'svg-sprite.svg'`|

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