naive-icons 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -4,19 +4,27 @@
 
 ## Unreleased
 
-官方文档站点重构。图标与组件产物无任何变更。
+官方文档站点重构，并新增 4 个方向键图标。
 
 改进
 
 - 官网三层（HTML / CSS / JS）完全重写：语义化标签、统一的设计令牌体系（间距 4px 基数、圆角与阴影尺度）、清除模板导出的冗余属性
 - 信息架构收敛：原先并列的 4 个代码面板合并为「安装 / React / SVG / TypeScript」标签页，调色板与设计原则合并为「设计规范」一节
 - 视觉基调改为温暖手绘：纸张颗粒纹理、暖调深色模式、手绘分隔线，浅色与深色主题均可手动切换并记忆
+- 新增 4 个方向键图标：上（arrow-up）、下（arrow-down）、左（arrow-left）、右（arrow-right），与已有的关闭（close）图标组成基础方向/操作图标组；同步更新 `index.ts`、`types.ts`、`svg/` 与官网数据
 - 引入 LXGW 悠哉字体（OFL，自托管子集化，仅 715 个字符 ≈ 170KB ×2 个字重）作为网站字体；图标库本体仍无任何字体/资源依赖
 - 图标浏览器工具栏在宽屏下吸顶，新增分类结果计数、搜索清空、描边快捷色板与自定义取色器
 - 预览切换深色底时，若描边仍为默认墨黑会自动换成奶油色，避免图标不可见；用户显式选择的颜色不会被改写
 - 详情弹窗支持键盘方向键连续切换图标，打开时背景内容设为 inert
 - 无障碍补强：skip link、aria-live 结果计数、标签页方向键切换、焦点归还
 
+## 1.0.2
+
+修复
+
+- 修复组件不传 `size` 时没有明确尺寸的问题：`normalizeIconProps` 现在始终向 svg 写入 `width` / `height`，默认 24，保证 `<HomeIcon />` 也有稳定的 24px 尺寸
+- 顺手补上默认 `fill="none"`，避免与 SVG 内部已有的 `fill` 属性在覆盖时产生歧义
+
 ## 1.0.1
 
 修复
@@ -29,7 +37,7 @@
 
 新增
 
-- 101 个手绘 naive folk art 风格 SVG 图标，覆盖界面基础、操作、文件与媒体、导航方位、通信、自然天气、动物、食物饮品、日常物品、交通工具、表情共 11 个分类
+- 105 个手绘 naive folk art 风格 SVG 图标，覆盖界面基础、操作、文件与媒体、导航方位、通信、自然天气、动物、食物饮品、日常物品、交通工具、表情共 11 个分类
 - 每个图标同时提供 SVG 源文件与 React TSX 组件
 - 完整 TypeScript 类型定义：IconProps、IconName、IconCategory、PaletteColor、NAIVE_PALETTE
 - 统一规格：48x48 viewBox、3.5 描边宽度、round 线帽与线角

package/README.en.md

@@ -1,3 +1,5 @@
+<h1>Naive Icons</h1>
+
 <p align="right">
   <a href="./README.md">中文</a> | <a href="./README.en.md">English</a>
 </p>
@@ -6,15 +8,25 @@
   <img src="assets/logo.svg" alt="Naive Icons" width="132" height="132">
 </p>
 
-<h1 align="center">Naive Icons</h1>
-
 <p align="center">Hand-drawn "naive folk art" style SVG icon library, built for React and TypeScript</p>
 
-Naive Icons is a hand-drawn SVG icon library with a naive folk art style, built for React and TypeScript. All 101 icons are AI-generated original works.
+<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>
+
+
+Naive Icons is a hand-drawn SVG icon library with a naive folk art style, built for React and TypeScript. All 105 icons are AI-generated original works.
 
 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.
 
-- Icon count: 101
+- Icon count: 105
 - Per-icon size: roughly 400–700 bytes
 - Dependencies: zero runtime dependencies, React as a peer dependency only
 - License: MIT
@@ -36,7 +48,7 @@ Each icon is drawn on a 48x48 grid with a 3.5 stroke, rounded line caps, and a u
 
 ## Features
 
-- 101 original hand-drawn SVG icons spanning 11 categories: interface, actions, media, navigation, animals, food, and more
+- 105 original hand-drawn SVG icons spanning 11 categories: interface, actions, media, navigation, animals, food, and more
 - Unified spec: 48x48 viewBox, 3.5 stroke width, round line caps and joins
 - Unified palette: 9 retro colors, usable directly as design tokens
 - Some icons feature dot eyes and a little smile for a highly recognizable style
@@ -211,8 +223,8 @@ Naive Icons follows four fixed rules. They should be respected when adding new i
 
 ```
 naive-icons/
-├── svg/                 101 SVG source files
-├── src/                 101 React TSX components + index.ts + types.ts
+├── svg/                 105 SVG source files
+├── src/                 105 React TSX components + index.ts + types.ts
 ├── assets/              Brand assets (logo)
 ├── scripts/             Icon generation and preview build scripts
 ├── website/             Official documentation site

package/README.md

@@ -1,3 +1,6 @@
+
+<h1>Naive Icons</h1>
+
 <p align="right">
   <a href="./README.md">中文</a> | <a href="./README.en.md">English</a>
 </p>
@@ -6,15 +9,25 @@
   <img src="assets/logo.svg" alt="Naive Icons" width="132" height="132">
 </p>
 
-<h1 align="center">Naive Icons</h1>
 
 <p align="center">手绘 naive folk art 风格的 SVG 图标库，为 React 与 TypeScript 打造</p>
 
-Naive Icons 是一套手绘 naive folk art 风格的 SVG 图标库，为 React 与 TypeScript 打造。全部 101 个图标由 AI 生成，均为原创作品。
+<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>
+
+Naive Icons 是一套手绘 naive folk art 风格的 SVG 图标库，为 React 与 TypeScript 打造。全部 105 个图标由 AI 生成，均为原创作品。
 
 每一个图标都建立在 48x48 的网格上，使用 3.5 的粗描边、圆角线帽与统一的复古调色板，并保留了手绘插画特有的笨拙感与温度——部分图标还带有一对小圆点眼睛和微笑，让界面多一点点人情味。
 
-- 图标数量：101
+- 图标数量：105
 - 单个体积：约 400 至 700 字节
 - 依赖：零运行时依赖，仅 peer 依赖 React
 - 许可证：MIT
@@ -36,7 +49,7 @@ Naive Icons 是一套手绘 naive folk art 风格的 SVG 图标库，为 React
 
 ## 特性
 
-- 101 个手绘风格的原创 SVG 图标，覆盖界面、操作、媒体、导航、动物、食物等 11 个分类
+- 105 个手绘风格的原创 SVG 图标，覆盖界面、操作、媒体、导航、动物、食物等 11 个分类
 - 统一规格：48x48 viewBox、3.5 描边宽度、round 线帽与线角
 - 统一调色板：9 色复古配色，可作为设计令牌直接引用
 - 部分图标带有圆点眼睛与微笑表情，风格辨识度高
@@ -211,8 +224,8 @@ Naive Icons 遵循四条固定规则，新增图标时也应保持一致。
 
 ```
 naive-icons/
-├── svg/                 101 个 SVG 源文件
-├── src/                 101 个 React TSX 组件 + index.ts + types.ts
+├── svg/                 105 个 SVG 源文件
+├── src/                 105 个 React TSX 组件 + index.ts + types.ts
 ├── assets/              品牌资源（logo）
 ├── scripts/             图标生成与预览构建脚本
 ├── website/             官方文档站点

package/dist/index.d.mts

@@ -1,21 +1,12 @@
 import * as react from 'react';
 import { SVGProps, FC } from 'react';
 
-/** Naive Icons 所有图标的通用 Props（继承原生 SVG 属性） */
+/** 所有图标的通用 Props（继承原生 SVG 属性） */
 interface IconProps extends SVGProps<SVGSVGElement> {
-    /** 图标尺寸，宽高相等，默认 24 */
+    /** 图标尺寸（宽高等同），默认 48 */
     size?: number | string;
-    /** 描边颜色，默认 currentColor */
-    color?: string;
-    /** 描边宽度，默认 3.5（相对 48x48 画布） */
-    strokeWidth?: number | string;
-    /** 填充色，默认 none */
-    fill?: string;
-    /** 无障碍标题 */
-    title?: string;
 }
-
-/** Naive Icons 调色板 */
+/** naive 风格调色板 */
 declare const NAIVE_PALETTE: {
     readonly ink: "#2A2A2A";
     readonly navy: "#264653";
@@ -28,13 +19,10 @@ declare const NAIVE_PALETTE: {
     readonly cream: "#FAEDCD";
 };
 type PaletteColor = keyof typeof NAIVE_PALETTE;
-/** Naive Icons 图标组件名（共 101 个） */
-type IconName = 'AirplaneIcon' | 'AnchorIcon' | 'AppleIcon' | 'BalloonIcon' | 'BearIcon' | 'BeeIcon' | 'BellIcon' | 'BicycleIcon' | 'BirdIcon' | 'BookIcon' | 'BookmarkIcon' | 'BulbIcon' | 'ButterflyIcon' | 'CactusIcon' | 'CakeIcon' | 'CalendarIcon' | 'CameraIcon' | 'CandleIcon' | 'CarIcon' | 'CartIcon' | 'CatIcon' | 'ChatIcon' | 'CheckIcon' | 'CherryIcon' | 'ClockIcon' | 'CloseIcon' | 'CloudIcon' | 'CodeIcon' | 'CoffeeIcon' | 'CompassIcon' | 'CreditCardIcon' | 'DogIcon' | 'DonutIcon' | 'DownloadIcon' | 'EditIcon' | 'EyeIcon' | 'FileIcon' | 'FishIcon' | 'FlagIcon' | 'FlameIcon' | 'FlowerIcon' | 'FolderIcon' | 'FoxIcon' | 'FrogIcon' | 'GiftIcon' | 'GlobeIcon' | 'HeadphonesIcon' | 'HeartIcon' | 'HomeIcon' | 'IcecreamIcon' | 'ImageIcon' | 'KeyIcon' | 'LadybugIcon' | 'LampIcon' | 'LeafIcon' | 'LemonIcon' | 'LocationIcon' | 'LockIcon' | 'MagnetIcon' | 'MailIcon' | 'MapIcon' | 'MicIcon' | 'MoonIcon' | 'MushroomIcon' | 'MusicIcon' | 'OwlIcon' | 'PaintbrushIcon' | 'PencilIcon' | 'PenguinIcon' | 'PhoneIcon' | 'PlayIcon' | 'PlusIcon' | 'RabbitIcon' | 'RainbowIcon' | 'RefreshIcon' | 'RocketIcon' | 'SailboatIcon' | 'SaveIcon' | 'SearchIcon' | 'SettingsIcon' | 'ShareIcon' | 'ShoppingBagIcon' | 'SmileIcon' | 'SnailIcon' | 'SnowflakeIcon' | 'StarIcon' | 'StrawberryIcon' | 'SunIcon' | 'TagIcon' | 'ThermometerIcon' | 'ThumbsUpIcon' | 'TrainIcon' | 'TrashIcon' | 'TreeIcon' | 'TrophyIcon' | 'UmbrellaIcon' | 'UploadIcon' | 'UserIcon' | 'VideoIcon' | 'WatermelonIcon' | 'WifiIcon';
-/** Naive Icons 图标组件类型 */
+/** 所有图标组件名（共 105 个） */
+type IconName = 'AirplaneIconIcon' | 'AnchorIconIcon' | 'AppleIconIcon' | 'ArrowDownIconIcon' | 'ArrowLeftIconIcon' | 'ArrowRightIconIcon' | 'ArrowUpIconIcon' | 'BalloonIconIcon' | 'BearIconIcon' | 'BeeIconIcon' | 'BellIconIcon' | 'BicycleIconIcon' | 'BirdIconIcon' | 'BookIconIcon' | 'BookmarkIconIcon' | 'BulbIconIcon' | 'ButterflyIconIcon' | 'CactusIconIcon' | 'CakeIconIcon' | 'CalendarIconIcon' | 'CameraIconIcon' | 'CandleIconIcon' | 'CarIconIcon' | 'CartIconIcon' | 'CatIconIcon' | 'ChatIconIcon' | 'CheckIconIcon' | 'CherryIconIcon' | 'ClockIconIcon' | 'CloseIconIcon' | 'CloudIconIcon' | 'CodeIconIcon' | 'CoffeeIconIcon' | 'CompassIconIcon' | 'CreditCardIconIcon' | 'DogIconIcon' | 'DonutIconIcon' | 'DownloadIconIcon' | 'EditIconIcon' | 'EyeIconIcon' | 'FileIconIcon' | 'FishIconIcon' | 'FlagIconIcon' | 'FlameIconIcon' | 'FlowerIconIcon' | 'FolderIconIcon' | 'FoxIconIcon' | 'FrogIconIcon' | 'GiftIconIcon' | 'GlobeIconIcon' | 'HeadphonesIconIcon' | 'HeartIconIcon' | 'HomeIconIcon' | 'IcecreamIconIcon' | 'ImageIconIcon' | 'KeyIconIcon' | 'LadybugIconIcon' | 'LampIconIcon' | 'LeafIconIcon' | 'LemonIconIcon' | 'LocationIconIcon' | 'LockIconIcon' | 'MagnetIconIcon' | 'MailIconIcon' | 'MapIconIcon' | 'MicIconIcon' | 'MoonIconIcon' | 'MushroomIconIcon' | 'MusicIconIcon' | 'OwlIconIcon' | 'PaintbrushIconIcon' | 'PencilIconIcon' | 'PenguinIconIcon' | 'PhoneIconIcon' | 'PlayIconIcon' | 'PlusIconIcon' | 'RabbitIconIcon' | 'RainbowIconIcon' | 'RefreshIconIcon' | 'RocketIconIcon' | 'SailboatIconIcon' | 'SaveIconIcon' | 'SearchIconIcon' | 'SettingsIconIcon' | 'ShareIconIcon' | 'ShoppingBagIconIcon' | 'SmileIconIcon' | 'SnailIconIcon' | 'SnowflakeIconIcon' | 'StarIconIcon' | 'StrawberryIconIcon' | 'SunIconIcon' | 'TagIconIcon' | 'ThermometerIconIcon' | 'ThumbsUpIconIcon' | 'TrainIconIcon' | 'TrashIconIcon' | 'TreeIconIcon' | 'TrophyIconIcon' | 'UmbrellaIconIcon' | 'UploadIconIcon' | 'UserIconIcon' | 'VideoIconIcon' | 'WatermelonIconIcon' | 'WifiIconIcon';
+/** 图标组件类型 */
 type IconComponent = FC<IconProps>;
-/** Naive Icons 图标分类 */
-declare const ICON_CATEGORIES: readonly ["interface", "action", "media", "navigation", "communication", "nature", "animals", "food", "objects", "transport", "emoji"];
-type IconCategory = (typeof ICON_CATEGORIES)[number];
 
 declare const AirplaneIcon: (props: IconProps) => react.JSX.Element;
 
@@ -42,6 +30,14 @@ declare const AnchorIcon: (props: IconProps) => react.JSX.Element;
 
 declare const AppleIcon: (props: IconProps) => react.JSX.Element;
 
+declare const ArrowDownIcon: (props: IconProps) => react.JSX.Element;
+
+declare const ArrowLeftIcon: (props: IconProps) => react.JSX.Element;
+
+declare const ArrowRightIcon: (props: IconProps) => react.JSX.Element;
+
+declare const ArrowUpIcon: (props: IconProps) => react.JSX.Element;
+
 declare const BalloonIcon: (props: IconProps) => react.JSX.Element;
 
 declare const BearIcon: (props: IconProps) => react.JSX.Element;
@@ -238,4 +234,4 @@ declare const WatermelonIcon: (props: IconProps) => react.JSX.Element;
 
 declare const WifiIcon: (props: IconProps) => react.JSX.Element;
 
-export { AirplaneIcon, AnchorIcon, AppleIcon, BalloonIcon, BearIcon, BeeIcon, BellIcon, BicycleIcon, BirdIcon, BookIcon, BookmarkIcon, BulbIcon, ButterflyIcon, CactusIcon, CakeIcon, CalendarIcon, CameraIcon, CandleIcon, CarIcon, CartIcon, CatIcon, ChatIcon, CheckIcon, CherryIcon, ClockIcon, CloseIcon, CloudIcon, CodeIcon, CoffeeIcon, CompassIcon, CreditCardIcon, DogIcon, DonutIcon, DownloadIcon, EditIcon, EyeIcon, FileIcon, FishIcon, FlagIcon, FlameIcon, FlowerIcon, FolderIcon, FoxIcon, FrogIcon, GiftIcon, GlobeIcon, HeadphonesIcon, HeartIcon, HomeIcon, ICON_CATEGORIES, IcecreamIcon, type IconCategory, type IconComponent, type IconName, type IconProps, ImageIcon, KeyIcon, LadybugIcon, LampIcon, LeafIcon, LemonIcon, LocationIcon, LockIcon, MagnetIcon, MailIcon, MapIcon, MicIcon, MoonIcon, MushroomIcon, MusicIcon, NAIVE_PALETTE, OwlIcon, PaintbrushIcon, type PaletteColor, PencilIcon, PenguinIcon, PhoneIcon, PlayIcon, PlusIcon, RabbitIcon, RainbowIcon, RefreshIcon, RocketIcon, SailboatIcon, SaveIcon, SearchIcon, SettingsIcon, ShareIcon, ShoppingBagIcon, SmileIcon, SnailIcon, SnowflakeIcon, StarIcon, StrawberryIcon, SunIcon, TagIcon, ThermometerIcon, ThumbsUpIcon, TrainIcon, TrashIcon, TreeIcon, TrophyIcon, UmbrellaIcon, UploadIcon, UserIcon, VideoIcon, WatermelonIcon, WifiIcon };
+export { AirplaneIcon, AnchorIcon, AppleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BalloonIcon, BearIcon, BeeIcon, BellIcon, BicycleIcon, BirdIcon, BookIcon, BookmarkIcon, BulbIcon, ButterflyIcon, CactusIcon, CakeIcon, CalendarIcon, CameraIcon, CandleIcon, CarIcon, CartIcon, CatIcon, ChatIcon, CheckIcon, CherryIcon, ClockIcon, CloseIcon, CloudIcon, CodeIcon, CoffeeIcon, CompassIcon, CreditCardIcon, DogIcon, DonutIcon, DownloadIcon, EditIcon, EyeIcon, FileIcon, FishIcon, FlagIcon, FlameIcon, FlowerIcon, FolderIcon, FoxIcon, FrogIcon, GiftIcon, GlobeIcon, HeadphonesIcon, HeartIcon, HomeIcon, IcecreamIcon, type IconComponent, type IconName, type IconProps, ImageIcon, KeyIcon, LadybugIcon, LampIcon, LeafIcon, LemonIcon, LocationIcon, LockIcon, MagnetIcon, MailIcon, MapIcon, MicIcon, MoonIcon, MushroomIcon, MusicIcon, NAIVE_PALETTE, OwlIcon, PaintbrushIcon, type PaletteColor, PencilIcon, PenguinIcon, PhoneIcon, PlayIcon, PlusIcon, RabbitIcon, RainbowIcon, RefreshIcon, RocketIcon, SailboatIcon, SaveIcon, SearchIcon, SettingsIcon, ShareIcon, ShoppingBagIcon, SmileIcon, SnailIcon, SnowflakeIcon, StarIcon, StrawberryIcon, SunIcon, TagIcon, ThermometerIcon, ThumbsUpIcon, TrainIcon, TrashIcon, TreeIcon, TrophyIcon, UmbrellaIcon, UploadIcon, UserIcon, VideoIcon, WatermelonIcon, WifiIcon };

package/dist/index.d.ts

@@ -1,21 +1,12 @@
 import * as react from 'react';
 import { SVGProps, FC } from 'react';
 
-/** Naive Icons 所有图标的通用 Props（继承原生 SVG 属性） */
+/** 所有图标的通用 Props（继承原生 SVG 属性） */
 interface IconProps extends SVGProps<SVGSVGElement> {
-    /** 图标尺寸，宽高相等，默认 24 */
+    /** 图标尺寸（宽高等同），默认 48 */
     size?: number | string;
-    /** 描边颜色，默认 currentColor */
-    color?: string;
-    /** 描边宽度，默认 3.5（相对 48x48 画布） */
-    strokeWidth?: number | string;
-    /** 填充色，默认 none */
-    fill?: string;
-    /** 无障碍标题 */
-    title?: string;
 }
-
-/** Naive Icons 调色板 */
+/** naive 风格调色板 */
 declare const NAIVE_PALETTE: {
     readonly ink: "#2A2A2A";
     readonly navy: "#264653";
@@ -28,13 +19,10 @@ declare const NAIVE_PALETTE: {
     readonly cream: "#FAEDCD";
 };
 type PaletteColor = keyof typeof NAIVE_PALETTE;
-/** Naive Icons 图标组件名（共 101 个） */
-type IconName = 'AirplaneIcon' | 'AnchorIcon' | 'AppleIcon' | 'BalloonIcon' | 'BearIcon' | 'BeeIcon' | 'BellIcon' | 'BicycleIcon' | 'BirdIcon' | 'BookIcon' | 'BookmarkIcon' | 'BulbIcon' | 'ButterflyIcon' | 'CactusIcon' | 'CakeIcon' | 'CalendarIcon' | 'CameraIcon' | 'CandleIcon' | 'CarIcon' | 'CartIcon' | 'CatIcon' | 'ChatIcon' | 'CheckIcon' | 'CherryIcon' | 'ClockIcon' | 'CloseIcon' | 'CloudIcon' | 'CodeIcon' | 'CoffeeIcon' | 'CompassIcon' | 'CreditCardIcon' | 'DogIcon' | 'DonutIcon' | 'DownloadIcon' | 'EditIcon' | 'EyeIcon' | 'FileIcon' | 'FishIcon' | 'FlagIcon' | 'FlameIcon' | 'FlowerIcon' | 'FolderIcon' | 'FoxIcon' | 'FrogIcon' | 'GiftIcon' | 'GlobeIcon' | 'HeadphonesIcon' | 'HeartIcon' | 'HomeIcon' | 'IcecreamIcon' | 'ImageIcon' | 'KeyIcon' | 'LadybugIcon' | 'LampIcon' | 'LeafIcon' | 'LemonIcon' | 'LocationIcon' | 'LockIcon' | 'MagnetIcon' | 'MailIcon' | 'MapIcon' | 'MicIcon' | 'MoonIcon' | 'MushroomIcon' | 'MusicIcon' | 'OwlIcon' | 'PaintbrushIcon' | 'PencilIcon' | 'PenguinIcon' | 'PhoneIcon' | 'PlayIcon' | 'PlusIcon' | 'RabbitIcon' | 'RainbowIcon' | 'RefreshIcon' | 'RocketIcon' | 'SailboatIcon' | 'SaveIcon' | 'SearchIcon' | 'SettingsIcon' | 'ShareIcon' | 'ShoppingBagIcon' | 'SmileIcon' | 'SnailIcon' | 'SnowflakeIcon' | 'StarIcon' | 'StrawberryIcon' | 'SunIcon' | 'TagIcon' | 'ThermometerIcon' | 'ThumbsUpIcon' | 'TrainIcon' | 'TrashIcon' | 'TreeIcon' | 'TrophyIcon' | 'UmbrellaIcon' | 'UploadIcon' | 'UserIcon' | 'VideoIcon' | 'WatermelonIcon' | 'WifiIcon';
-/** Naive Icons 图标组件类型 */
+/** 所有图标组件名（共 105 个） */
+type IconName = 'AirplaneIconIcon' | 'AnchorIconIcon' | 'AppleIconIcon' | 'ArrowDownIconIcon' | 'ArrowLeftIconIcon' | 'ArrowRightIconIcon' | 'ArrowUpIconIcon' | 'BalloonIconIcon' | 'BearIconIcon' | 'BeeIconIcon' | 'BellIconIcon' | 'BicycleIconIcon' | 'BirdIconIcon' | 'BookIconIcon' | 'BookmarkIconIcon' | 'BulbIconIcon' | 'ButterflyIconIcon' | 'CactusIconIcon' | 'CakeIconIcon' | 'CalendarIconIcon' | 'CameraIconIcon' | 'CandleIconIcon' | 'CarIconIcon' | 'CartIconIcon' | 'CatIconIcon' | 'ChatIconIcon' | 'CheckIconIcon' | 'CherryIconIcon' | 'ClockIconIcon' | 'CloseIconIcon' | 'CloudIconIcon' | 'CodeIconIcon' | 'CoffeeIconIcon' | 'CompassIconIcon' | 'CreditCardIconIcon' | 'DogIconIcon' | 'DonutIconIcon' | 'DownloadIconIcon' | 'EditIconIcon' | 'EyeIconIcon' | 'FileIconIcon' | 'FishIconIcon' | 'FlagIconIcon' | 'FlameIconIcon' | 'FlowerIconIcon' | 'FolderIconIcon' | 'FoxIconIcon' | 'FrogIconIcon' | 'GiftIconIcon' | 'GlobeIconIcon' | 'HeadphonesIconIcon' | 'HeartIconIcon' | 'HomeIconIcon' | 'IcecreamIconIcon' | 'ImageIconIcon' | 'KeyIconIcon' | 'LadybugIconIcon' | 'LampIconIcon' | 'LeafIconIcon' | 'LemonIconIcon' | 'LocationIconIcon' | 'LockIconIcon' | 'MagnetIconIcon' | 'MailIconIcon' | 'MapIconIcon' | 'MicIconIcon' | 'MoonIconIcon' | 'MushroomIconIcon' | 'MusicIconIcon' | 'OwlIconIcon' | 'PaintbrushIconIcon' | 'PencilIconIcon' | 'PenguinIconIcon' | 'PhoneIconIcon' | 'PlayIconIcon' | 'PlusIconIcon' | 'RabbitIconIcon' | 'RainbowIconIcon' | 'RefreshIconIcon' | 'RocketIconIcon' | 'SailboatIconIcon' | 'SaveIconIcon' | 'SearchIconIcon' | 'SettingsIconIcon' | 'ShareIconIcon' | 'ShoppingBagIconIcon' | 'SmileIconIcon' | 'SnailIconIcon' | 'SnowflakeIconIcon' | 'StarIconIcon' | 'StrawberryIconIcon' | 'SunIconIcon' | 'TagIconIcon' | 'ThermometerIconIcon' | 'ThumbsUpIconIcon' | 'TrainIconIcon' | 'TrashIconIcon' | 'TreeIconIcon' | 'TrophyIconIcon' | 'UmbrellaIconIcon' | 'UploadIconIcon' | 'UserIconIcon' | 'VideoIconIcon' | 'WatermelonIconIcon' | 'WifiIconIcon';
+/** 图标组件类型 */
 type IconComponent = FC<IconProps>;
-/** Naive Icons 图标分类 */
-declare const ICON_CATEGORIES: readonly ["interface", "action", "media", "navigation", "communication", "nature", "animals", "food", "objects", "transport", "emoji"];
-type IconCategory = (typeof ICON_CATEGORIES)[number];
 
 declare const AirplaneIcon: (props: IconProps) => react.JSX.Element;
 
@@ -42,6 +30,14 @@ declare const AnchorIcon: (props: IconProps) => react.JSX.Element;
 
 declare const AppleIcon: (props: IconProps) => react.JSX.Element;
 
+declare const ArrowDownIcon: (props: IconProps) => react.JSX.Element;
+
+declare const ArrowLeftIcon: (props: IconProps) => react.JSX.Element;
+
+declare const ArrowRightIcon: (props: IconProps) => react.JSX.Element;
+
+declare const ArrowUpIcon: (props: IconProps) => react.JSX.Element;
+
 declare const BalloonIcon: (props: IconProps) => react.JSX.Element;
 
 declare const BearIcon: (props: IconProps) => react.JSX.Element;
@@ -238,4 +234,4 @@ declare const WatermelonIcon: (props: IconProps) => react.JSX.Element;
 
 declare const WifiIcon: (props: IconProps) => react.JSX.Element;
 
-export { AirplaneIcon, AnchorIcon, AppleIcon, BalloonIcon, BearIcon, BeeIcon, BellIcon, BicycleIcon, BirdIcon, BookIcon, BookmarkIcon, BulbIcon, ButterflyIcon, CactusIcon, CakeIcon, CalendarIcon, CameraIcon, CandleIcon, CarIcon, CartIcon, CatIcon, ChatIcon, CheckIcon, CherryIcon, ClockIcon, CloseIcon, CloudIcon, CodeIcon, CoffeeIcon, CompassIcon, CreditCardIcon, DogIcon, DonutIcon, DownloadIcon, EditIcon, EyeIcon, FileIcon, FishIcon, FlagIcon, FlameIcon, FlowerIcon, FolderIcon, FoxIcon, FrogIcon, GiftIcon, GlobeIcon, HeadphonesIcon, HeartIcon, HomeIcon, ICON_CATEGORIES, IcecreamIcon, type IconCategory, type IconComponent, type IconName, type IconProps, ImageIcon, KeyIcon, LadybugIcon, LampIcon, LeafIcon, LemonIcon, LocationIcon, LockIcon, MagnetIcon, MailIcon, MapIcon, MicIcon, MoonIcon, MushroomIcon, MusicIcon, NAIVE_PALETTE, OwlIcon, PaintbrushIcon, type PaletteColor, PencilIcon, PenguinIcon, PhoneIcon, PlayIcon, PlusIcon, RabbitIcon, RainbowIcon, RefreshIcon, RocketIcon, SailboatIcon, SaveIcon, SearchIcon, SettingsIcon, ShareIcon, ShoppingBagIcon, SmileIcon, SnailIcon, SnowflakeIcon, StarIcon, StrawberryIcon, SunIcon, TagIcon, ThermometerIcon, ThumbsUpIcon, TrainIcon, TrashIcon, TreeIcon, TrophyIcon, UmbrellaIcon, UploadIcon, UserIcon, VideoIcon, WatermelonIcon, WifiIcon };
+export { AirplaneIcon, AnchorIcon, AppleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BalloonIcon, BearIcon, BeeIcon, BellIcon, BicycleIcon, BirdIcon, BookIcon, BookmarkIcon, BulbIcon, ButterflyIcon, CactusIcon, CakeIcon, CalendarIcon, CameraIcon, CandleIcon, CarIcon, CartIcon, CatIcon, ChatIcon, CheckIcon, CherryIcon, ClockIcon, CloseIcon, CloudIcon, CodeIcon, CoffeeIcon, CompassIcon, CreditCardIcon, DogIcon, DonutIcon, DownloadIcon, EditIcon, EyeIcon, FileIcon, FishIcon, FlagIcon, FlameIcon, FlowerIcon, FolderIcon, FoxIcon, FrogIcon, GiftIcon, GlobeIcon, HeadphonesIcon, HeartIcon, HomeIcon, IcecreamIcon, type IconComponent, type IconName, type IconProps, ImageIcon, KeyIcon, LadybugIcon, LampIcon, LeafIcon, LemonIcon, LocationIcon, LockIcon, MagnetIcon, MailIcon, MapIcon, MicIcon, MoonIcon, MushroomIcon, MusicIcon, NAIVE_PALETTE, OwlIcon, PaintbrushIcon, type PaletteColor, PencilIcon, PenguinIcon, PhoneIcon, PlayIcon, PlusIcon, RabbitIcon, RainbowIcon, RefreshIcon, RocketIcon, SailboatIcon, SaveIcon, SearchIcon, SettingsIcon, ShareIcon, ShoppingBagIcon, SmileIcon, SnailIcon, SnowflakeIcon, StarIcon, StrawberryIcon, SunIcon, TagIcon, ThermometerIcon, ThumbsUpIcon, TrainIcon, TrashIcon, TreeIcon, TrophyIcon, UmbrellaIcon, UploadIcon, UserIcon, VideoIcon, WatermelonIcon, WifiIcon };

package/dist/index.js

@@ -4,18 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/iconProps.ts
 function normalizeIconProps(props) {
-  const { size, color, strokeWidth, ...rest } = props;
+  const { size = 24, color = "#2A2A2A", strokeWidth = 3.5, fill = "none", ...rest } = props;
   const svgProps = { ...rest };
-  if (size !== void 0 && size !== null) {
-    svgProps.width = size;
-    svgProps.height = size;
-  }
-  if (color !== void 0 && color !== null) {
-    svgProps.stroke = color;
-  }
-  if (strokeWidth !== void 0 && strokeWidth !== null) {
-    svgProps.strokeWidth = strokeWidth;
-  }
+  svgProps.width = size;
+  svgProps.height = size;
+  svgProps.fill = fill;
+  svgProps.stroke = color;
+  svgProps.strokeWidth = strokeWidth;
   return svgProps;
 }
 var AirplaneIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", ...normalizeIconProps(props), children: [
@@ -37,6 +32,22 @@ var AppleIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "26", r: "1.5", fill: "#2A2A2A" }),
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "28", cy: "26", r: "1.5", fill: "#2A2A2A" })
 ] });
+var ArrowDownIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", ...normalizeIconProps(props), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24 9 L24 30", stroke: "#2A2A2A", "stroke-width": "4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 26 L24 40 L33 26 Z", fill: "#E76F51" })
+] });
+var ArrowLeftIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", ...normalizeIconProps(props), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M39 24 L18 24", stroke: "#2A2A2A", "stroke-width": "4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 15 L9 24 L23 33 Z", fill: "#E76F51" })
+] });
+var ArrowRightIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", ...normalizeIconProps(props), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 24 L30 24", stroke: "#2A2A2A", "stroke-width": "4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M25 15 L39 24 L25 33 Z", fill: "#E76F51" })
+] });
+var ArrowUpIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", ...normalizeIconProps(props), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24 39 L24 18", stroke: "#2A2A2A", "stroke-width": "4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 22 L24 8 L33 22 Z", fill: "#E76F51" })
+] });
 var BalloonIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", ...normalizeIconProps(props), children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24 5 C 14 5 9 13 9 19 C 9 26 15 31 24 31 C 33 31 39 26 39 19 C 39 13 34 5 24 5 Z", fill: "#E76F51" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 31 L 27 31 L 24 35 Z", fill: "#E76F51" }),
@@ -731,11 +742,11 @@ var UploadIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "38", width: "32", height: "6", rx: "2", fill: "#2A9D8F" })
 ] });
 var UserIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", ...normalizeIconProps(props), children: [
-  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24", cy: "17", r: "8", fill: "#E76F51" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 42 C 8 32 14 28 24 28 C 34 28 40 32 40 42", fill: "#2A9D8F" }),
-  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "21", cy: "17", r: "1.5", fill: "#2A2A2A" }),
-  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "27", cy: "17", r: "1.5", fill: "#2A2A2A" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 21 Q 24 23 27 21", stroke: "#2A2A2A", fill: "none" })
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24", cy: "16", r: "8.5", fill: "#E76F51" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 43 C 7 33 14 29 24 29 C 34 29 41 33 41 43", fill: "#2A9D8F" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "21", cy: "16", r: "1.6", fill: "#2A2A2A" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "27", cy: "16", r: "1.6", fill: "#2A2A2A" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.5 20 Q 24 23 27.5 20", stroke: "#2A2A2A", fill: "none" })
 ] });
 var VideoIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", ...normalizeIconProps(props), children: [
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "14", width: "28", height: "20", rx: "4", fill: "#264653" }),
@@ -770,23 +781,14 @@ var NAIVE_PALETTE = {
   brown: "#8B5E3C",
   cream: "#FAEDCD"
 };
-var ICON_CATEGORIES = [
-  "interface",
-  "action",
-  "media",
-  "navigation",
-  "communication",
-  "nature",
-  "animals",
-  "food",
-  "objects",
-  "transport",
-  "emoji"
-];
 
 exports.AirplaneIcon = AirplaneIcon;
 exports.AnchorIcon = AnchorIcon;
 exports.AppleIcon = AppleIcon;
+exports.ArrowDownIcon = ArrowDownIcon;
+exports.ArrowLeftIcon = ArrowLeftIcon;
+exports.ArrowRightIcon = ArrowRightIcon;
+exports.ArrowUpIcon = ArrowUpIcon;
 exports.BalloonIcon = BalloonIcon;
 exports.BearIcon = BearIcon;
 exports.BeeIcon = BeeIcon;
@@ -833,7 +835,6 @@ exports.GlobeIcon = GlobeIcon;
 exports.HeadphonesIcon = HeadphonesIcon;
 exports.HeartIcon = HeartIcon;
 exports.HomeIcon = HomeIcon;
-exports.ICON_CATEGORIES = ICON_CATEGORIES;
 exports.IcecreamIcon = IcecreamIcon;
 exports.ImageIcon = ImageIcon;
 exports.KeyIcon = KeyIcon;