@dtinsight/react-icons

dtstack_iconCollections

dtstack_iconCollections 是一个基于 React + TypeScript 的图标集合库，支持 tsup 构建，适用于前端项目的图标快速集成与管理。

项目简介

• 提供丰富的 SVG 图标组件，便于在 React 项目中直接引用。
• 支持自动化生成与持续集成，保证图标库的及时更新。
• 采用 pnpm 进行包管理，提升依赖安装效率。

目录结构

├── src/                # 主库源码
│   ├── icons/          # 图标组件（TSX 格式）
│   ├── svg/            # 原始 SVG 文件
│   ├── constant.ts     # 常量定义
│   └── index.ts        # 入口文件
├── website/            # 组件预览与文档站点
│   ├── public/
│   └── src/
├── scripts/            # 辅助脚本（如自动生成图标）
├── .gitlab-ci.yml      # GitLab CI/CD 配置
├── package.json        # 项目依赖与脚本
└── README.md           # 项目说明文档

安装

pnpm add @dtinsight/react-icons

使用方法

在 React 项目中引入图标组件：

import { AiAvatarColored } from '@dtinsight/react-icons';

function App() {
  return <AiAvatarColored />;
}

本地开发

• 安装依赖：

  pnpm install
  cd website
  pnpm install
  

• 启动文档站点（预览所有图标）：

  pnpm website:dev
  

• 自动生成图标组件：

  pnpm run generate
  

持续集成

本项目已配置 GitLab CI/CD，自动完成依赖安装、图标生成、构建与发布。详见 .gitlab-ci.yml。

本项目的所有 icon 通过 figma 插件 获取而来，从而完成 GitLab CI/CD

贡献指南

• Fork 本仓库并新建分支。
• 提交代码前请运行 pnpm run generate 保证图标组件最新。
• 提交合并请求（MR）。

License

MIT

如需更多帮助或有任何建议，欢迎提 Issue 或 PR！