vite-svg-sprite-wrapper

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
      /**
       * Defines if a type should be generated
       * @default false
       */
      generateType?: boolean
      /**
       * Name of the type to be used when generateType is set to true
       * @default 'SvgIcons'
       */
      typeName?: string
      /**
       * File name of the generated type file
       * @default 'svg-icons'
       */
      typeFileName?: string
      /**
       * Name of the output directory for generated type file
       * @default '{@link icons} directory'
       */
      typeOutputDir?: string
    }),
  ],
})

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