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

FuseBox plugin that allows you to handling SVG files with svgstore.
https://github.com/h-ikeda/fuse-box-svgstore-plugin

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/h-ikeda/fuse-box-svgstore-plugin
• Owner: h-ikeda
• License: mit
• Created: 2019-04-04T23:04:00.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-16T20:03:04.000Z (over 2 years ago)
• Last Synced: 2025-01-24T09:35:37.587Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 507 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![CircleCI](https://circleci.com/gh/h-ikeda/fuse-box-svgstore-plugin.svg?style=svg)](https://circleci.com/gh/h-ikeda/fuse-box-svgstore-plugin)

# SVGStore Plugin for FuseBox

This [FuseBox](https://fuse-box.org) plugin allows you to handling SVG files with [svgstore](https://github.com/svgstore/svgstore). It exports SVG texts those are wraped with `` 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.

   ```js

   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.

   ```js

   import { svg, path } from './path/to/svgfile.svg';

   

   console.log(svg);

   // ...

   console.log(path);

   // #...id_for_sprite...

   ```

3. Inject SVG element to the DOM tree. For example,

   ```js

   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 `` tag.

   ```html

   

     

       


         

       

       

     

   

   ```

   ```js

   const target = document.body.querySelector('svg.icon');

   target.innerHTML = ``;

   ```

## Options

No options available now.