Create external svg sprite file from your bundle using Rollup and optimize it using SVGO.
# yarn
yarn add rollup-plugin-svg-sprite -D
# npm
npm install rollup-plugin-svg-sprite -D
// rollup.config.js
import svgSprite from 'rollup-plugin-svg-sprite'
export default {
input: 'src/index.js',
output: {
file: 'dist/app.js',
format: 'iife'
},
plugins: [
svgSprite({
outputFolder: 'dist/public'
})
]
}
Next, import svg files in your project:
import './svg/trash.svg'
import './svg/user.svg'
There are some useful options:
Type: string
Folder where generated svg sprite will be saved.
svgSprite({
outputFolder: 'dist/public'
})
Type: boolean
| Default: true
Minify generated svg sprite.
svgSprite({
outputFolder: 'dist/public',
minify: false
})
All other options are passed to svgo package which is used inside.
MIT