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
and path
from your SVG files.
import { svg, path } from './path/to/svgfile.svg';
console.log(svg);
console.log(path);
- 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>
</body>
</html>
const target = document.body.querySelector('svg.icon');
target.innerHTML = `<use xlink:href="${path}" />`;
Options
No options available now.