vite-plugin-svg-color-replace

English

A Vite plugin for replacing colors in SVG files.

Installation

npm install vite-plugin-svg-color-replace

Usage

import { defineConfig } from "vite";
import svgColorReplace from "vite-plugin-svg-color-replace";

export default defineConfig({
  plugins: [
    svgColorReplace({
      colors: [
        {
          currentColor: "#30C37D", // color to replace
          targetColor: "#3A72C7", // new color
        },
      ],
    }),
  ],
});

Options

• colors: Array of color replacement objects
  • currentColor: Original color in SVG (hex format)
  • targetColor: New color to replace with (hex format)

Features

• Supports standalone SVG files
• Supports SVG embedded in CSS/LESS/SCSS via background-image: url()
• Multiple color replacements in one pass

中文

一个用于替换 SVG 文件中颜色的 Vite 插件。

安装

npm install vite-plugin-svg-color-replace

使用

import { defineConfig } from "vite";
import svgColorReplace from "vite-plugin-svg-color-replace";

export default defineConfig({
  plugins: [
    svgColorReplace({
      colors: [
        {
          currentColor: "#30C37D", // 要替换的颜色
          targetColor: "#3A72C7", // 新颜色
        },
      ],
    }),
  ],
});

特性

• 支持单独的 SVG 文件
• 支持通过background-image: url()嵌入在 CSS/LESS/SCSS 中的 SVG
• 一次性替换多个颜色