rollup-plugin-svg-sprites

Rollup plugin for creating SVG sprites.

PS：该插件是基于 svg-baker 和 svg-baker-runtime 的，跟 svg-sprite-loader 同根同源，基本可以认为是从 webpack 转到 rollup 上，可以减少避免自己踩坑。

Installation

The plugin dependencies svg-baker. It requires @rollup/plugin-commonjs.

// npm
npm i rollup-plugin-svg-sprites -D

// yarn
yarn add rollup-plugin-svg-sprites -D

The plugin dependencies svg-baker. It requires @rollup/plugin-commonjs.

// npm
npm i @rollup/plugin-commonjs -D

// yarn
yarn add @rollup/plugin-commonjs -D

Usage

Use in TypeScript

Add the type definitions in *.d.ts:

declare module '*.svg?vueComponent' {
  import { Component } from 'vue'
  const src: Component
  export default src
}

declare module '*.svg?jsx' {
  import { ReactElement } from 'react'
  const src: ReactElement<any, any>
  export default src
}

Basic usage

rollup.config.js:

1import svgSprites from 'rollup-plugin-svg-sprites'
2import commonjs from '@rollup/plugin-commonjs'
3
4export default {
5  input: './src/index.js',
6  output: {
7    format: 'esm',
8    file: 'dist/bundle.js'
9  },
10  plugins: [
11    commonjs(),
12    svgSprites()
13  ]
14}

foo.js:

1import MyIcon from './my-icon.svg'
2
3// <svg><use xlink:href="#${MyIcon.id}"></use></svg>

Be use for Vue3.x Vite

vite.config.js :

1import svgSprites from 'rollup-plugin-svg-sprites'
2
3// https://vitejs.dev/config/
4export default defineConfig({
5  plugins: [
6    vue(),
7    svgSprites({
8      exclude: ['node_modules/**']
9    })
10  ]
11})

Vue SFC:

1<template>
2  <MyIcon />
3</template>
4
5<script setup>
6import MyIcon from './my-icon.svg?vueComponent'
7</script>

Vite + React

1. vite.config.js：

1import svgSprites from 'rollup-plugin-svg-sprites'
2
3// https://vitejs.dev/config/
4export default defineConfig({
5  plugins: [
6    react(),
7    svgSprites({
8      include: ['./icons']
9    })
10  ]
11})

2. App.jsx：

1import MyIcon from './my-icon.svg?jsx'
2
3function App() {
4  return (
5    <div className="App">
6      <MyIcon />
7    </div>
8  );
9}
10
11export default App;

A large number of SVGs

eg from vfox:

1. rollup.config.js:

1import svgSprites from 'rollup-plugin-svg-sprites'
2import requireContext from '@godxiaoji/rollup-plugin-require-context'
3
4function kebabCase2PascalCase(name) {
5  name = name.replace(/-(\w)/g, (all, letter) => {
6    return letter.toUpperCase()
7  })
8  return name.substr(0, 1).toUpperCase() + name.substr(1)
9}
10
11export default {
12  input: './src/load-svg.js',
13  output: {
14    format: 'esm',
15    file: `lib/load-svg.js`,
16    banner: '/* eslint-disable */'
17  },
18  plugins: [
19    requireContext(),
20    svgSprites({
21      symbolId(filePath) {
22        const paths = filePath
23          .replace(/\\/g, '/')
24          .split('assets/icons/')[1]
25          .split('/')
26
27        const fileName = paths.pop().replace('.svg', '')
28        return (
29          'icon-' + kebabCase2PascalCase([fileName].concat(paths).join('-'))
30        )
31      }
32    })
33  ],
34}

2. ./src/load-svg.js:

1const req = require.context('./assets/icons', true, /\.svg$/)

3. Output the library:

rollup -c

4. Use in Vue SFC:

1<template>
2  <svg>
3    <use xlink:href="#icon-My"></use>
4  </svg>
5</template>
6
7<script setup>
8import './lib/load-svg'
9</script>

Configuration

symbolId: (path: string) => string

How id attribute should be named.

eg:

1svgSprite({
2  symbolId(path, query) {
3    return path.basename(path)
4  }
5})

exclude: string | string[]

A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore.

include: string | string[]

A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on.

vueComponent: boolean

Default: false

If true, when import ".svg" will return a Vue3.x Component. Priority level is weaker than import ".svg?vueComponent".

jsx: boolean

Default: false

If true, when import ".svg" will return a JSX Function. Priority level is weaker than import ".svg?jsx".

PS:

• It use the new JSX transform, so the react version requirement is >=17.0.0, >=16.14.0 or >=15.7.0.
• If JSX is used in Vue, "vueComponent" should be used instead.

LICENSE

MIT