rollup-plugin-svg-to-symbol

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
rollup-plugin-svg-to-symbol
311.0.04 years ago4 years agoMinified + gzip package size for rollup-plugin-svg-to-symbol in KB

Readme

rollup-plugin-svg-to-symbol Travis
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.