Skip to content

Releases: guokaigdg/naive-icons

Release list

v1.6.0

v1.6.0 Latest
Latest

Choose a tag to compare

View all tags
@guokaigdg guokaigdg released this 11 Oct 05:37
v1.6.0
edcc6dd

naive-icons v1.6.0

163 枚手绘 naive folk art 风格图标 · MIT · 零运行时依赖

npm install naive-icons
import { KeyboardIcon, MouseIcon, MonitorIcon, ChargerIcon } from 'naive-icons';

新增 4 枚图标

全部归入「日常物品」分类，该分类 18 → 22 枚，总数 159 → 163。

id 中文名 组件名
keyboard 键盘 KeyboardIcon
mouse 鼠标 MouseIcon
monitor 显示器 MonitorIcon
charger 充电头 ChargerIcon

配色刻意错开，无两枚撞色：键盘黄、鼠标与显示器青、充电头橙。

语义检索脚本同步补了同义词 —— search.py 现在能命中「键鼠」「副屏」「快充」「电源适配器」「点击设备」这类口语说法。

python3 skills/naive-icons/scripts/search.py 键鼠

重绘 3 枚图标

anchor 锚

原版是纯线条图标，与库里「大实心主形体占视觉 60%+」的三段式不合 —— 设计规范里列出的 16 枚纯线条图标不含它，因为锚是靠体积感而不是走向被识别的。

改为 navy 单路径实心锚身：一条 path 画完竖杆 + 横杆 + U 形锚臂，轮廓是整体的一条墨线、没有内部断线；橙色锚环作唯一对比色点缀。

watermelon 西瓜

原版的三层色块是嵌套填充、每层各带 3.5 宽的墨边，色带被描边吃掉 —— 按描边内缘算，绿皮只剩 0.5 单位，白瓤是负的（两条边完全叠住，视觉上并不存在）。所以原图看起来只有「黑框 + 一条绿线 + 橙块」。

改为把填充与轮廓线拆开：三层纯填充（stroke="none"）+ 外轮廓 + 两条 2.2 宽的内部分界线。

原版 新版
绿皮可见宽 0.50 2.15
白瓤可见宽 0（不可见） 1.30
外层半径 17 19

rocket 火箭

保留原配色（奶油箭体 + 青舷窗 + 橙尾翼与火焰），只修几何，详见下方修复项。

修复

火箭底边距越界

原版火焰尖在 y=46，加描边外缘到 47.75，底边距只剩 0.25 —— 远低于 ≥3 的下限，是全库唯一一处越界。修正后为 3.75。

同时箭体底从 y38 提到 y34、火焰上端延伸到 y32 并压在箭体之下，原版箭体与火焰之间 4 单位的悬空缝隙消除。

尺寸属性校验覆盖 width / height

width / height 现在也走尺寸校验，不再绕过 size。

strokeWidth="" 回落 3.5

Number('') === 0 而非 NaN，空串原本会静默变成「不描边」。

其他

文档、注释与 skill 资产里的图标总数同步到 163（SKILL.md 的 description 字段也会影响 skill 被检索到的描述）。

体积

1.5.3 1.6.0
tarball 154.7 KB 158.5 KB
未压缩 — 1034.2 KB
文件数 — 1163

tree-shaking 无退化：单导入一个图标仍是 1296 B（7 枚合计 6493 B，平均 928 B/枚），依赖逐图标入口 + splitting，不会因为库里有 163 枚就把全库打进包。

升级

npm install naive-icons@latest

无破坏性变更，IconProps、组件名与导出路径都没动。

完整变更记录见 CHANGELOG.md。

Assets 2
Loading

v1.5.3

v1.5.3

Choose a tag to compare

View all tags
@guokaigdg guokaigdg released this 08 Oct 15:52
v1.5.3
d66a8b4

Naive Icons v1.5.3

25 个全新图标（135 → 159），Agent Skill 正式上线，以及一次把 tree-shaking 真正修回来的构建调整。
本 release 覆盖 v1.3.0 之后的全部变更：1.5.0 / 1.5.1 / 1.5.2 / 1.5.3。

新增图标

图标 组件 中文名
users UsersIcon 多人
user-plus UserPlusIcon 添加成员
filter FilterIcon 筛选
sort SortIcon 排序
more-vertical MoreVerticalIcon 更多(竖)
send SendIcon 发送
undo UndoIcon 撤销
redo RedoIcon 重做
volume VolumeIcon 音量
volume-x VolumeXIcon 静音
maximize MaximizeIcon 全屏
zoom-in ZoomInIcon 放大
zoom-out ZoomOutIcon 缩小
arrow-up-right ArrowUpRightIcon 右上箭头
check-square CheckSquareIcon 复选框
shield ShieldIcon 安全
bell-off BellOffIcon 免打扰
paperclip PaperclipIcon 附件
inbox InboxIcon 收件箱
sliders SlidersIcon 调节
grid GridIcon 网格
list ListIcon 列表
ban BanIcon 禁止
badge-check BadgeCheckIcon 认证
scooter ScooterIcon 踏板摩托车

新增：Agent Skill

一行命令把本库装进 AI 编码助手，它就能按语义帮你挑图标、生成可直接粘贴的代码，
并且知道这套图标的设计规范：

npx skills add guokaigdg/naive-icons

Skill 内含完整图标目录、设计规范与用法，以及全部 SVG 源码（自带，不依赖本库）。
Claude Code、Cursor、Codex、OpenCode 等主流客户端都认。

修复：tree-shaking 恢复生效

以前只把 src/index.ts 作为单一入口，产物是一个大文件，里面有 159 条顶层
XxxIcon.displayName = "..." 赋值。打包器无法证明这些语句无副作用，于是整个模块必须保留，
连带保留全部 159 个组件——sideEffects: false 只允许跳过「整个模块」，管不到模块内部的顶层语句，
所以那时它等于没写。

实测只导入 HomeIcon 一个图标：

版本 打包体积 残留图标
1.5.0 105,054 B（gzip 11.8 KB） 159 个
1.5.3 1,200 B 1 个

约 1/88。（1.5.1 首次降到 933 B，后续版本因加入描边缩放与属性校验略有回升。）改为每个图标各自成为入口 + splitting: true，并新增
naive-icons/icons/* 子路径可绕过顶层入口直接引单个图标。
tarball 体积 217.5 KB（1.5.1）→ 154.7 KB（发布时排除 .map，省掉 28.9%），
相对 1.5.0 的 145.8 KB 只 +6.1%。体积单位为 KB = 1024 字节。

修复：组件属性

  • strokeWidth 真正作用到整枚图标。SVG 的 stroke-width 可继承，但子元素一旦自带值就
    不再继承——库里有 220 处内层自带描边，其中 182 处是刻意的粗细层次（细节 1.5–2、主体 3.5、
    强调 4–5）。以前只改根节点的话 <Icon strokeWidth={7} /> 会得到「外框 7、内层还是 3.5 与 4」
    的断裂效果。现在 strokeWidth 是相对 3.5 基准的缩放系数，内层按同一比例缩放，
    默认 3.5 时一根线都不变。该缺陷自 1.1/1.2 起就在线上（v1.3.0 时已有 89 枚图标中招）。
  • width / height 不再被静默忽略。以前无条件写 width = size，width={40} 渲染出来
    还是 24×24。现在 width / height 优先于 size，没传的那一边回落到 size。
  • size={null} / NaN / Infinity / 负数 均回落 24，不再让尺寸属性整个消失或报
    Received NaN。size={0} 保留（用 0 隐藏图标是合理用法）。
  • strokeWidth 接受字符串（"7" 与 7 等价）、0 根与内层一起归零、缩放结果取两位小数。
  • size 不再泄漏进 svg 的 props，SSR 产物不再因此虚增 1.9%。

修复：包入口导出

src/types.ts 里一直有 NAIVE_PALETTE / IconProps / IconName / IconComponent /
PaletteColor，但 src/index.ts 只导出图标组件，导致 README 教的
import { NAIVE_PALETTE } from 'naive-icons' 报运行时 SyntaxError、
import type { IconProps } 报 TS2305 / TS2459。现已全部可从包入口导入。
该问题自 1.0.0 起就存在。

改进

  • 重绘 refresh 为上下双弧循环箭头（两段弧各 120°，上下留 100° 缺口）
  • undo / redo 改为墨色长弧配橙色实心箭头，两枚互为镜像
  • zoom-in / zoom-out 改用青色线框镜片加橙色大符号，与 search 的实心镜片彻底区分
  • external-link 箭头描边 3.5 → 4.0
  • 官网换色改为只替换墨色描边，图标自带的彩色描边不再被刷成单色
  • 官网页脚的图标总数与版本号改由脚本派生，不会再随发版过期
  • @types/react 声明为可选 peer dependency

测试

新增 npm test（vitest），32 个用例。其中两条是专门的回归屏障：
tests/bundle-size.test.ts 盯住单图标打包体积与 tsup 配置形态，
tests/jsx-attrs.test.ts 断言 159 个 tsx 的 JSX 体内没有 kebab 属性。
同时新增 CI（typecheck → build → test → 校验派生产物与 svg/ 同源）。

安装

npm install naive-icons

需要 icon 级 tree-shaking 直接引单个图标：

import { HomeIcon } from 'naive-icons/icons/HomeIcon';
Loading

v1.3.0

v1.3.0

Choose a tag to compare

View all tags
@guokaigdg guokaigdg released this 01 Oct 06:28
v1.3.0
005188d

Naive Icons v1.3.0

9 个全新的状态 / 反馈图标，图标总数达 134 个。

新增图标

图标 组件 中文名
alert-circle AlertCircleIcon 提示
alert-triangle AlertTriangleIcon 警告
check-circle CheckCircleIcon 成功
eye-off EyeOffIcon 隐藏
help-circle HelpCircleIcon 帮助
info InfoIcon 信息
lock-open LockOpenIcon 解锁
spinner SpinnerIcon 加载
x-circle XCircleIcon 错误

改进

  • check 图标勾形几何微调，小尺寸下更清晰

安装

npm install naive-icons
Loading

v1.1.0

v1.1.0

Choose a tag to compare

View all tags
@guokaigdg guokaigdg released this 18 Sep 13:26
v1.1.0
754f099

Naive Icons v1.1.0

图标总数由 105 增至 116，补齐一组「导航 / 操作骨架」图标；全部组件改用 forwardRef 并补全无障碍属性，同时官网完成一轮整体重写。

新增图标

补齐导航与操作场景缺失的 11 个图标，与已有的 plus、close 等组成基础骨架：

menu、chevron-down、chevron-up、chevron-left、chevron-right、ellipsis、external-link、link、unlink、copy、minus

其中 minus 与既有的 plus 配对（黄色圆底 + 墨色横/竖线），风格保持一致。

修复

  • 修正 IconName 类型中图标名后缀重复的问题，现在与组件导出名一一对应
  • 全部 105 个既有组件改用 forwardRef，支持 ref 透传，并补全 displayName 便于 DevTools 识别
  • 补齐无障碍属性：装饰性图标默认 aria-hidden，传入 title 时自动渲染 <title> 子节点并标记 role="img"
  • normalizeIconProps 不再把 title 误写为原生 title 属性，避免与无障碍 <title> 节点冲突

官网与文档

  • 官网三层（HTML / CSS / JS）完全重写：语义化标签、统一的设计令牌体系（间距 4px 基数、圆角与阴影尺度）
  • 信息架构收敛：原 4 个并列代码面板合并为「安装 / React / SVG / TypeScript」标签页，调色板与设计原则合并为「设计规范」一节
  • 新增 4 个方向键图标：arrow-up、arrow-down、arrow-left、arrow-right，与 close 组成基础方向/操作组
  • 引入 LXGW 悠哉字体（OFL，自托管子集化，约 170KB ×2 字重）作为网站字体；图标库本体仍无任何字体或资源依赖
  • 图标浏览器工具栏宽屏吸顶，新增分类结果计数、搜索清空、描边快捷色板与自定义取色器
  • 详情弹窗支持键盘方向键连续切换图标，打开时背景内容设为 inert
  • 无障碍补强：skip link、aria-live 结果计数、标签页方向键切换、焦点归还

安装

npm install naive-icons

使用

import { HomeIcon, MenuIcon, ChevronDownIcon } from 'naive-icons';

export function Nav() {
  return (
    <nav>
      <HomeIcon size={24} />
      <MenuIcon size={28} color="#E76F51" />
      <ChevronDownIcon size={20} strokeWidth={4} />
    </nav>
  );
}

相关链接

许可证：MIT · 全部图标均为原创作品，个人与商业项目均可自由使用。

Loading