/vite-svg-sprite-wrapper

Creating one sprite file on the fly

Primary LanguageTypeScript

vite-svg-sprite-wrapper

npm package

svg-sprite wrapper for Vite

Install

npm i vite-svg-sprite-wrapper -D

Usage

Add it to your plugins in vite.config.ts

import { defineConfig } from 'vite'
import ViteSvgSpriteWrapper from 'vite-svg-sprite-wrapper';

export default defineConfig({
  plugins: [
    ViteSvgSpriteWrapper({
      /**
       * Input directory
       *
       * @default 'src/assets/images/svg/*.svg'
       */
      icons?: string
      /**
       * Output directory
       *
       * @default 'src/public/images'
       */
      outputDir?: string

      /**
       * sprite-svg {@link https://github.com/svg-sprite/svg-sprite/blob/main/docs/configuration.md#sprite-svg-options|options}
       */
      sprite?: SVGSpriter.Config
    }),
  ],
})

Now, any changes to the .svg files in the icons folder will generate a sprite.svg in the outputDir folder.

So you can use the icons somehow (Example):

<svg class="icon" aria-hidden="true">
  <use xlink:href="/images/sprite.svg#star"></use>
</svg>

MIT License © 2023 Volodymyr Shepel