https://github.com/vadymshymko/svg-sprite-generation-loader
Webpack loader for generating svg sprites
https://github.com/vadymshymko/svg-sprite-generation-loader
svg svg-icons svg-loader svg-loaders svg-sprite svg-sprite-icon svg-sprite-loader svg-sprite-symbols svg-sprites svg-spritesheet webpack webpack-loader webpack-svg webpack-svg-plugin
Last synced: 4 months ago
JSON representation
Webpack loader for generating svg sprites
- Host: GitHub
- URL: https://github.com/vadymshymko/svg-sprite-generation-loader
- Owner: vadymshymko
- License: mit
- Created: 2022-06-05T13:43:03.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2026-03-02T07:54:30.000Z (4 months ago)
- Last Synced: 2026-03-02T11:54:15.111Z (4 months ago)
- Topics: svg, svg-icons, svg-loader, svg-loaders, svg-sprite, svg-sprite-icon, svg-sprite-loader, svg-sprite-symbols, svg-sprites, svg-spritesheet, webpack, webpack-loader, webpack-svg, webpack-svg-plugin
- Language: JavaScript
- Homepage: https://github.com/vadymshymko/svg-sprite-generation-loader
- Size: 649 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# svg-sprite-generation-loader
[](https://www.npmjs.com/package/svg-sprite-generation-loader)
[](https://github.com/vadymshymko/svg-sprite-generation-loader/blob/master/LICENSE)
Webpack loader for generating external svg symbol sprite files
## Table of contents
- [How it works?](#how-it-works)
- [Installation](#installation)
- [Usage](#usage)
- [Options](#options)
## How it works?
svg-sprite-generation-loader is a webpack-loader that takes a multiple svg files, optimize them (using [svgo.optimize](https://github.com/svg/svgo#optimize)), transform (parse and return as an object with `symbolId`, `attributes` and `content` (disabled by default) keys) and put them back in one file.
Input multiple svg files, e.g:
```html
```
Output one svg file (svg sprite):
```html
```
You can refer to this file to display all your icons using [SVG stacking technique](https://css-tricks.com/svg-fragment-identifiers-work/#article-header-id-4)
## Installation:
```bash
npm install svg-sprite-generation-loader --save-dev
```
**yarn**
```bash
yarn add svg-sprite-generation-loader --dev
```
**pnpm**
```bash
pnpm add svg-sprite-generation-loader --save--dev
```
## Usage:
In your webpack config:
```javascript
const SvgSpriteGenerationPlugin = require('svg-sprite-generation-loader/plugin.js');
module.exports = {
plugins: [new SvgSpriteGenerationPlugin()],
module: {
rules: [
{
test: /\.svg$/,
use: 'svg-sprite-generation-loader',
},
],
},
};
```
In some source code:
```jsx
import iconData from 'path/to/some/icon-file-name.svg';
// by default iconData will include symbolId and attributes keys.
// If you enable the addContent loader option, the `content` key will also be added
;
```
## Options
| Name | Type | Default value | Description |
| -------------- | -------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| symbolId | `string` \| `function` | `"[name]"` | Sprite item (single icon) `` `id` attribute value.
`string` or `function` that takes the file path of the original icon as an argument and returns `string`.
You can use [interpolateName](https://github.com/webpack/loader-utils#interpolatename) patterns.
Default value (`"[name]"`) is equal to icon filename (without extension). For example, by default symbolId for `file1.svg` file will be `file1` |
| spriteFilePath | `string` | `sprite.svg` | Path to sprite file.
`webpack.output.path` is included. You can use [interpolateName](https://github.com/webpack/loader-utils#interpolatename) patterns. |
| svgoOptimize | `boolean` \| `object` | `true` | Enable/Disable/Customize source svg file optimization with [svgo.optimize](https://github.com/svg/svgo#optimize). The following options are used by default:
`{`
`plugins: [`
`{`
`name: 'preset-default',`
`params: {`
`overrides: {`
`removeViewBox: false,`
`},`
`},`
`},`
`'removeXMLNS',`
`],`
`}` You can disable it completely (by passing `false`) or use your own configuration (see [svgo docs](https://github.com/svg/svgo#optimize)) |
| **addContent** | `boolean` | `false` | Add svg content as property to transformed svg object (may increase bundle size when enabled) |