fuse-box-svgstore-plugin
v0.0.4
Published
A FuseBox plugin creating and bundling svg symbol sprites with svgstore.
Maintainers
h-ikedaReadme
SVGStore Plugin for FuseBox
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.
Install
npm i --save-dev fuse-box-svgstore-pluginor
yarn add --dev fuse-box-svgstore-pluginUsage
- 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}" />`;
Options
No options available now.