naive-icons 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/README.md +66 -162
- package/README.zh-CN.md +195 -0
- package/dist/index.d.mts +19 -1
- package/dist/index.d.ts +19 -1
- package/dist/index.js +226 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +218 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -2
- package/svg/alert-circle.svg +5 -0
- package/svg/alert-triangle.svg +5 -0
- package/svg/check-circle.svg +4 -0
- package/svg/check.svg +1 -1
- package/svg/eye-off.svg +6 -0
- package/svg/help-circle.svg +5 -0
- package/svg/info.svg +5 -0
- package/svg/lock-open.svg +6 -0
- package/svg/spinner.svg +4 -0
- package/svg/x-circle.svg +5 -0
- package/README.en.md +0 -290
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
本文件记录 Naive Icons 的每个版本变更。版本号遵循语义化版本规范(SemVer)。
|
|
4
4
|
|
|
5
|
+
## 1.3.0
|
|
6
|
+
|
|
7
|
+
新增
|
|
8
|
+
|
|
9
|
+
- 新增 9 个状态 / 反馈图标(alert-circle、alert-triangle、check-circle、eye-off、help-circle、info、lock-open、spinner、x-circle),图标总数增至 134
|
|
10
|
+
|
|
11
|
+
改进
|
|
12
|
+
|
|
13
|
+
- 微调 check 图标勾形几何,提升小尺寸下的清晰度
|
|
14
|
+
|
|
5
15
|
## 1.2.0
|
|
6
16
|
|
|
7
17
|
新增
|
package/README.md
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
|
|
2
1
|
<h1>Naive Icons</h1>
|
|
3
2
|
|
|
4
3
|
<p align="right">
|
|
5
|
-
|
|
4
|
+
English | <a href="./README.zh-CN.md">中文</a>
|
|
6
5
|
</p>
|
|
7
6
|
|
|
8
7
|
<p align="center">
|
|
9
8
|
<img src="assets/logo.svg" alt="Naive Icons" width="132" height="132">
|
|
10
9
|
</p>
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
<p align="center">手绘 naive folk art 风格的 SVG 图标库,为 React 与 TypeScript 打造</p>
|
|
11
|
+
<p align="center">Hand-drawn "naive folk art" style SVG icon library, built for React and TypeScript</p>
|
|
14
12
|
|
|
15
13
|
<p align="center">
|
|
16
14
|
<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,16 @@
|
|
|
23
21
|
<img src="https://img.shields.io/badge/SVG-FFB13B?style=flat-square&logoColor=black" alt="SVG">
|
|
24
22
|
</p>
|
|
25
23
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
每一个图标都建立在 48x48 的网格上,使用 3.5 的粗描边、圆角线帽与统一的复古调色板,并保留了手绘插画特有的笨拙感与温度——部分图标还带有一对小圆点眼睛和微笑,让界面多一点点人情味。
|
|
29
|
-
|
|
30
|
-
- 图标数量:125
|
|
31
|
-
- 单个体积:约 400 至 700 字节
|
|
32
|
-
- 依赖:零运行时依赖,仅 peer 依赖 React
|
|
33
|
-
- 许可证:MIT
|
|
24
|
+
Each icon is drawn on a 48x48 grid with a 3.5 stroke, rounded line caps, and a unified 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.
|
|
34
25
|
|
|
35
|
-
##
|
|
26
|
+
## Features
|
|
36
27
|
|
|
37
|
-
-
|
|
38
|
-
-
|
|
39
|
-
-
|
|
40
|
-
-
|
|
41
|
-
- [直接使用 SVG](#直接使用-svg)
|
|
42
|
-
- [调色板](#调色板)
|
|
43
|
-
- [图标清单](#图标清单)
|
|
44
|
-
- [设计原则](#设计原则)
|
|
45
|
-
- [目录结构](#目录结构)
|
|
46
|
-
- [本地开发](#本地开发)
|
|
47
|
-
- [浏览器支持](#浏览器支持)
|
|
48
|
-
- [许可证](#许可证)
|
|
28
|
+
- Icons spanning 11 categories: interface, actions, media, navigation, animals, food, and more
|
|
29
|
+
- Every icon ships as both an SVG source file and a React TSX component
|
|
30
|
+
- Full TypeScript types: IconProps, IconName, IconCategory, NAIVE_PALETTE
|
|
31
|
+
- Supports currentColor, so icons automatically follow the surrounding text color
|
|
49
32
|
|
|
50
|
-
##
|
|
51
|
-
|
|
52
|
-
- 125 个手绘风格的原创 SVG 图标,覆盖界面、操作、媒体、导航、动物、食物等 11 个分类
|
|
53
|
-
- 统一规格:48x48 viewBox、3.5 描边宽度、round 线帽与线角
|
|
54
|
-
- 统一调色板:9 色复古配色,可作为设计令牌直接引用
|
|
55
|
-
- 部分图标带有圆点眼睛与微笑表情,风格辨识度高
|
|
56
|
-
- 每个图标同时提供 SVG 源文件与 React TSX 组件
|
|
57
|
-
- 完整 TypeScript 类型:IconProps、IconName、IconCategory、NAIVE_PALETTE
|
|
58
|
-
- 透明背景、无渐变、无外部字体依赖
|
|
59
|
-
- 支持 currentColor,可跟随文字颜色自动变化
|
|
60
|
-
|
|
61
|
-
## 安装
|
|
33
|
+
## Installation
|
|
62
34
|
|
|
63
35
|
```bash
|
|
64
36
|
npm install naive-icons
|
|
@@ -72,9 +44,9 @@ yarn add naive-icons
|
|
|
72
44
|
pnpm add naive-icons
|
|
73
45
|
```
|
|
74
46
|
|
|
75
|
-
Naive Icons
|
|
47
|
+
Naive Icons only depends on React and supports React 16.8 and above (including React 18 and 19).
|
|
76
48
|
|
|
77
|
-
##
|
|
49
|
+
## Quick Start
|
|
78
50
|
|
|
79
51
|
```tsx
|
|
80
52
|
import { HomeIcon, HeartIcon, PenguinIcon } from 'naive-icons';
|
|
@@ -90,39 +62,39 @@ export function Example() {
|
|
|
90
62
|
}
|
|
91
63
|
```
|
|
92
64
|
|
|
93
|
-
|
|
65
|
+
Import per icon to further reduce bundle size:
|
|
94
66
|
|
|
95
67
|
```tsx
|
|
96
68
|
import HomeIcon from 'naive-icons/src/HomeIcon';
|
|
97
69
|
```
|
|
98
70
|
|
|
99
|
-
|
|
71
|
+
Use with currentColor so icons automatically inherit the parent text color:
|
|
100
72
|
|
|
101
73
|
```tsx
|
|
102
74
|
<span style={{ color: '#264653' }}>
|
|
103
75
|
<HomeIcon size={20} />
|
|
104
|
-
|
|
76
|
+
Home
|
|
105
77
|
</span>
|
|
106
78
|
```
|
|
107
79
|
|
|
108
|
-
|
|
80
|
+
Add an accessibility title:
|
|
109
81
|
|
|
110
82
|
```tsx
|
|
111
|
-
<HomeIcon size={24} title="
|
|
83
|
+
<HomeIcon size={24} title="Back to home" />
|
|
112
84
|
```
|
|
113
85
|
|
|
114
|
-
##
|
|
86
|
+
## Component Props
|
|
115
87
|
|
|
116
|
-
Naive
|
|
88
|
+
Every Naive Icon component extends the native `SVGProps<SVGSVGElement>`, so you can pass any SVG attribute directly, such as `className`, `onClick`, or `style`.
|
|
117
89
|
|
|
118
|
-
|
|
|
90
|
+
| Prop | Type | Default | Description |
|
|
119
91
|
| --- | --- | --- | --- |
|
|
120
|
-
| size | number \| string | 24 |
|
|
121
|
-
| color | string | currentColor |
|
|
122
|
-
| strokeWidth | number \| string | 3.5 |
|
|
123
|
-
| fill | string | none |
|
|
124
|
-
| title | string | — |
|
|
125
|
-
| width / height | number \| string |
|
|
92
|
+
| size | number \| string | 24 | Icon size, equal width and height. Overrides width and height when set |
|
|
93
|
+
| color | string | currentColor | Stroke color |
|
|
94
|
+
| strokeWidth | number \| string | 3.5 | Stroke width, scaled to the 48x48 canvas |
|
|
95
|
+
| fill | string | none | Fill color |
|
|
96
|
+
| title | string | — | Accessibility title, rendered as an SVG title node |
|
|
97
|
+
| width / height | number \| string | follows size | Set width or height individually |
|
|
126
98
|
|
|
127
99
|
```typescript
|
|
128
100
|
import type { IconProps } from 'naive-icons';
|
|
@@ -136,110 +108,54 @@ interface IconProps extends SVGProps<SVGSVGElement> {
|
|
|
136
108
|
}
|
|
137
109
|
```
|
|
138
110
|
|
|
139
|
-
##
|
|
111
|
+
## Using the SVG Directly
|
|
140
112
|
|
|
141
|
-
|
|
113
|
+
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.
|
|
142
114
|
|
|
143
115
|
```html
|
|
144
|
-
<img src="naive-icons/svg/home.svg" width="24" height="24" alt="
|
|
116
|
+
<img src="naive-icons/svg/home.svg" width="24" height="24" alt="Home" />
|
|
145
117
|
```
|
|
146
118
|
|
|
147
|
-
|
|
119
|
+
To follow the surrounding text color when inlining, replace `stroke="#2A2A2A"` with `stroke="currentColor"`:
|
|
148
120
|
|
|
149
121
|
```html
|
|
150
122
|
<svg viewBox="0 0 48 48" width="24" height="24" fill="none"
|
|
151
123
|
stroke="currentColor" stroke-width="3.5"
|
|
152
124
|
stroke-linecap="round" stroke-linejoin="round">
|
|
153
|
-
<!--
|
|
125
|
+
<!-- Copy the path content from svg/home.svg -->
|
|
154
126
|
</svg>
|
|
155
127
|
```
|
|
156
128
|
|
|
157
|
-
|
|
129
|
+
You can also build an SVG sprite or icon font — the source files are simple enough to work with.
|
|
158
130
|
|
|
159
|
-
##
|
|
131
|
+
## Palette
|
|
160
132
|
|
|
161
133
|
```typescript
|
|
162
134
|
import { NAIVE_PALETTE } from 'naive-icons';
|
|
163
135
|
```
|
|
164
136
|
|
|
165
|
-
|
|
|
137
|
+
| Name | Value | Usage |
|
|
166
138
|
| --- | --- | --- |
|
|
167
|
-
| ink | #2A2A2A |
|
|
168
|
-
| navy | #264653 |
|
|
169
|
-
| orange | #E76F51 |
|
|
170
|
-
| yellow | #E9C46A |
|
|
171
|
-
| pink | #F4A6A4 |
|
|
172
|
-
| green | #588157 |
|
|
173
|
-
| teal | #2A9D8F |
|
|
174
|
-
| brown | #8B5E3C |
|
|
175
|
-
| cream | #FAEDCD |
|
|
176
|
-
|
|
177
|
-
## 图标清单
|
|
178
|
-
|
|
179
|
-
**界面基础**(18)
|
|
180
|
-
home, user, settings, search, heart, star, bell, calendar, clock, eye, bulb, tag, bookmark, menu, ellipsis, external-link, link, unlink
|
|
181
|
-
|
|
182
|
-
**操作**(15)
|
|
183
|
-
edit, trash, download, upload, save, plus, close, check, refresh, share, play, pause, stop, copy, minus
|
|
184
|
-
|
|
185
|
-
**文件与媒体**(10)
|
|
186
|
-
file, folder, image, camera, video, mic, music, code, book, headphones
|
|
187
|
-
|
|
188
|
-
**导航方位**(14)
|
|
189
|
-
location, compass, map, flag, anchor, magnet, arrow-up, arrow-down, arrow-left, arrow-right, chevron-down, chevron-up, chevron-left, chevron-right
|
|
190
|
-
|
|
191
|
-
**通信**(4)
|
|
192
|
-
mail, chat, phone, wifi
|
|
193
|
-
|
|
194
|
-
**自然天气**(14)
|
|
195
|
-
sun, moon, cloud, umbrella, tree, mountain, tent, flower, leaf, rainbow, mushroom, cactus, snowflake, flame
|
|
196
|
-
|
|
197
|
-
**动物**(14)
|
|
198
|
-
cat, dog, bird, fish, penguin, rabbit, bear, fox, owl, frog, bee, butterfly, snail, ladybug
|
|
199
|
-
|
|
200
|
-
**食物饮品**(11)
|
|
201
|
-
apple, strawberry, watermelon, cherry, lemon, cake, icecream, donut, coffee, coffee-cup, water-cup
|
|
202
|
-
|
|
203
|
-
**日常物品**(16)
|
|
204
|
-
balloon, basketball, dumbbell, lamp, candle, pencil, paintbrush, globe, google-chrome, trophy, shopping-bag, credit-card, gift, thermometer, lock, key
|
|
139
|
+
| ink | #2A2A2A | Primary stroke |
|
|
140
|
+
| navy | #264653 | Dark main body |
|
|
141
|
+
| orange | #E76F51 | Accent |
|
|
142
|
+
| yellow | #E9C46A | Warm fill |
|
|
143
|
+
| pink | #F4A6A4 | Soft fill |
|
|
144
|
+
| green | #588157 | Natural elements |
|
|
145
|
+
| teal | #2A9D8F | Secondary |
|
|
146
|
+
| brown | #8B5E3C | Wood and earth |
|
|
147
|
+
| cream | #FAEDCD | Light background |
|
|
205
148
|
|
|
206
|
-
|
|
207
|
-
car, airplane, rocket, cart, bicycle, sailboat, train
|
|
149
|
+
## Design Principles
|
|
208
150
|
|
|
209
|
-
|
|
210
|
-
smile, thumbs-up
|
|
151
|
+
Naive Icons follows four fixed rules. They should be respected when adding new icons.
|
|
211
152
|
|
|
212
|
-
|
|
153
|
+
1. **Grid & bleed**: All graphics are drawn on a 48x48 canvas, keeping at least 3 units between the main body and the canvas edge.
|
|
154
|
+
2. **Stroke**: A unified 3.5 width with round caps and joins, and no dashed lines.
|
|
155
|
+
3. **Color**: Use only the 9 colors in the palette — no gradients, shadows, or semi-transparent overlays.
|
|
156
|
+
4. **Personality**: Slight asymmetry is welcome; encourage dot eyes and a smile on living subjects to keep the hand-drawn clumsiness.
|
|
213
157
|
|
|
214
|
-
##
|
|
215
|
-
|
|
216
|
-
Naive Icons 遵循四条固定规则,新增图标时也应保持一致。
|
|
217
|
-
|
|
218
|
-
1. **网格与出血**:全部图形绘制在 48x48 画布内,主体距离画布边缘至少保留 3 个单位。
|
|
219
|
-
2. **描边**:统一 3.5 宽度,端点与转角均为 round,不使用虚线。
|
|
220
|
-
3. **配色**:只使用调色板中的 9 个颜色,不使用渐变、阴影与半透明叠加。
|
|
221
|
-
4. **性格**:允许线条轻微不对称,鼓励给有生命的图形加上圆点眼睛与微笑,保留手绘的笨拙感。
|
|
222
|
-
|
|
223
|
-
## 目录结构
|
|
224
|
-
|
|
225
|
-
```
|
|
226
|
-
naive-icons/
|
|
227
|
-
├── svg/ 125 个 SVG 源文件
|
|
228
|
-
├── src/ 125 个 React TSX 组件 + index.ts + types.ts
|
|
229
|
-
├── assets/ 品牌资源(logo)
|
|
230
|
-
├── scripts/ 图标生成与预览构建脚本
|
|
231
|
-
├── website/ 官方文档站点
|
|
232
|
-
├── dist/ 构建产物(ESM + CJS + 类型声明,不纳入版本控制)
|
|
233
|
-
├── tsup.config.ts 构建配置
|
|
234
|
-
├── tsconfig.json
|
|
235
|
-
├── LICENSE
|
|
236
|
-
├── README.md
|
|
237
|
-
├── CHANGELOG.md
|
|
238
|
-
├── CONTRIBUTING.md
|
|
239
|
-
└── package.json
|
|
240
|
-
```
|
|
241
|
-
|
|
242
|
-
## 本地开发
|
|
158
|
+
## Local Development
|
|
243
159
|
|
|
244
160
|
```bash
|
|
245
161
|
git clone https://github.com/guokaigdg/naive-icons.git
|
|
@@ -247,45 +163,33 @@ cd naive-icons
|
|
|
247
163
|
npm install
|
|
248
164
|
```
|
|
249
165
|
|
|
250
|
-
|
|
166
|
+
Common scripts:
|
|
251
167
|
|
|
252
168
|
```bash
|
|
253
|
-
npm run build #
|
|
254
|
-
npm run dev #
|
|
255
|
-
npm run typecheck #
|
|
256
|
-
npm run website #
|
|
257
|
-
npm run icons:build #
|
|
258
|
-
npm run icons:add #
|
|
169
|
+
npm run build # Build dist with tsup (ESM + CJS + type declarations)
|
|
170
|
+
npm run dev # Watch mode build
|
|
171
|
+
npm run typecheck # Type check
|
|
172
|
+
npm run website # Preview the site locally (Python static server, port 8080)
|
|
173
|
+
npm run icons:build # Regenerate SVG and TSX from script definitions
|
|
174
|
+
npm run icons:add # Incrementally add icons without overwriting existing files
|
|
259
175
|
```
|
|
260
176
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
构建产物为 `dist/index.mjs`(ESM)、`dist/index.js`(CJS)与 `dist/index.d.ts` / `dist/index.d.mts`(类型声明),`package.json` 的 `exports` 已按 `import` / `require` 条件分别指向对应文件。React 被声明为 external,不会被打进产物。
|
|
177
|
+
`prepublishOnly` runs the build automatically on publish, so there is no need to run `npm run build` manually.
|
|
264
178
|
|
|
265
|
-
|
|
179
|
+
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.
|
|
266
180
|
|
|
267
|
-
|
|
181
|
+
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.
|
|
268
182
|
|
|
269
|
-
|
|
183
|
+
## Browser Support
|
|
270
184
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
```bash
|
|
274
|
-
python3 scripts/subset_fonts.py
|
|
275
|
-
```
|
|
276
|
-
|
|
277
|
-
依赖 `fonttools` 与 `brotli`:
|
|
278
|
-
|
|
279
|
-
```bash
|
|
280
|
-
pip install fonttools brotli
|
|
281
|
-
```
|
|
185
|
+
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.
|
|
282
186
|
|
|
283
|
-
##
|
|
187
|
+
## License
|
|
284
188
|
|
|
285
|
-
|
|
189
|
+
MIT License. See [LICENSE](./LICENSE).
|
|
286
190
|
|
|
287
|
-
|
|
191
|
+
All icons are original works, free to use in personal and commercial projects without attribution.
|
|
288
192
|
|
|
289
|
-
|
|
193
|
+
## Sponsor
|
|
290
194
|
|
|
291
|
-
|
|
195
|
+
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
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
<h1>Naive Icons</h1>
|
|
2
|
+
|
|
3
|
+
<p align="right">
|
|
4
|
+
<a href="./README.md">English</a> | 中文
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<img src="assets/logo.svg" alt="Naive Icons" width="132" height="132">
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<p align="center">手绘 naive folk art 风格的 SVG 图标库,为 React 与 TypeScript 打造</p>
|
|
12
|
+
|
|
13
|
+
<p align="center">
|
|
14
|
+
<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>
|
|
15
|
+
<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>
|
|
16
|
+
<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>
|
|
17
|
+
<a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-264653?style=flat-square" alt="license: MIT"></a>
|
|
18
|
+
<br/>
|
|
19
|
+
<img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black" alt="React">
|
|
20
|
+
<img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript">
|
|
21
|
+
<img src="https://img.shields.io/badge/SVG-FFB13B?style=flat-square&logoColor=black" alt="SVG">
|
|
22
|
+
</p>
|
|
23
|
+
|
|
24
|
+
每一个图标都建立在 48x48 的网格上,使用 3.5 的粗描边、圆角线帽与统一的复古调色板,并保留了手绘插画特有的笨拙感与温度——部分图标还带有一对小圆点眼睛和微笑,让界面多一点点人情味。
|
|
25
|
+
|
|
26
|
+
## 特性
|
|
27
|
+
|
|
28
|
+
- 图标覆盖界面、操作、媒体、导航、动物、食物等 11 个分类
|
|
29
|
+
- 每个图标同时提供 SVG 源文件与 React TSX 组件
|
|
30
|
+
- 完整 TypeScript 类型:IconProps、IconName、IconCategory、NAIVE_PALETTE
|
|
31
|
+
- 支持 currentColor,可跟随文字颜色自动变化
|
|
32
|
+
|
|
33
|
+
## 安装
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm install naive-icons
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
yarn add naive-icons
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
pnpm add naive-icons
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Naive Icons 只依赖 React,支持 React 16.8 及以上版本(含 React 18 与 19)。
|
|
48
|
+
|
|
49
|
+
## 快速开始
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { HomeIcon, HeartIcon, PenguinIcon } from 'naive-icons';
|
|
53
|
+
|
|
54
|
+
export function Example() {
|
|
55
|
+
return (
|
|
56
|
+
<nav>
|
|
57
|
+
<HomeIcon size={24} />
|
|
58
|
+
<HeartIcon size={24} color="#E76F51" />
|
|
59
|
+
<PenguinIcon size={48} strokeWidth={4} />
|
|
60
|
+
</nav>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
按需引入可以进一步减小打包体积:
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import HomeIcon from 'naive-icons/src/HomeIcon';
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
配合 currentColor 使用,图标会自动继承父级文字颜色:
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
<span style={{ color: '#264653' }}>
|
|
75
|
+
<HomeIcon size={20} />
|
|
76
|
+
首页
|
|
77
|
+
</span>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
添加无障碍标题:
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
<HomeIcon size={24} title="返回首页" />
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## 组件属性
|
|
87
|
+
|
|
88
|
+
Naive Icons 的每个组件都继承原生 `SVGProps<SVGSVGElement>`,可以直接传入 `className`、`onClick`、`style` 等任意 SVG 属性。
|
|
89
|
+
|
|
90
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
91
|
+
| --- | --- | --- | --- |
|
|
92
|
+
| size | number \| string | 24 | 图标尺寸,宽高相等。传入后覆盖 width 与 height |
|
|
93
|
+
| color | string | currentColor | 描边颜色 |
|
|
94
|
+
| strokeWidth | number \| string | 3.5 | 描边宽度,按 48x48 画布比例缩放 |
|
|
95
|
+
| fill | string | none | 填充色 |
|
|
96
|
+
| title | string | — | 无障碍标题,渲染为 SVG title 节点 |
|
|
97
|
+
| width / height | number \| string | 跟随 size | 单独指定宽或高 |
|
|
98
|
+
|
|
99
|
+
```typescript
|
|
100
|
+
import type { IconProps } from 'naive-icons';
|
|
101
|
+
|
|
102
|
+
interface IconProps extends SVGProps<SVGSVGElement> {
|
|
103
|
+
size?: number | string;
|
|
104
|
+
color?: string;
|
|
105
|
+
strokeWidth?: number | string;
|
|
106
|
+
fill?: string;
|
|
107
|
+
title?: string;
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## 直接使用 SVG
|
|
112
|
+
|
|
113
|
+
如果项目不是 React,可以直接使用 `svg/` 目录下的源文件。所有 SVG 都是自包含的,没有外部引用。
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<img src="naive-icons/svg/home.svg" width="24" height="24" alt="首页" />
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
内联使用时,把 `stroke="#2A2A2A"` 替换为 `stroke="currentColor"` 即可跟随文字颜色:
|
|
120
|
+
|
|
121
|
+
```html
|
|
122
|
+
<svg viewBox="0 0 48 48" width="24" height="24" fill="none"
|
|
123
|
+
stroke="currentColor" stroke-width="3.5"
|
|
124
|
+
stroke-linecap="round" stroke-linejoin="round">
|
|
125
|
+
<!-- 复制 svg/home.svg 中的 path 内容 -->
|
|
126
|
+
</svg>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
也可以做成 SVG sprite 或 Icon Font,源文件结构足够简单,便于二次加工。
|
|
130
|
+
|
|
131
|
+
## 调色板
|
|
132
|
+
|
|
133
|
+
```typescript
|
|
134
|
+
import { NAIVE_PALETTE } from 'naive-icons';
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
| 名称 | 色值 | 用途 |
|
|
138
|
+
| --- | --- | --- |
|
|
139
|
+
| ink | #2A2A2A | 主描边色 |
|
|
140
|
+
| navy | #264653 | 深色主体 |
|
|
141
|
+
| orange | #E76F51 | 强调色 |
|
|
142
|
+
| yellow | #E9C46A | 暖色填充 |
|
|
143
|
+
| pink | #F4A6A4 | 柔和填充 |
|
|
144
|
+
| green | #588157 | 自然元素 |
|
|
145
|
+
| teal | #2A9D8F | 辅助色 |
|
|
146
|
+
| brown | #8B5E3C | 木质与土地 |
|
|
147
|
+
| cream | #FAEDCD | 浅色底 |
|
|
148
|
+
|
|
149
|
+
## 设计原则
|
|
150
|
+
|
|
151
|
+
Naive Icons 遵循四条固定规则,新增图标时也应保持一致。
|
|
152
|
+
|
|
153
|
+
1. **网格与出血**:全部图形绘制在 48x48 画布内,主体距离画布边缘至少保留 3 个单位。
|
|
154
|
+
2. **描边**:统一 3.5 宽度,端点与转角均为 round,不使用虚线。
|
|
155
|
+
3. **配色**:只使用调色板中的 9 个颜色,不使用渐变、阴影与半透明叠加。
|
|
156
|
+
4. **性格**:允许线条轻微不对称,鼓励给有生命的图形加上圆点眼睛与微笑,保留手绘的笨拙感。
|
|
157
|
+
|
|
158
|
+
## 本地开发
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
git clone https://github.com/guokaigdg/naive-icons.git
|
|
162
|
+
cd naive-icons
|
|
163
|
+
npm install
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
常用脚本:
|
|
167
|
+
|
|
168
|
+
```bash
|
|
169
|
+
npm run build # 用 tsup 构建 dist(ESM + CJS + 类型声明)
|
|
170
|
+
npm run dev # 监听模式构建
|
|
171
|
+
npm run typecheck # 类型检查
|
|
172
|
+
npm run website # 本地预览官网(Python 静态服务器,端口 8080)
|
|
173
|
+
npm run icons:build # 依据 scripts 中的定义重新生成 SVG 与 TSX
|
|
174
|
+
npm run icons:add # 增量新增图标,不覆盖已有文件
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
发布时 `prepublishOnly` 会自动执行构建,无需手动运行 `npm run build`。
|
|
178
|
+
|
|
179
|
+
构建产物为 `dist/index.mjs`(ESM)、`dist/index.js`(CJS)与 `dist/index.d.ts` / `dist/index.d.mts`(类型声明),`package.json` 的 `exports` 已按 `import` / `require` 条件分别指向对应文件。React 被声明为 external,不会被打进产物。
|
|
180
|
+
|
|
181
|
+
官网是纯静态站点(无构建、无依赖),直接打开 `website/index.html` 也能用:浏览全部图标、按分类筛选、搜索、实时调整尺寸与描边颜色、切换浅色/深色/网格预览底,点击任意图标可查看 React 用法、复制代码或下载 SVG。支持浅色 / 深色主题(跟随系统、可手动切换并记忆),弹窗内可用方向键连续切换图标。
|
|
182
|
+
|
|
183
|
+
## 浏览器支持
|
|
184
|
+
|
|
185
|
+
Naive Icons 输出的是标准 SVG 1.1,支持所有现代浏览器(Chrome、Firefox、Safari、Edge 最近两个大版本)。React 组件不含任何浏览器专有 API,可在服务端渲染环境中安全使用。
|
|
186
|
+
|
|
187
|
+
## 许可证
|
|
188
|
+
|
|
189
|
+
MIT License。详见 [LICENSE](./LICENSE)。
|
|
190
|
+
|
|
191
|
+
全部图标均为原创作品,可自由用于个人与商业项目,无需署名。
|
|
192
|
+
|
|
193
|
+
## 赞助
|
|
194
|
+
|
|
195
|
+
如果这个项目对你有帮助,不妨请开发者的猫吃个罐罐——毕竟每个图标背后都有一只猫在监督代码。<a href="https://guokaigdg.github.io/home/payment.html">请猫吃个罐罐</a>
|
package/dist/index.d.mts
CHANGED
|
@@ -17,6 +17,10 @@ interface IconProps extends SVGProps<SVGSVGElement> {
|
|
|
17
17
|
|
|
18
18
|
declare const AirplaneIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
19
19
|
|
|
20
|
+
declare const AlertCircleIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
21
|
+
|
|
22
|
+
declare const AlertTriangleIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
23
|
+
|
|
20
24
|
declare const AnchorIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
21
25
|
|
|
22
26
|
declare const AppleIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
@@ -71,6 +75,8 @@ declare const ChatIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> &
|
|
|
71
75
|
|
|
72
76
|
declare const CheckIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
73
77
|
|
|
78
|
+
declare const CheckCircleIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
79
|
+
|
|
74
80
|
declare const CherryIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
75
81
|
|
|
76
82
|
declare const ChevronDownIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
@@ -115,6 +121,8 @@ declare const ExternalLinkIcon: react.ForwardRefExoticComponent<Omit<IconProps,
|
|
|
115
121
|
|
|
116
122
|
declare const EyeIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
117
123
|
|
|
124
|
+
declare const EyeOffIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
125
|
+
|
|
118
126
|
declare const FileIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
119
127
|
|
|
120
128
|
declare const FishIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
@@ -141,12 +149,16 @@ declare const HeadphonesIcon: react.ForwardRefExoticComponent<Omit<IconProps, "r
|
|
|
141
149
|
|
|
142
150
|
declare const HeartIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
143
151
|
|
|
152
|
+
declare const HelpCircleIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
153
|
+
|
|
144
154
|
declare const HomeIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
145
155
|
|
|
146
156
|
declare const IcecreamIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
147
157
|
|
|
148
158
|
declare const ImageIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
149
159
|
|
|
160
|
+
declare const InfoIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
161
|
+
|
|
150
162
|
declare const KeyIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
151
163
|
|
|
152
164
|
declare const LadybugIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
@@ -163,6 +175,8 @@ declare const LocationIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref
|
|
|
163
175
|
|
|
164
176
|
declare const LockIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
165
177
|
|
|
178
|
+
declare const LockOpenIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
179
|
+
|
|
166
180
|
declare const MagnetIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
167
181
|
|
|
168
182
|
declare const MailIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
@@ -225,6 +239,8 @@ declare const SnailIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref">
|
|
|
225
239
|
|
|
226
240
|
declare const SnowflakeIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
227
241
|
|
|
242
|
+
declare const SpinnerIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
243
|
+
|
|
228
244
|
declare const StarIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
229
245
|
|
|
230
246
|
declare const StopIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
@@ -265,4 +281,6 @@ declare const WatermelonIcon: react.ForwardRefExoticComponent<Omit<IconProps, "r
|
|
|
265
281
|
|
|
266
282
|
declare const WifiIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
267
283
|
|
|
268
|
-
|
|
284
|
+
declare const XCircleIcon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
285
|
+
|
|
286
|
+
export { AirplaneIcon, AlertCircleIcon, AlertTriangleIcon, AnchorIcon, AppleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BalloonIcon, BasketballIcon, BearIcon, BeeIcon, BellIcon, BicycleIcon, BirdIcon, BookIcon, BookmarkIcon, BulbIcon, ButterflyIcon, CactusIcon, CakeIcon, CalendarIcon, CameraIcon, CandleIcon, CarIcon, CartIcon, CatIcon, ChatIcon, CheckCircleIcon, CheckIcon, CherryIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, CloseIcon, CloudIcon, CodeIcon, CoffeeCupIcon, CoffeeIcon, CompassIcon, CopyIcon, CreditCardIcon, DogIcon, DonutIcon, DownloadIcon, DumbbellIcon, EditIcon, EllipsisIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FishIcon, FlagIcon, FlameIcon, FlowerIcon, FolderIcon, FoxIcon, FrogIcon, GiftIcon, GlobeIcon, GoogleChromeIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HomeIcon, IcecreamIcon, ImageIcon, InfoIcon, KeyIcon, LadybugIcon, LampIcon, LeafIcon, LemonIcon, LinkIcon, LocationIcon, LockIcon, LockOpenIcon, MagnetIcon, MailIcon, MapIcon, MenuIcon, MicIcon, MinusIcon, MoonIcon, MountainIcon, MushroomIcon, MusicIcon, OwlIcon, PaintbrushIcon, PauseIcon, PencilIcon, PenguinIcon, PhoneIcon, PlayIcon, PlusIcon, RabbitIcon, RainbowIcon, RefreshIcon, RocketIcon, SailboatIcon, SaveIcon, SearchIcon, SettingsIcon, ShareIcon, ShoppingBagIcon, SmileIcon, SnailIcon, SnowflakeIcon, SpinnerIcon, StarIcon, StopIcon, StrawberryIcon, SunIcon, TagIcon, TentIcon, ThermometerIcon, ThumbsUpIcon, TrainIcon, TrashIcon, TreeIcon, TrophyIcon, UmbrellaIcon, UnlinkIcon, UploadIcon, UserIcon, VideoIcon, WaterCupIcon, WatermelonIcon, WifiIcon, XCircleIcon };
|