https://github.com/fjc0k/rollup-plugin-svg-to-symbol

A rollup plugin JUST to transform SVG files to symobl strings, then you can freely handle them.
https://github.com/fjc0k/rollup-plugin-svg-to-symbol

rollup rollup-plugin svg svg-icons svg-sprite

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/fjc0k/rollup-plugin-svg-to-symbol
• Owner: fjc0k
• License: mit
• Created: 2018-06-03T10:23:51.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-03T13:32:36.000Z (over 6 years ago)
• Last Synced: 2024-04-16T05:01:34.972Z (5 months ago)
• Topics: rollup, rollup-plugin, svg, svg-icons, svg-sprite
• Language: JavaScript
• Homepage: http://npm.im/rollup-plugin-svg-to-symbol
• Size: 43.9 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - svg-to-symbol - Import SVG files as symbol strings. (Plugins / Other File Imports)

README

        
# rollup-plugin-svg-to-symbol [![Travis](https://travis-ci.org/fjc0k/rollup-plugin-svg-to-symbol.svg?branch=master)](https://travis-ci.org/fjc0k/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](https://github.com/fjc0k/svg-to-symbol-loader)

## Install

```bash

# Yarn

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

# npm

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

```

## Usage

```js

// rollup.config.js

const svgToSymbol = require('rollup-plugin-svg-to-symbol')

module.exports = {

  plugins: [

    svgToSymbol()

  ]

}

```

```js

// sprite.js

import add from './svg/add.svg'

import close from './svg/close.svg'

export default [

  '',

  add,

  close,

  ''

].join('')

```

The default export just likes:

```html

  

    .....

    .....

  

```

## 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.

```js

// rollup.config.js

svgToSymbol({

  extractId({ name }) {

    return `icon-${name}`

  }

})

```

```js

import add from './svg/add.svg'

// the add likes:

// ...

```

- __svgo__

  - Type: `Object`

  - Default: [See here](https://github.com/fjc0k/svg-to-symbol-loader/blob/master/src/defaultSVGOPlugins.js)

  - Desc: The [svgo](https://github.com/svg/svgo) plugins.