Multiple sprites

[mikestreety]

We need to remove the hardcoded site_package in the sprite config and work out how to do multitple sprites.

Maybe we don't have the sprite config coded already but exportable with a function?

Something like the following. The sprite function then generates all the default, shared config

import { defineConfig, configuration, sprite } from '@liquidlight/vite-framework';

export default defineConfig(
	configuration(
		plugins: [
			sprite('site_package'),
		]
	)
);

https://spiriitlabs.github.io/vite-plugin-svg-spritemap/guide/multiple-instance.html

[mikestreety]

Note: You can currently specify multiple sources by specifying the plugin twice. You can also combine from multiple places (e.g. a parent folder) but if there is 2 icons with the same name it errors (rather than overwriting).

Have made an issue in the hope it gets addressed

(0, vite_plugin_svg_spritemap_1.default)('./app/sites/site_package/Resources/Private/Sprite/*.svg', {
            injectSvgOnDev: true,
			route: '__site_package',
			output: {
				name: 'site_package'
			},
            styles: {
                lang: 'scss',
                filename: './app/sites/site_package/Resources/Private/Css/src/_sprite.scss',
                include: ['mixin', 'variables'],
                names: {
                    mixin: 'viteSprite',
                },
                callback: ({ content }) => {
                    const BODY_SIZE = 16;
                    content = content.replace(/(?:width|height):\s*(\d+)px/g, (match, p1) => {
                        // Divide the captured number by 16 and format to 2 decimal places
                        const valueInEm = (p1 / BODY_SIZE).toFixed(2);
                        // Return the new string with 'em'
                        return `${match.split(':')[0]}: ${valueInEm}em`;
                    });
                    return content;
                }
            },
        }),
		(0, vite_plugin_svg_spritemap_1.default)(['./app/sites/site_package/Resources/Private/Sprite/*.svg', './app/sites/pow/Resources/Private/Sprite/*.svg'], {
			injectSvgOnDev: true,
			route: '__pow',
			output: {
				name: 'pow'
			},
			styles: {
				lang: 'scss',
				filename: './app/sites/pow/Resources/Private/Css/src/_sprite.scss',
				include: ['mixin', 'variables'],
				names: {
					mixin: 'viteSprite',
				},
				callback: ({ content }) => {
					const BODY_SIZE = 16;
					content = content.replace(/(?:width|height):\s*(\d+)px/g, (match, p1) => {
						// Divide the captured number by 16 and format to 2 decimal places
						const valueInEm = (p1 / BODY_SIZE).toFixed(2);
						// Return the new string with 'em'
						return `${match.split(':')[0]}: ${valueInEm}em`;
					});
					return content;
				}
			},
		}),