vite-svg-sprite-compose
v1.2.0
Published
Vite SVG Sprite Merge Plugin is a Vite plugin that simplifies and automates the merging of multiple SVG icons into a single sprite. It allows you to combine SVG icons from various directories, apply optional SVGO optimization, and generate a unified SVG s
Downloads
76
Maintainers
Readme
Vite-svg-sprite-compose
ViteSvgSpriteCompose is a Vite plugin that enables you to easily generate SVG sprite sheets using svg-sprite and optionally optimize the SVG files with svgo.
Base on svg-sprite-compose-cli
Installation
You can install ViteSvgSpritePlugin via npm or yarn:
npm install vite-svg-sprite-compose --save-dev
# or
yarn add vite-svg-sprite-compose --dev
Usage
To use ViteSvgSpritePlugin, add it to your Vite config file (vite.config.js). Here's an example of how to set up the plugin:
import { defineConfig } from "vite";
import ViteSvgSpriteCompose from "vite-svg-sprite-compose";
export default defineConfig({
plugins: [
ViteSvgSpriteCompose({
input: [
{
dir: "src/assets/svg",
svgoConfig: {
// Add your svgo configuration here (optional).
},
enableSvgo: true, // Set to `false` to disable svgo optimization (optional).
},
// Add more input directories if needed.
],
output: {
dir: "public/",
spriteName: "sprite.svg", // Set the output sprite file name (optional).
makeIdsArray: true,
},
disabled: false, // Set to `true` to disable the plugin (optional).
defaultSvgoConfig: {
// Add your default svgo configuration here (optional).
},
idPrefix: "", // Add an optional prefix to the SVG IDs (optional).
}),
],
});
The above configuration will process your SVG files, optimize them using svgo if enabled, and create an SVG sprite in the specified output directory.
Configuration Options
import { Config } from "svgo";
type InputConfig = {
/* Path to directory with svg files */
dir: string;
/* SVGO configuration for optimization */
svgoConfig?: Config;
/* Skip optimization step */
enableSvgo?: boolean;
};
type OutputConfig = {
/* The directory where the SVG sprite will be generated */
dir: string;
/* The name of the generated SVG sprite (optional, default is 'sprite.svg'). */
spriteName?: `${string}.svg`;
/* Creating json file with svg IDs (optional, default is false). */
makeIdsArray?: boolean;
/* File name for json of svg IDs (optional, default is 'sprite-ids.json') */
idsArrayName?: `${string}.json`;
};
interface PluginConfig {
/* An array of input directories and their configurations. */
input: InputConfig[];
/* The directory where the SVG sprite will be generated */
output: OutputConfig;
/* Set to true to disable the plugin (optional, default is false). */
disabled?: boolean;
/* Default SVGO configuration for optimization (optional). */
defaultSvgoConfig?: Config;
/* An optional prefix to add to SVG IDs. */
idPrefix?: string;
}
More details svg-sprite-compose-cli
License
This project is licensed under the MIT License.