@claralight-design/symbol-kit-unplugin

Symbol Kit 的构建工具适配包。插件使用已发布的 Compiler 和 Core npm 包编译 SVG，并在开发环境中监听图标的新增、修改与删除。所有输入、配置和产物都集中在一个工作目录中：

.symbol-kit/
├── input/
├── dist/
└── symbol-kit.config.json

安装

pnpm add -D @claralight-design/symbol-kit-unplugin
pnpm add @claralight-design/symbol-kit-core @claralight-design/symbol-kit-compiler

React、Astro 或 Vue 项目还需要安装对应的框架适配包。

Vite

import SymbolKit from "@claralight-design/symbol-kit-unplugin/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    SymbolKit({
      include: "**/*.svg",
      sourceWeight: "regular",
      config: {
        colors: { foreground: ["#000000"] },
        weights: { regular: { strokeWidth: 2 } },
        modes: ["outline"]
      }
    })
  ]
});

默认读取 .symbol-kit/symbol-kit.config.json，config 中的配置拥有更高优先级。设置 configFile: false 可以关闭配置文件读取。

图标导入

React：

import { CreditCard } from "@claralight-design/symbol-kit-react/icons/CreditCard";

Astro：

---
import CreditCard from "@claralight-design/symbol-kit-astro/icons/CreditCard";
---

<CreditCard />

Vue 适配包提供 createSymbolIcon 后使用相同的图标子路径。

也可以直接导入框架无关的 Core 数据：

import CreditCardSymbol from "virtual:claralight-symbol-kit/icons/CreditCard";
import { symbols, symbolNames } from "virtual:claralight-symbol-kit";

开发服务器运行期间新增、修改或删除 SVG 时，插件会增量更新对应虚拟模块并刷新页面。

配置

interface SymbolKitOptions {
  root?: string;
  directory?: string;
  include?: string | readonly string[];
  exclude?: string | readonly string[];
  config?: CompilerConfigInput;
  configFile?: string | false;
  sourceWeight?: SymbolWeightName;
}

默认 directory 为 .symbol-kit，include 为 **/*.svg。include、exclude 和 configFile 都只能指向工作目录内部，插件不会向其他目录写入文件。图标文件名必须是有效的 JavaScript 标识符，并且在所有输入目录中保持唯一。

建议提交 .symbol-kit/input 和 .symbol-kit/symbol-kit.config.json，并在项目的 .gitignore 中加入：

.symbol-kit/dist/