vite-svg-spritemap

Generate Vite spritemap plugin

This plugin is written based on the plugin svg-sprite (https://github.com/svg-sprite/svg-sprite).

Features

• Quick sprite assembly.
• A large number of settings from the svg-sprite plugin
• Caching to speed up sprite assembly

Installation

# with npm
npm install --save-dev vite-svg-spritemap

# with yarn
yarn add --dev vite-svg-spritemap

# with pnpm
pnpm add -D vite-svg-spritemap

vite.config.ts (minimal options)

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteSvgSpritePlugin from 'vite-svg-spritemap'

export default defineConfig({
    plugins: [vue(), ViteSvgSpritePlugin({
        svgPath: 'src/svg/'
    })]
})

main.ts (minimal)

add import 'virtual:svg-icons-sprite-register' into your main.ts file

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'

import 'virtual:svg-icons-sprite-register';

createApp(App).mount('#app')

All plugin settings are suitable from the webpack version, follow the link https://github.com/svg-sprite/svg-sprite ( shape, svg, variables)

interface SvgSpriteOptions {
    svgPath: string;
    shape?: sprite.Shape;
    svg?: sprite.Svg;
    variables?: any;
}

Playground:

Examples of using the plugin are located in the "example" folder.

Vite vue example

cd example
yarn install
yarn dev | yarn build

Icons Directory Structure

# src/svg
- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg

Way to use

<svg class="svg-1">
    <use :href="`spritemap.svg#stats-svgrepo-com`"></use>
</svg>

<svg class="svg-1">
    <use v-bind="{'xlink:href': `spritemap.svg#stats-svgrepo-com`}"></use>
</svg>

<svg class="svg-1">
    <use :href="symbolId"></use>
</svg>

<script>
    const symbolId = computed(() => `#${prefix}-${name}`)
</script>

- As a result, we will get:

<svg class="svg-1" data-v-fb1907ff="">
    <use href="spritemap.dee3b8.svg#stats-svgrepo-com"></use>
</svg>

- !!! If you include file direct like:

<svg class="svg-1">
    <use href="spritemap.svg#stats-svgrepo-com"></use>
</svg>

- you get error when build your app.
- as if vite can't find the created asset...

Credits

I express my great gratitude to the author of the plugin svg-sprite (https://github.com/svg-sprite/svg-sprite).

My other plugins

• vite-esbuild-typescript-checker - Type checker ( TypeScript, Vue SFC, etc.) based on the webpack plugin.

License

MIT License