A FuseBox plugin creating and bundling svg symbol sprites with svgstore.
npm install fuse-box-svgstore-plugin
elements and path to them. Useful for structuring SVG sprites.
npm i --save-dev fuse-box-svgstore-plugin
`
or
`
yarn add --dev fuse-box-svgstore-plugin
`Usage
1. Configure your fuse.js file like below.
`js
const { FuseBox } = require('fuse-box');
const { SVGStorePlugin } = require('fuse-box-svgstore-plugin');
const fuse = FuseBox.init({
//...
plugins: [SVGStorePlugin()],
//...
});
// ...
`
2. Import svg and path from your SVG files.
`js
import { svg, path } from './path/to/svgfile.svg';
console.log(svg);
//
console.log(path);
// #...id_for_sprite...
`
3. Inject SVG element to the DOM tree. For example,
`js
const e = document.createElement('div');
e.innerHTML = svg;
e.firstElementChild.style.display = 'none';
document.body.appendChild(e.firstElementChild);
`
4. Use SVG symbols in everywhere you need with