Vite SVG Spritesheet Plugin

vitePluginSvgSpritesheet.ts

const vitePluginSvgSpritesheet = ({
    path,
    output,
}: {
    path: string | string[];
    output: string;
}): Plugin => {
    let spritesheet: string;

    return {
        name: 'vite-plugin-svg-spritesheet',
        async configResolved(config) {
            const files = await glob(path);
            const icons: string[] = [];

            const xmlOptions = {
                preserveOrder: false,
                alwaysCreateTextNode: false,
                trimValues: true,
                ignoreAttributes: false,
                allowBooleanAttributes: true,
                parseAttributeValue: false,
                parseTagValue: false,
                removeNSPrefix: true,
                ignoreDeclaration: true,
            };
            const parser = new XMLParser(xmlOptions);
            const builder = new XMLBuilder({
                ...xmlOptions,
                format: false,
            });

            for (const file of files) {
                const fileName = basename(file);
                const svgString = await readFile(file, 'utf-8');
                const icon = parser.parse(svgString);

                icon.symbol = icon.svg;
                icon.symbol['@_id'] = fileName.replace(extname(fileName), '');
                icon.symbol['@_width'] = '100%';
                icon.symbol['@_height'] = '100%';
                delete icon.svg;

                icons.push(builder.build(icon));
            }

            spritesheet = `<svg xmlns="http://www.w3.org/2000/svg"><defs>${icons.join('')}</defs></svg>`;
        },
        generateBundle() {
            this.emitFile({
                type: 'asset',
                source: spritesheet,
                fileName: output,
            });
        },
    };
};