vite-plugin-svg-spriter
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

vite-plugin-svg-spriter

Build a svg sprite from individual svgs and inject it in your root html with vite.

Uses svg-sprite under the hood.

Install

npm install vite-plugin-svg-spriter -DE

Careful, it's "spriter", with an 'r'.

Plugin usage

The plugin only requires the path to your svgs. Check the configuration section for options.

// vite.config.ts

import {defineConfig} from 'vite'
import createSvgSpritePlugin from 'vite-plugin-svg-spriter'
import path from 'path'

const SRC_PATH = path.resolve(__dirname, 'src')
const SVG_FOLDER_PATH = path.resolve(SRC_PATH, 'assets', 'svg-sprite')

export default defineConfig({
  plugins: [createSvgSpritePlugin({svgFolder: SVG_FOLDER_PATH})],
})

By default, the sprite is prepended to your root html body element and no transformation is applied to the svgs.

Display svg

You can display a particular svg symbol with svg use xlinkHref where name is the svg filename without extension.

thumbs-up.svg

<svg>
  <use xlinkHref="#thumbs-up" />
</svg>

Configuration (optional)

defineConfig({
  plugins: [
    createSvgSpritePlugin({
      svgFolder: SVG_FOLDER_PATH,
      svgSpriteConfig: {
        shape: {
          transform: ['svgo'],
        },
      },
      transformIndexHtmlTag: {
        injectTo: 'body',
      },
    }),
  ],
})

Readme

Keywords

Package Sidebar

Install

npm i vite-plugin-svg-spriter

Weekly Downloads

62

Version

1.0.0

License

ISC

Unpacked Size

7.99 kB

Total Files

10

Last publish

Collaborators

  • aodev