diff --git a/README.md b/README.md index 484942d..1d47f48 100644 --- a/README.md +++ b/README.md @@ -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 : @@ -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.
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 @@ -249,6 +270,7 @@ export default { plugins: [ VitePluginSVGSpritemap('./src/icons/*.svg', { prefix: 'icon-', + route: '__spritemap', output: { filename: '[name].[hash][extname]', name: 'spritemap.svg', @@ -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