Skip to content

FuseBox plugin that allows you to handling SVG files with svgstore.

License

Notifications You must be signed in to change notification settings

h-ikeda/fuse-box-svgstore-plugin

Repository files navigation

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.

About

FuseBox plugin that allows you to handling SVG files with svgstore.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •