图标库

⭐明星组件

🔓已开源

🏅原创图标 10% + 开源图标

@techui/icons 是 TechUI 的官方综合图标解决方案。它提供了一套精心整理的图标集合，专为 Web 开发优化。

所有图标资源均采用 WOFF2 字体 + CSS 的方式进行交付。相比于 SVG Sprite 或 JS 引入方式，这种方案在保证图标清晰度的同时，拥有最小的文件体积和最高的渲染性能。

图标库构成

本包包含两个主要部分：核心图标集和扩展图标集。

TechUI 核心图标集 (默认)

这是 TechUI 组件库默认使用的图标集，包含 TechUI 团队自主设计的图标，以及从以下高质量开源图标库中精心提取、整合和修改的图标：

HugeIcons
System UIcons
Iconoir
Myna UI Icons
Pro Icons

这些图标经过统一的视觉调整，确保在 TechUI 系统中风格一致。

扩展图标集

为了满足更复杂的业务需求，我们还集成了优秀的第三方图标库：

Carbon Icons: IBM 设计系统的官方图标库，适用于严肃、专业的企业级应用场景。

注：所有引用的开源图标资源均源自 icones.js.org

安装与使用

安装依赖

通常，无需在TechUI中手动安装TechUI-Icons图标库，因为它是TechUI组件库生态中的一个会在安装核心组件库的时候自动安装。

如需在非TechUI项目中使用，在项目根目录下执行以下命令进行安装：

bash

npm install @techui/icons

引入样式

您可以在项目的入口文件 main.js 中按需引入图标样式。

引入核心图标库（推荐）：

javascript

import "@techui/icons"

引入 Carbon 扩展库：

javascript

import "@techui/icons/carbon"

在组件中使用

TechUI 的图标使用标准的 <i> 标签配合 CSS 类名进行调用。

使用核心图标

核心图标使用 .tui-icon 作为基础类，.ti-{图标名} 作为具体图标类。

html

<i class="tui-icon ti-star"></i>

<i class="tui-icon ti-settings"></i>

使用 Carbon 图标

Carbon 图标使用 .cb-icon 作为基础类，.cb-{图标名} 作为具体图标类。

html

<i class="cb-icon cb-star"></i>

图标检索与预览

为了方便开发者查找所需图标，@techui/icons 包内内置了一个交互式的预览工具 preview.html。

该工具提供以下功能：

分类浏览：按类别查看所有可用图标。
实时筛选：支持通过图标名称或标签关键词进行快速检索。
一键复制：点击任意图标即可复制对应的 HTML 代码。
文档跳转：提供跳转至源图标库文档的链接。

使用方式：在 node_modules/@techui/icons/ 目录下找到 preview.html 文件，直接使用浏览器打开即可开始探索图标集合。

致谢

特别感谢以上优秀的开源图标库作者。它们均采用 MIT 协议，以精湛的像素级工艺，为开发者提供了丰富、统一且免费的设计资产。

同时，诚挚感谢 Icônes 图标集成平台，它极大地降低了开源图标资源的检索与集成门槛，是前端开发者的效率利器。

图标库 ​

图标库构成 ​

TechUI 核心图标集 (默认) ​

扩展图标集 ​

安装与使用 ​

安装依赖 ​

引入样式 ​

在组件中使用 ​

使用核心图标 ​

使用 Carbon 图标 ​

图标检索与预览 ​

致谢 ​

图标库