SVG Icon Sprite - Web Component
A Web Component to include and manipulate SVGs from a generated sprite file
- Serve all your SVG icons from a single file
- Fill, scale and manipulate your icons
- Optionally, generate the sprite file using the provided CLI script
- tiny 3KB (1.3KB gzipped)
- based on current web standards
Import the component
In static web pages
Simply reference the main file using the script tag in your HTML head
Via a module bundler
If you are using a bundler, import the node module via
// Webpack or some ES6-style bundler;// Browserify (CommonJS)const SvgIcon = ;
Use the component
Now that the web component is registered, you can invoke using the
Above markup example will render the
explore icon that is included in the
assets/sprites/sprite.svg as a symbol - read how to generate.
src- source relative to your app folder, syntax is
iconis the filename of the SVG
widthoptional - width of the SVG in any length unit (i.e.
autoetc.), default is
heightoptional - the height of the SVG in any length unit
classesoptional - class name(s) separated by spaces
viewBoxoptional - define lengths and coordinates in order to scale to fit the total space available
This icon pattern works best when applied on single color icons (SVGs that do not have fill or stroke attributes). This enables you to use CSS rules to change the icon's color:
When used with icons that contain styles inside their markup (multi-color), you will not be able to apply this CSS property without further work.
Scaling and Sizing
If your SVG does not scale like expected (i.e. it is cropped or larger than desired) it might be lacking a
viewBox property manually to match the size of the exported shape. A combination of the correct
viewBox and width is required.
<!-- i.e. lower '0 0 24 24' to '0 0 20 20' to scale up -->
Default sprite path
You can set the default sprite path by adding the attribute
data-svg-sprite-path to any meta tag in your html head
From now on you just need to pass the icon name as src attribute, i.e.
Using inside of Angular or React
The SVG-Icon web component matches perfectly with SPA like Angular or React
Polyfills and browser support
As Web Components are not supported in older browsers, you might want to install a polyfill
npm i @webcomponents/webcomponentsjs
and include it in the head of your
This should enable support in all evergreen browsers (also including Edge, Safari 9+). To learn more, read this.
Generating the sprite
Each time you add an icon, you need to run a script generating the sprite. This module ships with a generator CLI script. It is recommended to add the following line to your npm scripts
That lets you run the generator via
npm run generate:sprite
You can pass following arguments the form
||Path of the source folder relative to your package.json|
||Path and filename for the sprite output||
||Whether to remove
||Whether to remove all whitespaces (tabs, linebreaks etc.)||
svg-icon-generate --folder=assets/icons --output=assets/sprites/sprite.svg --trim
The included script will iterate all SVGs in the source folder and create a single sprite SVG file using the symbols technique.
Author & License
- Jan Suwart | MIT License