rollup-plugin-svg-icons
v2.1.2
Published
Bundles all svg icons from the speciefed folder to the single spritesheet svg file
Downloads
1,333
Maintainers
Readme
rollup-plugin-svg-icons
Bundles all svg icons from the specified folder to the single spritesheet svg file.
Installation
npm i -D rollup-plugin-svg-icons
Rollup configuration
/* rollup.config.js */
import svgicons from 'rollup-plugin-svg-icons'
export default {
...
plugins: [
svgicons({
// folder with svg-icons
inputFolder: 'src/icons', // it is default value
// path for the sprite file
output: 'dist/bundle.svg', // it is default value
// Also you can use any Svgstore options:
// https://github.com/svgstore/svgstore#svgstore-options
//
// cleanDefs
// cleanSymbols
// svgAttrs
// symbolAttrs
// copyAttrs
// renameDefs
// .. and inline option for `svgstore.toSting()` method
})
...
]
...
}
Usage in HTML
Use href bundle.svg#iconid
where iconid
is base part of svg-icon filename. For ex. if in source folder you have myicon.svg
then you should use bandle.svg#myicon
:
<style>
.inline-svg-icon{
display: inline-block;
fill: currentColor;
width: 24px;
height: 24px;
vertical-align: middle;
}
</style>
<svg class="inline-svg-icon">
<use xlink:href="bundle.svg#iconid"></use>
</svg>
Restrictions
Icons with gradients or some types of complex shapes will not be packed in the sprite correctly.
Inspiration
Plugin based on svgstore package.
License
MIT