@particle-network/icons

✨ 特性

- 🎨 统一设计 - 一套图标，多端使用
- 📦 按需加载 - 支持 Tree Shaking，优化体积
- 🔧 自动生成 - 从 SVG 源文件自动生成组件
- 🛡 TypeScript - 完整的类型定义
- 🎯 多平台支持 - 同时支持 Web 和 Native
- ⚡ 高性能 - 优化的 SVG 渲染

📦 安装

``bash


npm

将 SVG 文件放置在 packages/icons/svg 目录中，使用 kebab-case 命名, 彩色 icon 命名为 color-xxx：

`
packages/icons/svg/
├── user-icon.svg
├── settings-icon.svg
├── color-new-icon.svg <-- 新添加的彩色图标
└── new-icon.svg <-- 新添加的图标
`

2. 生成图标组件

在 packages/icons 目录下运行：

`bash
pnpm generate-icons
pnpm build
`

$3

为确保图标质量和一致性，请遵循以下规范：

- 尺寸: 24x24px 视窗
- 路径: 优化路径，移除不必要的属性
- 命名: 使用 kebab-case 命名

$3

`bash


仅生成图标组件

`
packages/icons/
├── svg/ # SVG 源文件
│ ├── user.svg
│ ├── settings.svg
│ └── ...
├── src/
│ ├── core/ # 核心图标数据
│ ├── web/ # React Web 组件
│ └── native/ # React Native 组件
├── scripts/
│ ├── generate-icons.ts # 图标生成脚本
│ └── templates.ts # 组件模板
└── dist/ # 构建输出
`

🎯 最佳实践

$3

`tsx
// ✅ 推荐：按需导入
import { UserIcon } from '@particle-network/icons/web/UserIcon';

// ❌ 避免：导入整个库
import * as Icons from '@particle-network/icons/web';
``

- 图标预览
- Gitlab 仓库
- NPM 包
- 更新日志

---