@TechUI/Icons 简介

🔓已开源

TechUI Icons (图标库) 是 TechUI 生态系统的视觉词汇表，为整个 UI 框架提供统一、高清且极致优化的图标资源。

不同于市面上庞大的 SVG JS 方案，@techui/icons 回归了最经典的 WebFont (woff2 + css) 技术路线。这意味着它拥有目前所有图标解决方案中最小的文件体积和最快的加载速度，完美契合 TechUI 对性能的极致追求。

一句话总结：体积最小、加载最快，内置强大的本地预览工具。

双核图标体系

@techui/icons 并非单一的图标集，而是由两个经过深度清洗和优化的子库组成，分别应对不同的业务场景：

🛡️ TechUI Default (默认库)

这是 TechUI 的标准图标集，也是 Base、Admin 和 Prime 组件库的默认依赖。

来源：由 TechUI 设计团队原创，并精选整合了 HugeIcons、System UIcons、Iconoir 等多个优质开源库。
定位：覆盖通用的系统操作（如设置、用户、编辑、关闭），风格统一，线条精致。
特性：专为 TechUI 组件优化，确保在按钮、菜单和表单中的对齐与渲染完美无瑕。

🏭 Carbon Icons (企业库)

这是对 IBM 著名的 Carbon Design System 图标库的深度定制版。

来源：源自 IBM Carbon，TechUI 对其进行了筛选、重命名与分类，使其符合 TechUI 的命名规范。
定位：提供大量工业、数据、服务器和硬件相关的专业图标，适合构建复杂的 B 端企业级应用。
特性：作为可选扩展存在，您可以在需要时单独引入。

核心杀手锏交互式预览

在这个包中，我们不仅仅提供了字体文件，还内置了一个生产力神器——本地交互式预览文件 (preview.html)。

告别盲猜类名，告别查阅在线文档。安装依赖后，您可以在 node_modules 中直接打开它，或者将其部署在您的内网文档服务器上。

⚡️ 实时检索：支持按名称、标签关键词（如 "user", "edit", "server"）毫秒级筛选图标。
📋 一键复制：点击任意图标，即可自动将 <i class="tui-icon ti-xxx"></i> 代码复制到剪贴板。
🗂 分类浏览：清晰的类别划分，帮助您快速找到同一风格的图标组。

💡 为什么这很重要？ 开发过程中，寻找合适的图标往往消耗大量时间。内置的 preview.html 让图标查找变成了“打开 -> 搜索 -> 复制”的 3 秒钟动作，极大地提升了开发效率。

技术优势 Woff2

在 SVG Sprite 和 SVG-in-JS 大行其道的今天，TechUI 依然坚定地选择 WebFont 方案，理由只有一个：性能。

极致压缩：采用 Woff2 格式，文件体积比同等数量的 SVG 小 60% 以上。
浏览器原生渲染：无需 JS 解析，无 DOM 节点负担，由浏览器底层直接渲染字体，几乎零开销。
着色灵活：像文字一样，通过 color 属性即可随意改变图标颜色，支持渐变色文本效果。

安装与使用

安装

bash

npm install @techui/icons

引入 (按需加载)

您可以在 main.ts 或具体的组件中引入：

javascript

// 1. 引入 TechUI 默认核心库 (必须)
import "@techui/icons";

// 2. 引入 Carbon 扩展库 (可选，用于工业/企业级场景)
import "@techui/icons/carbon";

代码调用

只需使用简单的 <i> 标签与对应的类名：

html

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

<i class="cb-icon cb-data-blob"></i>
<i class="cb-icon cb-chip"></i>

权衡说明

为了获得极致的体积优势，我们采用了全量打包策略（WebFont 的特性决定了无法像 JS 那样 Tree-shaking）。

优势：对于使用了大量图标的中大型系统，一次 HTTP 请求即可缓存所有图标，后续页面切换无闪烁，总体积依然小于按需引入大量 SVG 代码。
劣势：如果您的项目极其简单，只需要 1-2 个图标，引入整个字体文件可能显得略重。

致谢

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

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

@TechUI/Icons 简介 ​

双核图标体系 ​

🛡️ TechUI Default (默认库) ​

🏭 Carbon Icons (企业库) ​

核心杀手锏 交互式预览 ​

技术优势 Woff2 ​

安装与使用 ​

安装 ​

引入 (按需加载) ​

代码调用 ​

权衡说明 ​

致谢 ​