This FuseBox plugin allows you to handling SVG files with svgstore. It exports SVG texts those are wraped with <symbol> 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
- Configure your
fuse.jsfile like below.const { FuseBox } = require('fuse-box'); const { SVGStorePlugin } = require('fuse-box-svgstore-plugin'); const fuse = FuseBox.init({ //... plugins: [SVGStorePlugin()], //... }); // ...
- Import
svgandpathfrom your SVG files.import { svg, path } from './path/to/svgfile.svg'; console.log(svg); // <svg><symbol id="...id_for_sprite...">...</symbol></svg> console.log(path); // #...id_for_sprite...
- Inject SVG element to the DOM tree. For example,
const e = document.createElement('div'); e.innerHTML = svg; e.firstElementChild.style.display = 'none'; document.body.appendChild(e.firstElementChild);
- Use SVG symbols in everywhere you need with
<use>tag.<html> <body> <div> <svg class="icon"></svg> </div> <!-- Non displayed SVG is injected here by previous step. --> </body> </html>
const target = document.body.querySelector('svg.icon'); target.innerHTML = `<use xlink:href="${path}" />`;
No options available now.