❤
npm
Sign UpSign In

fuse-box-svgstore-plugin

0.0.4 • Public • Published

CircleCI

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

  1. 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()],
     
        //...
    });
     
    // ...
  2. Import svg and path 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...
  3. 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);
  4. 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.

Readme

Keywords

Package Sidebar

Install

npm i fuse-box-svgstore-plugin

Repository

github.com/h-ikeda/fuse-box-svgstore-plugin

Homepage

github.com/h-ikeda/fuse-box-svgstore-plugin#readme

Weekly Downloads

32

Version

0.0.4

License

MIT

Unpacked Size

11.5 kB

Total Files

16

Last publish

Collaborators

  • h-ikeda
Try on RunKit
Report malware