https://github.com/meowtec/vite-plugin-svg-sprite

SVG sprite plugin for [vite](https://github.com/vitejs/vite)
https://github.com/meowtec/vite-plugin-svg-sprite

vite

Last synced: 5 days ago
JSON representation

SVG sprite plugin for [vite](https://github.com/vitejs/vite)

• Host: GitHub
• URL: https://github.com/meowtec/vite-plugin-svg-sprite
• Owner: meowtec
• License: mit
• Created: 2020-11-30T12:00:31.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-11-17T16:54:40.000Z (about 1 month ago)
• Last Synced: 2024-12-15T16:56:21.147Z (10 days ago)
• Topics: vite
• Language: TypeScript
• Homepage:
• Size: 207 KB
• Stars: 52
• Watchers: 3
• Forks: 11
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-svg-sprite

SVG sprite plugin for [Vite](https://github.com/vitejs/vite)

## install

```

npm i vite-plugin-svg-sprite -D

```

## Usage

Add the plugin to your `vite.config.js`:

```javascript

import createSvgSpritePlugin from 'vite-plugin-svg-sprite';

const config = {

  plugins: [

    createSvgSpritePlugin({

      symbolId: 'icon-[name]-[hash]',

    }),

  ],

}

```

Then use it like that in your app code:

```jsx

import appIconId from './path/to/icons/app.svg';

// react or vue component, as you want

export default function App() {

  return (

    

      

    

  );

}

```

You can also access the `width`/`height` attributes of the SVG with the `size` export:

```jsx 

import appIconId, { size } from './path/to/icons/app.svg';

// react or vue component, as you want

export default function App() {

  return (

    

      

    

  );

}

```

If you're using TypeScript, add the following line to your `vite-env.d.ts`:

```diff

/// 

+ /// 

```

## options

```javascript

const plugin = createSvgSpritePlugin(options);

```

### `options.symbolId: string`

For generating the `id` attribute of `` element. Defaults to `[name]`

### `options.include: string | string[]`

Match files that will be transformed. Defaults to `'**.svg'`. See [micromatch](https://github.com/micromatch/micromatch) for the syntax document.

### `options.svgo: boolean | SvgoOptions`

Enable [SVGO](https://github.com/svg/svgo) for optimizing SVG. Defaults to `true`.