https://github.com/alexxnb/rollup-plugin-svg-icons

Rollup plugin for bundling all svg icons from the speciefed folder to the single spritesheet svg file.
https://github.com/alexxnb/rollup-plugin-svg-icons

Last synced: 4 months ago
JSON representation

Rollup plugin for bundling all svg icons from the speciefed folder to the single spritesheet svg file.

• Host: GitHub
• URL: https://github.com/alexxnb/rollup-plugin-svg-icons
• Owner: AlexxNB
• License: mit
• Created: 2019-06-07T19:25:45.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-07-20T01:28:31.000Z (almost 3 years ago)
• Last Synced: 2025-02-24T05:45:50.924Z (4 months ago)
• Language: HTML
• Homepage:
• Size: 241 KB
• Stars: 10
• Watchers: 1
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rollup-plugin-svg-icons

Bundles all svg icons from the specified folder to the single spritesheet svg file.

[![npm](https://img.shields.io/npm/v/rollup-plugin-svg-icons)](https://www.npmjs.com/package/rollup-plugin-svg-icons)   [![npm](https://img.shields.io/npm/dt/rollup-plugin-svg-icons)](https://www.npmjs.com/package/rollup-plugin-svg-icons)    [![](https://github.com/AlexxNB/rollup-plugin-svg-icons/workflows/Publish%20on%20NPM/badge.svg)](https://github.com/AlexxNB/rollup-plugin-svg-icons/actions?workflow=Publish+on+NPM) 

## Installation

```bash

npm i -D rollup-plugin-svg-icons

```

## Rollup configuration

```javascript

/* rollup.config.js */

import svgicons from 'rollup-plugin-svg-icons'

export default {

...

  plugins: [

    svgicons({

      // folder with svg-icons

      inputFolder: 'src/icons',  // it is default value

      // path for the sprite file

      output: 'dist/bundle.svg', // it is default value

      // Also you can use any Svgstore options: 

      // https://github.com/svgstore/svgstore#svgstore-options

      //

      // cleanDefs

      // cleanSymbols

      // svgAttrs

      // symbolAttrs

      // copyAttrs

      // renameDefs

      // .. and inline option for `svgstore.toSting()` method

    })

    ...

  ]

  ...

}

```

## Usage in HTML

Use href `bundle.svg#iconid` where `iconid` is base part of svg-icon filename. For ex. if in source folder you have `myicon.svg` then you should use `bandle.svg#myicon`:

```html

.inline-svg-icon{

  display: inline-block;

  fill: currentColor;

  width: 24px;

  height: 24px;

  vertical-align: middle;

}

  

```

## Restrictions

Icons with gradients or some types of complex shapes will not be packed in the sprite correctly.

## Inspiration

Plugin based on [svgstore](https://www.npmjs.com/package/svgstore) package.

## License

MIT