nue-ui-iconfont
v0.2.6
Published
Iconfonts for NueUI
Readme
NueUI Iconfont
NueUI Iconfont 是 NueUI 组件库的图标字体包，提供了一套精美的图标集合，用于在组件中使用。
包信息
- 名称:
nue-ui-iconfont - 版本:
0.2.5 - 描述: Iconfonts for NueUI
- 作者: Nathan Lee
- 许可证: MIT
- 类型: Module
- 仓库: GitHub
功能特性
- 🎨 精美图标 - 提供了一套设计精美的图标集合
- 📦 字体格式 - 支持 WOFF2、WOFF、TTF 三种字体格式
- 🚀 性能优化 - 使用 WOFF2 格式，体积小，加载快
- 🎯 易于使用 - 通过 CSS 类名即可使用图标
- 📱 跨平台 - 支持所有现代浏览器
图标列表
导航图标
| 图标类名 | 说明 |
| ------------------------- | -------------- |
| icon-arrow-left | 左箭头 |
| icon-arrow-right | 右箭头 |
| icon-arrow-up | 上箭头 |
| icon-arrow-down | 下箭头 |
| icon-arrow-left-more | 左箭头（更多） |
| icon-arrow-right-more | 右箭头（更多） |
| icon-arrow-left-circle | 左箭头圆圈 |
| icon-arrow-right-circle | 右箭头圆圈 |
| icon-arrow-up-circle | 上箭头圆圈 |
| icon-arrow-down-circle | 下箭头圆圈 |
操作图标
| 图标类名 | 说明 |
| ------------------------ | ------------ |
| icon-plus | 加号 |
| icon-plus-circle | 加号圆圈 |
| icon-plus-circle-fill | 加号圆圈填充 |
| icon-minus | 减号 |
| icon-close | 关闭 |
| icon-clear | 清除 |
| icon-clear-circle | 清除圆圈 |
| icon-clear-circle-fill | 清除圆圈填充 |
| icon-check | 勾选 |
| icon-square | 方框 |
| icon-square-check | 方框勾选 |
| icon-square-check-fill | 方框勾选填充 |
| icon-edit | 编辑 |
| icon-delete | 删除 |
| icon-search | 搜索 |
| icon-search2 | 搜索（备选） |
| icon-filter | 过滤 |
| icon-refresh | 刷新 |
| icon-sync-filled | 同步填充 |
| icon-update | 更新 |
| icon-restore | 恢复 |
| icon-download | 下载 |
| icon-upload | 上传 |
状态图标
| 图标类名 | 说明 |
| ------------------- | -------- |
| icon-success | 成功 |
| icon-success-fill | 成功填充 |
| icon-error-fill | 错误填充 |
| icon-warning | 警告 |
| icon-fail | 失败 |
| icon-loading | 加载中 |
| icon-in-progress | 进行中 |
| icon-completed | 已完成 |
| icon-overdue | 已过期 |
功能图标
| 图标类名 | 说明 |
| -------------------- | ------------ |
| icon-setting | 设置 |
| icon-settings-fill | 设置填充 |
| icon-help | 帮助 |
| icon-theme | 主题 |
| icon-menu | 菜单 |
| icon-menu-open | 菜单打开 |
| icon-menu-close | 菜单关闭 |
| icon-more | 更多 |
| icon-more2 | 更多（备选） |
| icon-more-vertical | 更多垂直 |
用户相关
| 图标类名 | 说明 |
| ---------------- | -------- |
| icon-user | 用户 |
| icon-account | 账户 |
| icon-lock | 锁 |
| icon-eye | 眼睛 |
| icon-eye-close | 眼睛关闭 |
文件相关
| 图标类名 | 说明 |
| ------------------ | ------------------ |
| icon-files | 文件 |
| icon-inbox | 收件箱 |
| icon-inbox-fill | 收件箱填充 |
| icon-inbox2-fill | 收件箱填充（备选） |
| icon-inbox-empty | 收件箱空 |
| icon-archive | 归档 |
| icon-archive2 | 归档（备选） |
| icon-unarchive | 取消归档 |
| icon-recycle-bin | 回收站 |
| icon-restore-bin | 恢复回收站 |
| icon-drive | 驱动器 |
时间相关
| 图标类名 | 说明 |
| -------------------- | ------------- |
| icon-calendar | 日历 |
| icon-calendar-wrap | 日历包装 |
| icon-calendar2 | 日历（备选） |
| icon-calendar3 | 日历（备选2） |
| icon-time | 时间 |
| icon-tomorrow | 明天 |
| icon-week | 周 |
| icon-history | 历史 |
项目相关
| 图标类名 | 说明 |
| ----------------- | ------------ |
| icon-projects | 项目 |
| icon-board | 看板 |
| icon-kanban | 看板（备选） |
| icon-todo | 待办 |
| icon-invoices | 发票 |
| icon-connection | 连接 |
优先级
| 图标类名 | 说明 |
| ----------------- | -------- |
| icon-priority-1 | 优先级 1 |
| icon-priority-2 | 优先级 2 |
| icon-priority-3 | 优先级 3 |
其他图标
| 图标类名 | 说明 |
| ------------------- | ------------ |
| icon-logo | Logo |
| icon-naotodo-logo | Naotodo Logo |
| icon-todo-logo-3 | Todo Logo 3 |
| icon-focus2 | 聚焦 2 |
| icon-focus3 | 聚焦 3 |
| icon-ai-chat-fill | AI 聊天填充 |
| icon-mail | 邮件 |
| icon-scan | 扫描 |
| icon-tag | 标签 |
| icon-share | 分享 |
| icon-subscribe | 订阅 |
| icon-chat | 聊天 |
| icon-picture | 图片 |
| icon-location | 位置 |
| icon-list | 列表 |
| icon-table | 表格 |
| icon-select | 选择 |
| icon-coffee | 咖啡 |
| icon-blank | 空白 |
| icon-heart | 心形 |
| icon-heart-fill | 心形填充 |
| icon-circle | 圆圈 |
| icon-ring | 环形 |
使用方式
安装
pnpm install nue-ui-iconfont引入样式
在项目的入口文件中引入图标字体样式：
@import 'nue-ui-iconfont/dist/iconfont.css';或在 HTML 中引入：
<link rel="stylesheet" href="node_modules/nue-ui-iconfont/dist/iconfont.css" />使用图标
使用 iconfont 类名和对应的图标类名：
<i class="iconfont icon-search"></i>
<i class="iconfont icon-check"></i>
<i class="iconfont icon-warning"></i>自定义样式
可以通过 CSS 自定义图标的大小和颜色：
.iconfont {
font-size: 20px;
color: #333;
}
.icon-large {
font-size: 32px;
}
.icon-primary {
color: var(--primary-color);
}构建命令
# 构建 CSS
pnpm build-css
# 移动字体文件
pnpm move-woff2
# 清理构建目录
pnpm remove-dist
# 完整构建
pnpm build构建输出
构建完成后，会在 dist 目录下生成以下文件：
dist/
└── iconfont.css # 编译后的 CSS 文件字体文件会被移动到 dist 目录下。
字体格式
支持以下字体格式：
- WOFF2 - 推荐使用，体积最小，加载最快
- WOFF - 备用格式，兼容性好
- TTF - 备用格式，兼容性最好
浏览器支持
- Chrome 36+
- Firefox 39+
- Safari 10+
- Edge 14+
- Opera 23+
注意事项
- 样式引入: 使用图标前必须先引入 CSS 文件
- 字体加载: 字体文件需要从正确的路径加载
- 类名规范: 必须同时使用
iconfont和对应的图标类名 - 性能优化: 建议使用 WOFF2 格式以获得最佳性能