Awesome

rollup-plugin-svg-to-symbol

A rollup plugin JUST to transform SVG files to symobl strings, then you can freely handle them.

Webpack version: fjc0k/svg-to-symbol-loader

Install

# Yarn
yarn add rollup-plugin-svg-to-symbol -D

# npm
npm i rollup-plugin-svg-to-symbol -D

Usage

// rollup.config.js
const svgToSymbol = require('rollup-plugin-svg-to-symbol')

module.exports = {
  plugins: [
    svgToSymbol()
  ]
}

// sprite.js
import add from './svg/add.svg'
import close from './svg/close.svg'

export default [
  '<svg><defs>',
  add,
  close,
  '</defs></svg>'
].join('')

The default export just likes:

<svg>
  <defs>
    <symbol id="add">.....</symbol>
    <symbol id="close">.....</symbol>
  </defs>
</svg>

Options

• extractId
  • Type: ({ name }) => id
  • Default: ({ filePath, name }) => name
  • Desc: Use the function to custom symbol id. The name is the SVG filename without the extension. e.g.

// rollup.config.js
svgToSymbol({
  extractId({ name }) {
    return `icon-${name}`
  }
})

import add from './svg/add.svg'
// the add likes:
// <symbol id="icon-add">...</symbol>

• svgo
  • Type: Object
  • Default: See here
  • Desc: The svgo plugins.