Create an SVG Sprites using svgson and react

Install

yarn add svg-spreact

Usage

const svgSpreact = require('svg-spreact')

const icons = [
  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Add</title>
    <path data-name="layer1"
    fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M32 16v32m16-16H16"
    stroke-linejoin="round" stroke-linecap="round"></path>
  </svg>`,
  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Checkmark</title>
    <path data-name="layer1"
    fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M16 33l11 11 21-22"
    stroke-linejoin="round" stroke-linecap="round"></path>
  </svg>`
]

svgSpreact(icons).then(({ defs, refs }) => {
  console.log(defs) // <symbol>
  console.log(refs) // <use>
})

API

svgSpreact(input, [options])

input

Type: Array

options

Type: Object

• tidy output prettyfied (Boolean) default: true
• optimize output optimizde with svgo (Boolean) default: true
• svgoConfig SVGO plugins configuration (Object) default
• processId function for customize Icons ids (Function) default: (n) => 'Icon_' + n
• className classname/s to add on each <use> element (String) default: ''

Example

Take a look into this example reading a folder with Icons

Related

svg-spreact-cli CLI version

web-app

[POST] endpoint | docs