rollup-plugin-svg-to-symbol

1.0.0 • Public • Published

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

Package Sidebar

Install

npm i rollup-plugin-svg-to-symbol

Weekly Downloads

42

Version

1.0.0

License

MIT

Unpacked Size

5.59 kB

Total Files

5

Last publish

Collaborators

  • funch