Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Applelo committed Aug 1, 2024
1 parent 2819355 commit e1bedfd
Showing 1 changed file with 22 additions and 2 deletions.
24 changes: 22 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,26 @@ To prevent [CORS issue with SVG](https://oreillymedia.github.io/Using_SVG/extras

You can see an example of integration in the [corresponding demo folder](/demo/server/routes/index.pug).

## Multiple Instance

If you want to have multiple SVG sprites files, you can configure multiple instances of the plugin. To do so, you will need the options `route`. Instead of the traditionnal `/__spritemap`, you can set for example `/__flags`.

```ts
// vite.config.js / vite.config.ts
import VitePluginSVGSpritemap from '@spiriit/vite-plugin-svg-spritemap'

export default {
plugins: [
VitePluginSVGSpritemap('./src/icons/*.svg'), // will be route: '__spritemap' by default
VitePluginSVGSpritemap('./src/flags/*.svg', {
route: '__flags'
})
]
}
```

If you are using Sass, Less or Stylus: you can optimize the export by only generate one mixin on one instance with `styles.includeMixin` set to `false`.

## 🛠 Options

The first argument is a glob path (using [fast-glob](https://github.com/mrmlnc/fast-glob)) and the second is an object with the following options :
Expand All @@ -220,6 +240,7 @@ The first argument is a glob path (using [fast-glob](https://github.com/mrmlnc/f
| svgo | `boolean` or `object` | `true` | Take an SVGO Options object.<br> If `true`, it will use the [default SVGO preset](https://github.com/svg/svgo#default-preset), if `false`, it will disable SVGO optimization |
| injectSVGOnDev | `boolean` | `false` | Inject the SVG Spritemap inside the body on dev |
| idify | `(name:string, svg:object) => string` | `name => options.prefix + name` | Function allowing to customize the id of each symbol of the spritemap svg. |
| route | `string` | `__spritemap` | Change the route name allowing you to have multiple instance of the plugin |

### output

Expand Down Expand Up @@ -249,6 +270,7 @@ export default {
plugins: [
VitePluginSVGSpritemap('./src/icons/*.svg', {
prefix: 'icon-',
route: '__spritemap',
output: {
filename: '[name].[hash][extname]',
name: 'spritemap.svg',
Expand Down Expand Up @@ -281,8 +303,6 @@ export default {

## 🏃 What's next

- [Support multiple instance of the plugin](https://github.com/SpiriitLabs/vite-plugin-svg-spritemap/issues/39)
- [CSS generation callback](https://github.com/SpiriitLabs/vite-plugin-svg-spritemap/issues/16)
- Add variable supports inspired by [svg-spritemap-webpack-plugin](https://github.com/cascornelissen/svg-spritemap-webpack-plugin/blob/master/docs/variables.md)

## 👨‍💼 Licence
Expand Down

0 comments on commit e1bedfd

Please sign in to comment.