naive-icons 1.2.0 → 1.5.0

package/CHANGELOG.md

@@ -2,6 +2,74 @@
 
 本文件记录 Naive Icons 的每个版本变更。版本号遵循语义化版本规范（SemVer）。
 
+## 1.5.0
+
+新增
+
+- 官方 Agent Skill：让 AI 编码助手能按语义检索图标、输出可直接粘贴的代码，并知道这套图标的设计规范
+- 一条命令装好，不用先装本库、不用挑 agent：
+
+  ```bash
+  npx skills add guokaigdg/naive-icons
+  ```
+
+  会先展示要装的内容再确认，并自动识别本机已装的 agent。
+  可选 Project（跟着仓库走，团队共享）或 Global（装到用户目录），加 `-g` 可跳过该选择。
+- Skill 自带全部 SVG 源码（收在 `scripts/icons.json` 一个文件里），装到哪都能出码，
+  不依赖项目里是否装了本库
+- 脚本只用 Python 标准库，skill 被装到任何位置都能跑
+- 新增 `scripts/build_skill_assets.py`，从 `svg/` 生成 skill 的 `catalog.md` 与
+  `icons.json`，并校验 `svg/`、`ICON_CATEGORY`、`ZH_NAMES` 三者一致
+
+修复
+
+- 补上 `index.ts` 对类型与色板的转发，`NAIVE_PALETTE`、`IconProps`、`IconName`、
+  `IconComponent`、`PaletteColor` 从包入口真正可用了。此前 `src/types.ts` 里都有定义，
+  但入口只导出 159 个图标组件，导致 README 里的
+  `import { NAIVE_PALETTE } from 'naive-icons'` 报运行时 `SyntaxError`、
+  `import type { IconProps } from 'naive-icons'` 报 `TS2305` / `TS2459`。
+  该问题自 1.0.0 起就存在
+- 两个生成器（`generate_icons.py` / `generate_icons_add.py`）的 `index.ts` 模板同步补上
+  转发，否则下次新增图标时会被全量重建冲掉
+
+## 1.4.0
+
+新增
+
+- 新增 25 个图标，图标总数增至 159
+  - 界面基础 +11：users、user-plus、more-vertical、check-square、shield、bell-off、sliders、grid、list、ban、badge-check
+  - 操作 +7：filter、sort、undo、redo、maximize、zoom-in、zoom-out
+  - 文件与媒体 +3：volume、volume-x、paperclip
+  - 通信 +2：send、inbox
+  - 导航方位 +1：arrow-up-right
+  - 交通工具 +1：scooter
+- 撤销 / 重做改为墨色长弧搭配橙色实心箭头的形态，两枚互为镜像，箭头水平朝外
+- 放大 / 缩小改用青色线框镜片加橙色大符号，与 search 的实心镜片彻底区分开
+
+改进
+
+- 重绘 refresh 为上下双弧的循环箭头，两段弧各占 120°，上下各留 100° 缺口，弧段与留白接近 1:2
+- external-link 的橙色箭头描边由 3.5 加粗到 4.0，小尺寸下更清晰
+- cart 从「交通工具」重新归入「日常物品」
+- 官网取色器与主题换色改为只替换墨色描边。图标自带的彩色描边（橙色箭头、黄色勾等）本来就是 naive 风格的一部分，此前会被一并刷成单色
+
+修复
+
+- 官网深色模式下首次加载时，hero 贴纸改用奶油色描边，不会因墨色与深色底糊在一起而看不见
+- hero 贴纸切换主题时只替换上一个主题色并在颜色未变时跳过，不再逐个重写 DOM
+- 移除图标详情弹窗的左右切换按钮与键盘 ← → 导航，连带删除 step / indexOfCurrent 等死代码
+- 扩充脚本重新生成 package.json 时会剥掉文件末尾的换行，导致凭空多出一行 diff，现已修复
+
+## 1.3.0
+
+新增
+
+- 新增 9 个状态 / 反馈图标（alert-circle、alert-triangle、check-circle、eye-off、help-circle、info、lock-open、spinner、x-circle），图标总数增至 134
+
+改进
+
+- 微调 check 图标勾形几何，提升小尺寸下的清晰度
+
 ## 1.2.0
 
 新增

package/README.md

@@ -1,16 +1,14 @@
-
 <h1>Naive Icons</h1>
 
 <p align="right">
-  <a href="./README.md">中文</a> | <a href="./README.en.md">English</a>
+  English | <a href="./README.zh-CN.md">中文</a>
 </p>
 
 <p align="center">
   <img src="assets/logo.svg" alt="Naive Icons" width="132" height="132">
 </p>
 
-
-<p align="center">手绘 naive folk art 风格的 SVG 图标库，为 React 与 TypeScript 打造</p>
+<p align="center">Hand-drawn "naive folk art" style SVG icon library, built for React and TypeScript</p>
 
 <p align="center">
   <a href="https://github.com/guokaigdg/naive-icons/stargazers"><img src="https://img.shields.io/github/stars/guokaigdg/naive-icons?style=flat-square&color=E9C46A" alt="GitHub stars"></a>
@@ -23,42 +21,46 @@
   <img src="https://img.shields.io/badge/SVG-FFB13B?style=flat-square&logoColor=black" alt="SVG">
 </p>
 
-Naive Icons 是一套手绘 naive folk art 风格的 SVG 图标库，为 React 与 TypeScript 打造。全部 125 个图标由 AI 生成，均为原创作品。
+<p align="center">
+  <b>🤖 AI Agent Skill</b> — install it into Claude Code, Cursor, Codex and friends,<br/>
+  and they can pick icons by meaning, emit ready-to-paste code, and know the design rules.<br/>
+  <code>npx skills add guokaigdg/naive-icons</code> &nbsp;·&nbsp; <a href="#ai-agent-skill">See details &rarr;</a>
+</p>
+
+Each icon is drawn on a 48x48 grid with a 3.5 stroke, rounded line caps, and a retro palette — keeping the charming clumsiness and warmth of hand-drawn illustration. Some icons even feature a pair of dot eyes and a little smile, adding a touch of humanity to your interface.
 
-每一个图标都建立在 48x48 的网格上，使用 3.5 的粗描边、圆角线帽与统一的复古调色板，并保留了手绘插画特有的笨拙感与温度——部分图标还带有一对小圆点眼睛和微笑，让界面多一点点人情味。
+## Features
 
-- 图标数量：125
-- 单个体积：约 400 至 700 字节
-- 依赖：零运行时依赖，仅 peer 依赖 React
-- 许可证：MIT
+- Icons spanning 11 categories: interface, actions, media, navigation, animals, food, and more
+- Every icon ships as both an SVG source file and a React TSX component
+- Full TypeScript types: IconProps, IconName, IconComponent, NAIVE_PALETTE
+- Supports `currentColor` to follow the surrounding text color
+- Official Agent Skill: one command installs it into your AI coding agent, which can then pick icons by meaning and emit ready-to-paste code
+
+## AI Agent Skill
+
+Install it into your AI coding agent (Claude Code, Cursor, Codex, …) and it can pick icons by
+meaning, emit ready-to-paste code, and know this library's design rules.
+
+```bash
+npx skills add guokaigdg/naive-icons
+```
 
-## 目录
+You do not need to install the package first. **Start a new session** afterwards,
+then just ask:
 
-- [特性](#特性)
-- [安装](#安装)
-- [快速开始](#快速开始)
-- [组件属性](#组件属性)
-- [直接使用 SVG](#直接使用-svg)
-- [调色板](#调色板)
-- [图标清单](#图标清单)
-- [设计原则](#设计原则)
-- [目录结构](#目录结构)
-- [本地开发](#本地开发)
-- [浏览器支持](#浏览器支持)
-- [许可证](#许可证)
+- "Give this login page a set of naive icons"
+- "Find an icon that means 'already read'"
 
-## 特性
+The skill bundles the full icon catalog, the design spec, usage patterns and every SVG source
+file, so the agent can generate code even when the package isn't installed in your project.
+Re-run the same command after upgrading the library to update it.
 
-- 125 个手绘风格的原创 SVG 图标，覆盖界面、操作、媒体、导航、动物、食物等 11 个分类
-- 统一规格：48x48 viewBox、3.5 描边宽度、round 线帽与线角
-- 统一调色板：9 色复古配色，可作为设计令牌直接引用
-- 部分图标带有圆点眼睛与微笑表情，风格辨识度高
-- 每个图标同时提供 SVG 源文件与 React TSX 组件
-- 完整 TypeScript 类型：IconProps、IconName、IconCategory、NAIVE_PALETTE
-- 透明背景、无渐变、无外部字体依赖
-- 支持 currentColor，可跟随文字颜色自动变化
+> Installing the skill and using the components are separate things. You only need
+> `npm install naive-icons` from the Installation section below when you actually want to
+> `import { HomeIcon } from 'naive-icons'` in your own code.
 
-## 安装
+## Installation
 
 ```bash
 npm install naive-icons
@@ -72,9 +74,9 @@ yarn add naive-icons
 pnpm add naive-icons
 ```
 
-Naive Icons 只依赖 React，支持 React 16.8 及以上版本（含 React 18 与 19）。
+Naive Icons only depends on React and supports React 16.8 and above (including React 18 and 19).
 
-## 快速开始
+## Quick Start
 
 ```tsx
 import { HomeIcon, HeartIcon, PenguinIcon } from 'naive-icons';
@@ -90,39 +92,41 @@ export function Example() {
 }
 ```
 
-按需引入可以进一步减小打包体积：
+Tree-shaking works out of the box: the package is ESM and sets `sideEffects: false`, so a
+named import is all you need.
 
 ```tsx
-import HomeIcon from 'naive-icons/src/HomeIcon';
+import { HomeIcon, SearchIcon } from 'naive-icons';
 ```
 
-配合 currentColor 使用，图标会自动继承父级文字颜色：
+To follow the parent text color, pass `currentColor` explicitly — the default is ink `#2A2A2A`
+and is **not** inherited automatically:
 
 ```tsx
 <span style={{ color: '#264653' }}>
-  <HomeIcon size={20} />
-  首页
+  <HomeIcon size={20} color="currentColor" />
+  Home
 </span>
 ```
 
-添加无障碍标题：
+Add an accessibility title:
 
 ```tsx
-<HomeIcon size={24} title="返回首页" />
+<HomeIcon size={24} title="Back to home" />
 ```
 
-## 组件属性
+## Component Props
 
-Naive Icons 的每个组件都继承原生 `SVGProps<SVGSVGElement>`，可以直接传入 `className`、`onClick`、`style` 等任意 SVG 属性。
+Every Naive Icon component extends the native `SVGProps<SVGSVGElement>`, so you can pass any SVG attribute directly, such as `className`, `onClick`, or `style`.
 
-| 属性 | 类型 | 默认值 | 说明 |
+| Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| size | number \| string | 24 | 图标尺寸，宽高相等。传入后覆盖 width 与 height |
-| color | string | currentColor | 描边颜色 |
-| strokeWidth | number \| string | 3.5 | 描边宽度，按 48x48 画布比例缩放 |
-| fill | string | none | 填充色 |
-| title | string | — | 无障碍标题，渲染为 SVG title 节点 |
-| width / height | number \| string | 跟随 size | 单独指定宽或高 |
+| size | number \| string | 24 | Icon size, equal width and height. Overrides width and height when set |
+| color | string | `#2A2A2A` | Stroke color. Pass `currentColor` to follow the surrounding text color |
+| strokeWidth | number \| string | 3.5 | Stroke width, scaled to the 48x48 canvas |
+| fill | string | none | Fill color |
+| title | string | — | Accessibility title, rendered as an SVG title node |
+| width / height | number \| string | follows size | Set width or height individually |
 
 ```typescript
 import type { IconProps } from 'naive-icons';
@@ -136,110 +140,54 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 }
 ```
 
-## 直接使用 SVG
+## Using the SVG Directly
 
-如果项目不是 React，可以直接使用 `svg/` 目录下的源文件。所有 SVG 都是自包含的，没有外部引用。
+If your project isn't React, you can use the source files in the `svg/` directory. Every SVG is self-contained with no external references.
 
 ```html
-<img src="naive-icons/svg/home.svg" width="24" height="24" alt="首页" />
+<img src="naive-icons/svg/home.svg" width="24" height="24" alt="Home" />
 ```
 
-内联使用时，把 `stroke="#2A2A2A"` 替换为 `stroke="currentColor"` 即可跟随文字颜色：
+To follow the surrounding text color when inlining, replace `stroke="#2A2A2A"` with `stroke="currentColor"`:
 
 ```html
 <svg viewBox="0 0 48 48" width="24" height="24" fill="none"
      stroke="currentColor" stroke-width="3.5"
      stroke-linecap="round" stroke-linejoin="round">
-  <!-- 复制 svg/home.svg 中的 path 内容 -->
+  <!-- Copy the path content from svg/home.svg -->
 </svg>
 ```
 
-也可以做成 SVG sprite 或 Icon Font，源文件结构足够简单，便于二次加工。
+You can also build an SVG sprite or icon font — the source files are simple enough to work with.
 
-## 调色板
+## Palette
 
 ```typescript
 import { NAIVE_PALETTE } from 'naive-icons';
 ```
 
-| 名称 | 色值 | 用途 |
+| Name | Value | Usage |
 | --- | --- | --- |
-| ink | #2A2A2A | 主描边色 |
-| navy | #264653 | 深色主体 |
-| orange | #E76F51 | 强调色 |
-| yellow | #E9C46A | 暖色填充 |
-| pink | #F4A6A4 | 柔和填充 |
-| green | #588157 | 自然元素 |
-| teal | #2A9D8F | 辅助色 |
-| brown | #8B5E3C | 木质与土地 |
-| cream | #FAEDCD | 浅色底 |
-
-## 图标清单
-
-**界面基础**（18）
-home, user, settings, search, heart, star, bell, calendar, clock, eye, bulb, tag, bookmark, menu, ellipsis, external-link, link, unlink
-
-**操作**（15）
-edit, trash, download, upload, save, plus, close, check, refresh, share, play, pause, stop, copy, minus
-
-**文件与媒体**（10）
-file, folder, image, camera, video, mic, music, code, book, headphones
-
-**导航方位**（14）
-location, compass, map, flag, anchor, magnet, arrow-up, arrow-down, arrow-left, arrow-right, chevron-down, chevron-up, chevron-left, chevron-right
-
-**通信**（4）
-mail, chat, phone, wifi
-
-**自然天气**（14）
-sun, moon, cloud, umbrella, tree, mountain, tent, flower, leaf, rainbow, mushroom, cactus, snowflake, flame
-
-**动物**（14）
-cat, dog, bird, fish, penguin, rabbit, bear, fox, owl, frog, bee, butterfly, snail, ladybug
+| ink | #2A2A2A | Primary stroke |
+| navy | #264653 | Dark main body |
+| orange | #E76F51 | Accent |
+| yellow | #E9C46A | Warm fill |
+| pink | #F4A6A4 | Soft fill |
+| green | #588157 | Natural elements |
+| teal | #2A9D8F | Secondary |
+| brown | #8B5E3C | Wood and earth |
+| cream | #FAEDCD | Light background |
 
-**食物饮品**（11）
-apple, strawberry, watermelon, cherry, lemon, cake, icecream, donut, coffee, coffee-cup, water-cup
+## Design Principles
 
-**日常物品**（16）
-balloon, basketball, dumbbell, lamp, candle, pencil, paintbrush, globe, google-chrome, trophy, shopping-bag, credit-card, gift, thermometer, lock, key
+Naive Icons follows four fixed rules. They should be respected when adding new icons.
 
-**交通工具**（7）
-car, airplane, rocket, cart, bicycle, sailboat, train
+1. **Grid & bleed**: All graphics are drawn on a 48x48 canvas, keeping at least 3 units between the main body and the canvas edge.
+2. **Stroke**: A unified 3.5 width with round caps and joins, and no dashed lines.
+3. **Color**: The 9 palette colors set the default tone; other solid colors are allowed when genuinely needed (e.g. brand colors) — no gradients, shadows, or semi-transparent overlays.
+4. **Personality**: Slight asymmetry is welcome; encourage dot eyes and a smile on living subjects to keep the hand-drawn clumsiness.
 
-**表情**（2）
-smile, thumbs-up
-
-图标文件名使用 kebab-case（如 `shopping-bag.svg`、`thumbs-up.svg`），React 组件名使用 PascalCase 并带 Icon 后缀（如 `ShoppingBagIcon`、`ThumbsUpIcon`）。
-
-## 设计原则
-
-Naive Icons 遵循四条固定规则，新增图标时也应保持一致。
-
-1. **网格与出血**：全部图形绘制在 48x48 画布内，主体距离画布边缘至少保留 3 个单位。
-2. **描边**：统一 3.5 宽度，端点与转角均为 round，不使用虚线。
-3. **配色**：只使用调色板中的 9 个颜色，不使用渐变、阴影与半透明叠加。
-4. **性格**：允许线条轻微不对称，鼓励给有生命的图形加上圆点眼睛与微笑，保留手绘的笨拙感。
-
-## 目录结构
-
-```
-naive-icons/
-├── svg/                 125 个 SVG 源文件
-├── src/                 125 个 React TSX 组件 + index.ts + types.ts
-├── assets/              品牌资源（logo）
-├── scripts/             图标生成与预览构建脚本
-├── website/             官方文档站点
-├── dist/                构建产物（ESM + CJS + 类型声明，不纳入版本控制）
-├── tsup.config.ts       构建配置
-├── tsconfig.json
-├── LICENSE
-├── README.md
-├── CHANGELOG.md
-├── CONTRIBUTING.md
-└── package.json
-```
-
-## 本地开发
+## Local Development
 
 ```bash
 git clone https://github.com/guokaigdg/naive-icons.git
@@ -247,45 +195,33 @@ cd naive-icons
 npm install
 ```
 
-常用脚本：
+Common scripts:
 
 ```bash
-npm run build        # 用 tsup 构建 dist（ESM + CJS + 类型声明）
-npm run dev          # 监听模式构建
-npm run typecheck    # 类型检查
-npm run website      # 本地预览官网（Python 静态服务器，端口 8080）
-npm run icons:build  # 依据 scripts 中的定义重新生成 SVG 与 TSX
-npm run icons:add    # 增量新增图标，不覆盖已有文件
+npm run build        # Build dist with tsup (ESM + CJS + type declarations)
+npm run dev          # Watch mode build
+npm run typecheck    # Type check
+npm run website      # Preview the site locally (Python static server, port 8080)
+npm run icons:build  # Regenerate SVG and TSX from script definitions
+npm run icons:add    # Incrementally add icons without overwriting existing files
 ```
 
-发布时 `prepublishOnly` 会自动执行构建，无需手动运行 `npm run build`。
+`prepublishOnly` runs the build automatically on publish, so there is no need to run `npm run build` manually.
 
-构建产物为 `dist/index.mjs`（ESM）、`dist/index.js`（CJS）与 `dist/index.d.ts` / `dist/index.d.mts`（类型声明），`package.json` 的 `exports` 已按 `import` / `require` 条件分别指向对应文件。React 被声明为 external，不会被打进产物。
+The build output is `dist/index.mjs` (ESM), `dist/index.js` (CJS), and `dist/index.d.ts` / `dist/index.d.mts` (type declarations). The `exports` field in `package.json` points to the correct file for each `import` / `require` condition. React is declared as external and is not bundled.
 
-官网是纯静态站点（无构建、无依赖），直接打开 `website/index.html` 也能用：浏览全部图标、按分类筛选、搜索、实时调整尺寸与描边颜色、切换浅色/深色/网格预览底，点击任意图标可查看 React 用法、复制代码或下载 SVG。支持浅色 / 深色主题（跟随系统、可手动切换并记忆），弹窗内可用方向键连续切换图标。
+The website is a fully static site (no build step, no dependencies). You can open `website/index.html` directly: browse all icons, filter by category, search, adjust size and stroke color live, switch between light/dark/grid preview backgrounds, and click any icon to view React usage, copy code, or download the SVG. It supports light/dark themes (follows the system, with manual toggle remembered) and lets you navigate between icons with arrow keys in the modal.
 
-## 字体
+## Browser Support
 
-图标库本体（SVG 与 React 组件）不依赖任何字体。官网额外引入一款手写感字体用于标题与正文：[LXGW 悠哉字体](https://github.com/lxgw/yozai-font)（SIL Open Font License 1.1，可自由商用）。
-
-官网自托管方式：仅打包站内实际用到的字符（约 715 个，常规字重约 170 KB），完全离线可用，文件位于 `website/assets/fonts/`。如需自行重新生成子集，运行：
-
-```bash
-python3 scripts/subset_fonts.py
-```
-
-依赖 `fonttools` 与 `brotli`：
-
-```bash
-pip install fonttools brotli
-```
+Naive Icons outputs standard SVG 1.1 and supports all modern browsers (the last two major versions of Chrome, Firefox, Safari, and Edge). The React components contain no browser-specific APIs and can be safely used in server-side rendering environments.
 
-## 浏览器支持
+## License
 
-Naive Icons 输出的是标准 SVG 1.1，支持所有现代浏览器（Chrome、Firefox、Safari、Edge 最近两个大版本）。React 组件不含任何浏览器专有 API，可在服务端渲染环境中安全使用。
+MIT License. See [LICENSE](./LICENSE).
 
-## 许可证
+All icons are original works, free to use in personal and commercial projects without attribution.
 
-MIT License。详见 [LICENSE](./LICENSE)。
+## Sponsor
 
-全部图标均为原创作品，可自由用于个人与商业项目，无需署名。
+If this project has been helpful, consider treating the developer's cat to a can of food — after all, there's a cat supervising the code behind every icon. <a href="https://guokaigdg.github.io/home/payment.html">Feed the cat a can</a>

package/README.zh-CN.md

@@ -0,0 +1,222 @@
+<h1>Naive Icons</h1>
+
+<p align="right">
+  <a href="./README.md">English</a> | 中文
+</p>
+
+<p align="center">
+  <img src="assets/logo.svg" alt="Naive Icons" width="132" height="132">
+</p>
+
+<p align="center">手绘 naive folk art 风格的 SVG 图标库，为 React 与 TypeScript 打造</p>
+
+<p align="center">
+  <a href="https://github.com/guokaigdg/naive-icons/stargazers"><img src="https://img.shields.io/github/stars/guokaigdg/naive-icons?style=flat-square&color=E9C46A" alt="GitHub stars"></a>
+  <a href="https://www.npmjs.com/package/naive-icons"><img src="https://img.shields.io/npm/v/naive-icons?style=flat-square&color=E76F51" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/naive-icons"><img src="https://img.shields.io/npm/dm/naive-icons?style=flat-square&color=2A9D8F" alt="npm downloads"></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-264653?style=flat-square" alt="license: MIT"></a>
+  <br/>
+  <img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black" alt="React">
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript">
+  <img src="https://img.shields.io/badge/SVG-FFB13B?style=flat-square&logoColor=black" alt="SVG">
+</p>
+
+<p align="center">
+  <b>🤖 AI Agent Skill</b> — 给 Claude Code / Cursor / Codex 等 AI 编码助手装一份，<br/>
+  它就能按语义帮你挑图标、生成可直接粘贴的代码，并且知道这套图标的设计规范。<br/>
+  <code>npx skills add guokaigdg/naive-icons</code> &nbsp;·&nbsp; <a href="#ai-agent-skill">看详情 &rarr;</a>
+</p>
+
+每一个图标都建立在 48x48 的网格上，使用 3.5 的粗描边、圆角线帽与复古调色板，并保留了手绘插画特有的笨拙感与温度——部分图标还带有一对小圆点眼睛和微笑，让界面多一点点人情味。
+
+## 特性
+
+- 图标覆盖界面、操作、媒体、导航、动物、食物等 11 个分类
+- 每个图标同时提供 SVG 源文件与 React TSX 组件
+- 完整 TypeScript 类型：IconProps、IconName、IconComponent、NAIVE_PALETTE
+- 支持 currentColor，传入后图标跟随文字颜色
+- 官方 Agent Skill：一条命令装到 AI 编码助手，按语义帮你挑图标并生成代码
+
+## AI Agent Skill
+
+给 AI 编码助手（Claude Code、Cursor、Codex 等）装一份，它就能按语义帮你挑图标、
+生成可直接粘贴的代码，并且知道这套图标的设计规范。
+
+```bash
+npx skills add guokaigdg/naive-icons
+```
+
+不用先装本库。装完**新开会话**，然后直接说：
+
+- 「用 naive 图标给这个登录页配一套图标」
+- 「找个表示『已读』的图标」
+
+Skill 自带完整图标目录、设计规范和用法，以及全部 SVG 源码，助手生成代码不依赖项目里
+是否装了本库。库升级后重跑同一条命令即可更新。
+
+> 装 skill 和用组件是两件事。要在代码里 `import { HomeIcon } from 'naive-icons'`，
+> 才需要下面「安装」里的 `npm install naive-icons`。
+
+## 安装
+
+```bash
+npm install naive-icons
+```
+
+```bash
+yarn add naive-icons
+```
+
+```bash
+pnpm add naive-icons
+```
+
+Naive Icons 只依赖 React，支持 React 16.8 及以上版本（含 React 18 与 19）。
+
+## 快速开始
+
+```tsx
+import { HomeIcon, HeartIcon, PenguinIcon } from 'naive-icons';
+
+export function Example() {
+  return (
+    <nav>
+      <HomeIcon size={24} />
+      <HeartIcon size={24} color="#E76F51" />
+      <PenguinIcon size={48} strokeWidth={4} />
+    </nav>
+  );
+}
+```
+
+按需引入：包是 ESM 且标记了 `sideEffects: false`，用具名导入即可，打包器会自动 tree-shaking：
+
+```tsx
+import { HomeIcon, SearchIcon } from 'naive-icons';
+```
+
+想跟随父级文字颜色，显式传 `currentColor`（默认是墨色 `#2A2A2A`，不会自动继承）：
+
+```tsx
+<span style={{ color: '#264653' }}>
+  <HomeIcon size={20} color="currentColor" />
+  首页
+</span>
+```
+
+添加无障碍标题：
+
+```tsx
+<HomeIcon size={24} title="返回首页" />
+```
+
+## 组件属性
+
+Naive Icons 的每个组件都继承原生 `SVGProps<SVGSVGElement>`，可以直接传入 `className`、`onClick`、`style` 等任意 SVG 属性。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| size | number \| string | 24 | 图标尺寸，宽高相等。传入后覆盖 width 与 height |
+| color | string | `#2A2A2A` | 描边颜色。传 `currentColor` 可跟随父级文字颜色 |
+| strokeWidth | number \| string | 3.5 | 描边宽度，按 48x48 画布比例缩放 |
+| fill | string | none | 填充色 |
+| title | string | — | 无障碍标题，渲染为 SVG title 节点 |
+| width / height | number \| string | 跟随 size | 单独指定宽或高 |
+
+```typescript
+import type { IconProps } from 'naive-icons';
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+  fill?: string;
+  title?: string;
+}
+```
+
+## 直接使用 SVG
+
+如果项目不是 React，可以直接使用 `svg/` 目录下的源文件。所有 SVG 都是自包含的，没有外部引用。
+
+```html
+<img src="naive-icons/svg/home.svg" width="24" height="24" alt="首页" />
+```
+
+内联使用时，把 `stroke="#2A2A2A"` 替换为 `stroke="currentColor"` 即可跟随文字颜色：
+
+```html
+<svg viewBox="0 0 48 48" width="24" height="24" fill="none"
+     stroke="currentColor" stroke-width="3.5"
+     stroke-linecap="round" stroke-linejoin="round">
+  <!-- 复制 svg/home.svg 中的 path 内容 -->
+</svg>
+```
+
+也可以做成 SVG sprite 或 Icon Font，源文件结构足够简单，便于二次加工。
+
+## 调色板
+
+```typescript
+import { NAIVE_PALETTE } from 'naive-icons';
+```
+
+| 名称 | 色值 | 用途 |
+| --- | --- | --- |
+| ink | #2A2A2A | 主描边色 |
+| navy | #264653 | 深色主体 |
+| orange | #E76F51 | 强调色 |
+| yellow | #E9C46A | 暖色填充 |
+| pink | #F4A6A4 | 柔和填充 |
+| green | #588157 | 自然元素 |
+| teal | #2A9D8F | 辅助色 |
+| brown | #8B5E3C | 木质与土地 |
+| cream | #FAEDCD | 浅色底 |
+
+## 设计原则
+
+Naive Icons 遵循四条固定规则，新增图标时也应保持一致。
+
+1. **网格与出血**：全部图形绘制在 48x48 画布内，主体距离画布边缘至少保留 3 个单位。
+2. **描边**：统一 3.5 宽度，端点与转角均为 round，不使用虚线。
+3. **配色**：以调色板的 9 色为默认基调，确有必要时可用其他实色（如品牌色），不使用渐变、阴影与半透明叠加。
+4. **性格**：允许线条轻微不对称，鼓励给有生命的图形加上圆点眼睛与微笑，保留手绘的笨拙感。
+
+## 本地开发
+
+```bash
+git clone https://github.com/guokaigdg/naive-icons.git
+cd naive-icons
+npm install
+```
+
+常用脚本：
+
+```bash
+npm run build        # 用 tsup 构建 dist（ESM + CJS + 类型声明）
+npm run dev          # 监听模式构建
+npm run typecheck    # 类型检查
+npm run website      # 本地预览官网（Python 静态服务器，端口 8080）
+npm run icons:build  # 依据 scripts 中的定义重新生成 SVG 与 TSX
+npm run icons:add    # 增量新增图标，不覆盖已有文件
+```
+
+发布时 `prepublishOnly` 会自动执行构建，无需手动运行 `npm run build`。
+
+构建产物为 `dist/index.mjs`（ESM）、`dist/index.js`（CJS）与 `dist/index.d.ts` / `dist/index.d.mts`（类型声明），`package.json` 的 `exports` 已按 `import` / `require` 条件分别指向对应文件。React 被声明为 external，不会被打进产物。
+
+官网是纯静态站点（无构建、无依赖），直接打开 `website/index.html` 也能用：浏览全部图标、按分类筛选、搜索、实时调整尺寸与描边颜色、切换浅色/深色/网格预览底，点击任意图标可查看 React 用法、复制代码或下载 SVG。支持浅色 / 深色主题（跟随系统、可手动切换并记忆），弹窗内可用方向键连续切换图标。
+
+## 浏览器支持
+
+Naive Icons 输出的是标准 SVG 1.1，支持所有现代浏览器（Chrome、Firefox、Safari、Edge 最近两个大版本）。React 组件不含任何浏览器专有 API，可在服务端渲染环境中安全使用。
+
+## 许可证
+
+MIT License。详见 [LICENSE](./LICENSE)。
+
+全部图标均为原创作品，可自由用于个人与商业项目，无需署名。
+
+## 赞助
+
+如果这个项目对你有帮助，不妨请开发者的猫吃个罐罐——毕竟每个图标背后都有一只猫在监督代码。<a href="https://guokaigdg.github.io/home/payment.html">请猫吃个罐罐</a>