@techui/icons

English | 中文

English

Introduction

@techui/icons is a comprehensive icon library package for TechUI. It provides a curated collection of free icon libraries, organized and optimized for web development. All icons are delivered using the woff2+css approach, offering the smallest file size among all icon solutions.

Key Features

• 🎨 Multiple Icon Sets: Includes custom-designed icons and popular free icon libraries
• 📦 Optimized Delivery: Uses woff2+css for minimal file size
• 🔍 Interactive Preview: Built-in preview.html for browsing, filtering, and copying icons
• 🚀 Easy Integration: Simple import and usage syntax

Icon Libraries

This package includes:

TechUI Default Icon Library

The default icon library contains custom-designed icons and icons carefully selected, integrated, and modified from the following free icon libraries:

• HugeIcons
• System UIcons
• Iconoir
• Myna UI Icons
• Pro Icons
• Other free icon libraries...

Third-party Icon Libraries

• Carbon Icons: IBM's comprehensive design system icons

All free icon libraries are sourced from icones.js.org

Installation

npm install @techui/icons

Usage

Import

// Default TechUI icon library
import "@techui/icons"

// Third-party icon library (e.g., Carbon)
import "@techui/icons/carbon"

Examples

TechUI Default Icons:

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

Carbon Icons:

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

Preview & Exploration

Each icon library includes a preview.html file that allows you to:

• Browse all available icons by category
• Filter icons by name or tag
• Copy icon code with one click
• Navigate to source documentation

Simply open the preview.html file in your browser to explore the icon collections.

Technical Details

• Format: woff2 + CSS
• Advantages: Smallest file size, fastest loading
• Trade-off: Full library import (no tree-shaking)

This approach prioritizes optimal performance for projects that use multiple icons from the same library.

Package Information

• Author: aYin [email protected] (WeChat: jay1986cn)
• Homepage: https://techui.net
• License: None
• Keywords: @techui, ayin, icon, icons, webfont, woff, woff2, iconfont

Contact

If you have any questions or suggestions, please contact:

• Email: [email protected]
• WeChat: jay1986cn
• Website: https://techui.net

中文

简介

@techui/icons 是 TechUI 的综合图标库包。它提供了精心整理的免费图标库集合，经过优化以适配 Web 开发。所有图标均采用 woff2+css 方式提供，在所有图标解决方案中体积最小。

核心特性

• 🎨 多图标集: 包含自主设计图标和热门免费图标库
• 📦 优化交付: 使用 woff2+css 实现最小文件体积
• 🔍 交互预览: 内置 preview.html 用于浏览、筛选和复制图标
• 🚀 轻松集成: 简单的导入和使用语法

图标库说明

本包包含：

TechUI 默认图标库

默认图标库包含自主设计的图标，以及从以下免费图标库中精心提取、整合和修改的图标：

• HugeIcons
• System UIcons
• Iconoir
• Myna UI Icons
• Pro Icons
• 其他免费图标库...

第三方图标库

• Carbon Icons: IBM 的综合设计系统图标

所有免费图标库均来源于 icones.js.org

安装

npm install @techui/icons

使用方法

导入

// TechUI 默认图标库
import "@techui/icons"

// 第三方图标库（如 Carbon）
import "@techui/icons/carbon"

使用示例

TechUI 默认图标：

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

Carbon 图标：

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

预览与探索

每个图标库都包含一个 preview.html 文件，您可以：

• 按类别浏览所有可用图标
• 按名称或标签筛选图标
• 一键复制图标代码
• 跳转到源文档

只需在浏览器中打开 preview.html 文件即可探索图标集合。

技术细节

• 格式: woff2 + CSS
• 优势: 最小文件体积，最快加载速度
• 权衡: 需整体导入（无法按需引入）

此方案优先考虑为使用同一图标库中多个图标的项目提供最佳性能。

包信息

• 作者: aYin [email protected]（微信：jay1986cn）
• 主页: https://techui.net
• 许可证: None
• 关键词: @techui, ayin, icon, icons, webfont, woff, woff2, iconfont

联系方式

如有任何问题或建议，请联系：

• 邮箱: [email protected]
• 微信: jay1986cn
• 网站: https://techui.net