fuse-box-svgstore-plugin
v0.0.4
Published
A FuseBox plugin creating and bundling svg symbol sprites with svgstore.
Downloads
48
Maintainers
Readme
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-plugin
or
yarn add --dev fuse-box-svgstore-plugin
Usage
- Configure your
fuse.js
file like below.const { FuseBox } = require('fuse-box'); const { SVGStorePlugin } = require('fuse-box-svgstore-plugin'); const fuse = FuseBox.init({ //... plugins: [SVGStorePlugin()], //... }); // ...
- Import
svg
andpath
from 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.