https://github.com/g-makarov/vite-plugin-svg-spritemap

This vite plugin generates a single SVG spritemap containing multiple elements from all .svg files in a directory.
https://github.com/g-makarov/vite-plugin-svg-spritemap

icon icons sprite spritemap sprites svg svg-sprite svg-symbol symbol symbols typescript vite-plugin

Last synced: 2 months ago
JSON representation

This vite plugin generates a single SVG spritemap containing multiple elements from all .svg files in a directory.

• Host: GitHub
• URL: https://github.com/g-makarov/vite-plugin-svg-spritemap
• Owner: g-makarov
• License: mit
• Created: 2023-03-27T15:50:27.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-07T10:35:44.000Z (3 months ago)
• Last Synced: 2024-10-07T10:45:04.876Z (3 months ago)
• Topics: icon, icons, sprite, spritemap, sprites, svg, svg-sprite, svg-symbol, symbol, symbols, typescript, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 645 KB
• Stars: 39
• Watchers: 1
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - vite-plugin-svg-spritemap - Generates a SVG spritemap from multiple .svg files. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-svg-spritemap - Generates a SVG spritemap from multiple .svg files. (Plugins / Framework-agnostic Plugins)
• jimsghstars - g-makarov/vite-plugin-svg-spritemap - This vite plugin generates a single SVG spritemap containing multiple elements from all .svg files in a directory. (TypeScript)

README

        
# vite-plugin-svg-spritemap

This [vite](https://vitejs.dev/) plugin generates a single SVG spritemap containing multiple  elements from all `.svg` files in a directory.



  





  



## Features

- Easily generate the SVG spritemap as part of your build process

- Supports ``, so you can use gradients, patterns, and masks

- Works with dev server 🔥

If you find this plugin useful, why not



## Installation

```bash

# using npm

npm install -D vite-plugin-svg-spritemap

# using pnpm

pnpm install -D vite-plugin-svg-spritemap

# using yarn

yarn add --dev vite-plugin-svg-spritemap

```

## Usage

**Vite config**

```ts

import { svgSpritemap } from 'vite-plugin-svg-spritemap';

export default defineConfig({

  plugins: [

    svgSpritemap({

      pattern: 'src/icons/*.svg',

    }),

  ],

});

```

**SVG element**

```html

  

```

**React component example**

```tsx

export const Icon: React.FC<{ name: string }> = ({ name }) => (

  

    

  

);

const App = () => {

  return ;

};

```

## Options

| Option         | Type                                 | Description                                                                                                 |

| -------------- | ------------------------------------ |-------------------------------------------------------------------------------------------------------------|

| `pattern`      | `string`                             | A glob pattern that specifies which SVG files to include in the sprite.                                     |

| `prefix`       | `string` (optional)                  | A string that is added to the beginning of each SVG icon's ID when it is added to the sprite.               |

| `filename`     | `string` (optional)                  | The name of the output file that contains the SVG sprite. Default is `spritemap.svg`.                       |

| `currentColor` | `boolean` (optional)                 | Replace colors in the SVGs with the `currentColor` value by SVGO. Default is `false`.                       |

| `svgo`         | `SVGOConfig` or `boolean` (optional) | Use SVGO for optimization. Default is `true`.                                                               |

| `emit`         | `boolean` (optional)                 | Additionally emit the file so that other vite plugins can process it (eg. compression). Default is `false`. |