新增图标资源

使用现有图标请参阅 Icon 图标。

确认存放位置

通过 CLI 安装 icon 后，业务项目中的图标目录通常为：

src/components/loongship/icon/svg/

维护 Loongship UI 内置图标时，对应的 Registry 源码目录为：

registry/ui/icon/svg/

将文件放入对应目录，无需注册为 Vue 组件。

添加并使用图标

1. 将 SVG 文件放入 svg/ 目录，例如 my-icon.svg。
2. 维护组件库内置图标时，将 my-icon 加入同目录 types.ts 的 _iconNames 清单。该清单生成严格的 IconName 类型，pnpm build 会检查它与 SVG 文件一一对应。
3. 使用不含扩展名的文件名作为 name：

<Icon name="my-icon" size="md" />

4. 启动页面并检查图标的尺寸、颜色继承和明暗主题表现。

SVG 文件规范

提交前应检查以下内容：

• 移除根元素中硬编码的 width 和 height，尺寸由 Icon 组件控制。
• 需要继承文本颜色的线条使用 stroke="currentColor"。
• 需要继承文本颜色的填充使用 fill="currentColor"。
• 保留正确的 viewBox，避免缩放后裁切或留白异常。
• 删除编辑器生成且不影响渲染的元数据、注释和空分组。
• 不在 SVG 中嵌入脚本、外部资源或内联事件。

固定颜色需要检查双主题

双色或具有固定语义色的图标可以保留必要颜色，但应确认它在 Light 与 Dark 主题下均清晰可辨。

命名规范

文件名使用小写 kebab-case，并优先按以下顺序表达差异。

业务主词与操作动作

• user：默认用户或个人中心
• user-add：添加用户
• user-remove：删除用户
• user-setting：用户设置
• user-group：用户组或团队

样式形态后缀

• -line 或 -outline：线框风格，例如 user-line
• -fill 或 -solid：实心风格，例如 user-fill
• -two-tone：双色风格，例如 user-two-tone

同组图标保持命名一致

同一组图标应统一使用一种后缀，不要混用语义相同的 line 与 outline。

来源前缀

来源前缀仅用于消除冲突

只有同时维护多个第三方图标来源且名称可能冲突时，才添加来源前缀，例如 lucide-user 或 solar-user。自有图标不需要来源前缀。