业务图标

business-icons/ 用于存放不适合进入通用图标库的业务专有 SVG。

通用图标位于 icons/，要求保持 24x24、线性风格、currentColor、stroke-width="2" 和统一元数据。业务图标按颜色模式拆分为描边、填充和多色，使用独立清洗与校验规则，不需要进入通用分类和元数据体系。

适用场景

把 SVG 放到 business-icons/ 的常见情况：

图形包含产品、渠道、状态或业务对象的专有视觉信息
只作为业务源码资产维护，不需要进入通用图标包和分类页
需要保留业务资产自身的尺寸、描边、端点、拐角或几何细节

如果图标可以抽象成通用线性图标，应继续放到 icons/。

目录规则

text

business-icons/<color-mode>/<icon-name>.svg
business-icons/<color-mode>/<icon-name>.json
business-icons/<color-mode>/index.json
business-icons/index.json
business-icons/metadata/index.json
docs/public/metadata/business-icons.json

业务图标的一级目录是颜色模式，不再表达业务分类。目录的中文名、英文名维护在 business-icons/<color-mode>/index.json。每个 SVG 必须有同名 JSON metadata，用于搜索、AI 选图和文档展示。根 business-icons/index.json 是生成产物；business-icons/metadata/index.json 是仓库最新 metadata 快照，供 Figma 插件、GitHub 检测和 skills 查询优先读取。文档构建时会把这份仓库快照复制到 docs/public/metadata/business-icons.json，作为部署后的 URL 兜底。

当前允许目录：

text

outlined
filled
multicolor

业务图标需要每个 SVG 配一份同名 JSON 元数据，但不进入通用图标分类体系。business-icons/<color-mode>/index.json 只维护颜色模式显示配置；根 business-icons/index.json 由脚本生成颜色模式、多语言显示名和图标索引；business-icons/metadata/index.json 由脚本生成查询快照，用于 Figma、GitHub 检测和 skills 本地查询。docs public 下的同形态快照用于部署后的 URL 兜底查询。

它会生成到现有包的 business 子入口，不混入通用图标默认入口。组件导出名按完整文件名生成，例如 calling-outlined.svg 导出 CallingOutlined、calling-filled.svg 导出 CallingFilled；生成器不会再根据所在目录追加颜色模式。因此不同颜色模式目录下不能出现同名 SVG。

清洗和校验规则

业务图标会执行独立的业务 SVG 清洗。它不复用通用图标的 24x24 线性图标归一规则，也不会改写尺寸、描边细节或几何结构。

业务清洗会：

移除 <script>、<foreignObject>、事件属性和 javascript: URL
移除 style、class、未被引用的 id、data-* 这类设计工具噪声
outlined：将写死的 fill、stroke 转为 currentColor 或保留 none
filled：将白色填充/描边转为 var(--business-icon-secondary-color)，其他颜色转为 var(--business-icon-primary-color)，不按路径顺序判断
multicolor：不清洗固定颜色，保留源 SVG 的多色视觉
保留原始 width、height、viewBox、stroke-width、stroke-linecap、stroke-linejoin 和几何结构

提交时只做基础安全和结构校验：

文件路径必须是 business-icons/<color-mode>/<icon-name>.svg
同名 metadata 必须存在于 business-icons/<color-mode>/<icon-name>.json
颜色模式目录必须有 business-icons/<color-mode>/index.json
根 business-icons/index.json 必须由 node ./scripts/writeBusinessIconIndex.mts 生成并保持同步
business-icons/metadata/index.json 必须由 node ./scripts/writeAssetMetadata.mts 生成并保持同步；docs/public/metadata 由文档构建直接复制
文件名必须是小写 kebab-case，例如 whatsapp-outlined.svg
根节点必须是 <svg>
outlined 的 fill、stroke 只能是 currentColor 或 none
filled 的 fill、stroke 只能是 var(--business-icon-primary-color)、var(--business-icon-secondary-color) 或 none
multicolor 允许固定颜色，但仍执行安全检查
禁止 style、class、data-* 这类样式和设计工具属性
禁止 <script> 和 <foreignObject>
禁止 onclick 等事件属性
禁止 javascript: URL

本地可以运行：

node ./scripts/optimizeBusinessSvgs.mts
node ./scripts/writeBusinessIconIndex.mts
node ./scripts/writeAssetMetadata.mts
node ./scripts/checkBusinessSvgSource.mts

Figma 插件提交

在 Figma 插件中选择“业务图标”后，插件会：

通过单选控件选择描边、填充或多色
提交到 business-icons/<color-mode>/*.svg
同时提交 business-icons/<color-mode>/*.json
按业务 SVG 规则清洗后提交
不生成 icons/*.json
不要求通用图标的多选分类、标签或使用场景
只按业务 SVG 基础规则拦截明显不安全或不可缩放的 SVG

选择“通用图标”时，插件仍沿用 icons/*.svg + icons/*.json 的通用图标流程。

在项目中使用

多个项目共用业务图标时，继续安装现有包，通过 business 子入口引入。

Core 包

需要结构化 SVG 定义或统一图标索引时安装：

pnpm add @ycloud-web/icons

import { businessIcons, getBusinessIcon } from '@ycloud-web/icons/business';

const icon = getBusinessIcon('whatsapp-outlined');
const rootAttrs = icon.attrs;
const children = icon.node;
const sameIcon = businessIcons['whatsapp-outlined'];

React 包

React 项目可直接使用现有 React 包的业务入口：

pnpm add @ycloud-web/icons-react

tsx

import { WhatsappOutlined } from '@ycloud-web/icons-react/business';

export function ChannelIcon() {
  return (
    <WhatsappOutlined
      size={24}
      color="#111827"
      strokeWidth={1.5}
    />
  );
}

React 业务图标组件底层渲染为内联 <svg>。outlined 和 filled 支持 size、color、strokeWidth；strokeWidth 默认不设置，保留源 SVG 的原始描边宽度或无描边状态，仅在显式传入时覆盖。filled 额外支持 secondaryColor，默认值为 #fff。multicolor 保留固定色，不暴露 color 或 strokeWidth，仅支持调整尺寸。

tsx

import { ShopifyFilled } from '@ycloud-web/icons-react/business';

export function FilledIcon() {
  return (
    <ShopifyFilled
      size={24}
      color="#111827"
      secondaryColor="#fff"
      strokeWidth={1.5}
    />
  );
}

其他内联 SVG 组件包同样支持 size、color 和 strokeWidth 规则，并使用现有包的 business 子入口。React Native 业务图标基于图片资源渲染，不支持动态 strokeWidth：

import { WhatsappOutlined } from '@ycloud-web/icons-preact/business';
import { WhatsappOutlined } from '@ycloud-web/icons-vue/business';
import { WhatsappOutlined } from '@ycloud-web/icons-solid/business';
import { WhatsappOutlined } from '@ycloud-web/icons-svelte/business';
import { WhatsappOutlined } from '@ycloud-web/icons-astro/business';
import { WhatsappOutlined } from '@ycloud-web/icons-react-native/business';

Angular 包导出业务图标定义，可按 attrs + node 渲染为内联 SVG 或自行序列化：

import { getBusinessIcon } from '@ycloud-web/icons-angular/business';

const whatsapp = getBusinessIcon('whatsapp-outlined');

Static 包

需要原始 SVG 文件 URL 时安装：

pnpm add @ycloud-web/icons-static

import whatsappIconUrl from '@ycloud-web/icons-static/business-icons/outlined/whatsapp-outlined.svg';

业务图标也会生成独立 Icon Font，不和通用 font/ycloud.css 混在一起：

css

@import '@ycloud-web/icons-static/business-font/ycloud-business.css';

html

<span
  class="business-icon-whatsapp-outlined"
  aria-hidden="true"
></span>

静态 SVG 与数据包会保留清洗后的颜色 token。使用 filled 源时，打包到组件阶段会把 primary/secondary token 转为对应框架的可传入颜色参数；多色图标始终保留源 SVG 固定色。

业务图标 ​

适用场景 ​

目录规则 ​

清洗和校验规则 ​

Figma 插件提交 ​

在项目中使用 ​

Core 包 ​

React 包 ​

Static 包 ​