Vite-svg-sprite-compose NPM

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;
}