rollup-plugin-svgsprite-generator

Rollup Plugin - SVG Sprite Generator

This rollup plugin allows you to generate an external SVG sprite file.

Installation

Run the following console command to install the plugin:

npm i rollup-plugin-svgsprite-generator

Usage

In the rollup.config.js file, import the plugin and specify the input and output folders:

 import { svgSprite } from 'rollup-plugin-svgsprite-generator';
 ...
 export default [
    {
       ...
       plugins:[
         svgSprite({
            input: 'folder-that-contains-the-svg-file',
            output: 'path-where-to-generate-the-sprite',
         })
       ]
    }
 ]

Configuration Options

You can specify the following generation options:

minify

Type: boolean | Default value: true

Specifies whether to minify the sprite.

doctype

Type: boolean | Default value: true

Specifies whether to include the DOCTYPE header.

xml

Type: boolean | Default value: true

Specifies whether to include the <xml> tag.

inlineStyles

Type: boolean | Default value: true

Specifies whether to use inline styles instead of CSS classes in tags.

idConvert

Type: function | Default value: id => id

Modifies the id attribute for the <symbol> tag. Accepts and returns a string value.

styleModification

Type: function | Default value: id => id

Modifies inline SVG styles. Accepts and returns an object.

output

Type: string

Specifies the file path to the output SVG sprite.

input

Type: string

Specifies the folder that contains input SVG files.

hash

Type: boolean | Default value: false

Specifies whether to add hash to the output file name.

postGenerate

Type: function | Default value: (ids, outputFileName) => { }

A callback function executed after the sprite is generated. Accepts IDs of input files and the output file name.