vite-plugin-svg-spriter/lib/createSVGSpritePlugin.js

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

import fs from 'fs';
import path from 'path';
import SVGSprite from 'svg-sprite';
const defaultSpriterConfig = {
    // @ts-expect-error types definition have an issue https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/65401
    mode: { symbol: { inline: true } },
    shape: { transform: [] }, // remove default svgo
};
const defaultTag = {
    tag: 'div',
    attrs: { 'aria-hidden': true },
    injectTo: 'body-prepend',
};
let symbolList = [];
function createSVGSpritePlugin({ svgFolder, svgSpriteConfig = {}, transformIndexHtmlTag = {}, }) {
    return {
        name: 'svg-sprite',
        async transformIndexHtml() {
            const files = fs.readdirSync(svgFolder);
            const spriter = new SVGSprite({ ...defaultSpriterConfig, ...svgSpriteConfig });
            symbolList = [];
            for (const file of files) {
                const filePath = path.resolve(svgFolder, file);
                const svg = fs.readFileSync(filePath, 'utf-8');
                spriter.add(filePath, null, svg);
                const symbolName = file.replace('.svg', '');
                symbolList.push(symbolName);
            }
            const { result } = await spriter.compileAsync();
            const sprite = result.symbol.sprite.contents.toString();
            const spriteTag = {
                ...defaultTag,
                ...transformIndexHtmlTag,
                children: sprite,
            };
            return [spriteTag];
        },
    };
}
export default createSVGSpritePlugin;