rollup-plugin-svg-sprite-loader

A rollup plugin to create and bundle external svg sprite file.

Table of contents

• rollup-plugin-svg-sprite-loader
  • Table of contents
  • Installation
  • Configuration
  • Module Config
    • symbolId
    • extract
    • pureSprite
    • outputPath
    • publicPath
    • spriteFilename
  • Svgo Config
    • pretty
    • minify
  • Usage
  • Licence

Installation

1# via npm
2  npm install rollup-plugin-svg-sprite-loader -D
3
4# via yarn
5  yarn add rollup-plugin-svg-sprite-loader

Configuration

Module Config

symbolIdQuery (string | (filePath: string) => string, default [name])

Set <symbol>attribute id , and set <use> attribute id to [symbolId]-usage in extract mode by default. Patterns: [extname], [dirname], [hash], [name]

e.g.:

1import svg from "rollup-plugin-svg-sprite-loader"
2
3rollup({
4  //...
5  plugins: [
6    svg({
7      // custom function
8      symbolIdQuery(filePath) {
9        return `${baseName(filePath, extname(filePath))}-${hash()}`
10      },
11      // pattern
12      symbolIdQuery: "[name][hash]",
13    }),
14  ],
15})

extract (boolean, default false)

true: Create external sprite file in outputPath/publicPath, and export SpriteSymbol<id: string, viewBox: string, url: string, toString(): string>

false: Inline sprite code and mount it when DOMContentLoaded , and export symbol instance SpriteSymbol<id: string, viewBox: string>

pureSprite (boolean, default: false)

true: Build sprite file in extract mode without <styles> and <use>. false: Build sprite file in extract mode with <styles> and <use>.

outputPath (string, default: "./dist/")

Set bundle file path, should be equal to rollup config output.dir.

publicPath (string, default: "/public/")

Set output path for sprite file which is relative to outputPath.

spriteFilename (string | (spriteDist: string) => string, default: "sprite.svg")

Set output sprite filename in extract mode. Patterns: [dirname], [hash]

e.g.:

1import svg from "rollup-plugin-svg-sprite-loader"
2
3rollup({
4  //...
5  plugins: [
6    svg({
7      // custom function
8      spriteFilename(spriteDist) {
9        return `sprite${baseName(filePath).slice(0, 6)}`
10      },
11      // pattern
12      spriteFilename: "sprite[hash].svg",
13    }),
14  ],
15})

Svgo Config

Options are passed directly to svgo to toggle various svgo plugins. You can find all plugins here: https://github.com/svg/svgo#what-it-can-do

pretty (boolean, default: false)

minify (boolean, default: true)

Option minify will override option pretty.

Usage

1// rollup.config.js
2import crypto from "crypto"
3import { baseName, extname } from "path"
4
5import svgSpriteLoader from "rollup-plugin-svg-sprite-loader"
6
7const hash = () => crypto.createHash('sha1').update(buffer).digest('hex').substr(0, 16)
8
9export default {
10  input: "src/index.js",
11  output: {
12    file: "dist/app.js",
13    format: "iife",
14  },
15  plugins: [
16    svgSprite({
17      outputPath: "dist/",
18      publicPath: "./public/",
19      spriteFilename: "sprite[hash]",
20      symbolIdQuery(filePath) {return `${baseName(filePath, extname(filePath))}-${hash()}`},
21      extract: true,
22    }),
23  ],
24}
25
26// somewhere in your project
27// extract mode
28import IconSVG from "./assets/icon/icon.svg"
29
30const Icon = () => {
31  const { viewBox, url } = IconSVG
32  return (
33    <svg viewBox={viewBox}>
34      <use xlinkHref={url} />
35    </svg>
36  )
37}
38
39// inline mode
40import IconSVG from "./assets/icon/icon.svg"
41
42const Icon = () => {
43  const { id, viewBox } = IconSVG
44  return (
45    <svg viewBox={viewBox}>
46      <use xlinkHref={`#${id}`>
47    </svg>
48  )
49}

Licence

MIT