naive-icons 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# 更新日志
+
+本文件记录 Naive Icons 的每个版本变更。版本号遵循语义化版本规范（SemVer）。
+
+## Unreleased
+
+官方文档站点重构。图标与组件产物无任何变更。
+
+改进
+
+- 官网三层（HTML / CSS / JS）完全重写：语义化标签、统一的设计令牌体系（间距 4px 基数、圆角与阴影尺度）、清除模板导出的冗余属性
+- 信息架构收敛：原先并列的 4 个代码面板合并为「安装 / React / SVG / TypeScript」标签页，调色板与设计原则合并为「设计规范」一节
+- 视觉基调改为温暖手绘：纸张颗粒纹理、暖调深色模式、手绘分隔线，浅色与深色主题均可手动切换并记忆
+- 引入 LXGW 悠哉字体（OFL，自托管子集化，仅 715 个字符 ≈ 170KB ×2 个字重）作为网站字体；图标库本体仍无任何字体/资源依赖
+- 图标浏览器工具栏在宽屏下吸顶，新增分类结果计数、搜索清空、描边快捷色板与自定义取色器
+- 预览切换深色底时，若描边仍为默认墨黑会自动换成奶油色，避免图标不可见；用户显式选择的颜色不会被改写
+- 详情弹窗支持键盘方向键连续切换图标，打开时背景内容设为 inert
+- 无障碍补强：skip link、aria-live 结果计数、标签页方向键切换、焦点归还
+
+## 1.0.0
+
+首个正式版本发布。
+
+新增
+
+- 101 个手绘 naive folk art 风格 SVG 图标，覆盖界面基础、操作、文件与媒体、导航方位、通信、自然天气、动物、食物饮品、日常物品、交通工具、表情共 11 个分类
+- 每个图标同时提供 SVG 源文件与 React TSX 组件
+- 完整 TypeScript 类型定义：IconProps、IconName、IconCategory、PaletteColor、NAIVE_PALETTE
+- 统一规格：48x48 viewBox、3.5 描边宽度、round 线帽与线角
+- 9 色复古调色板，可作为设计令牌直接引用
+- 官方文档站点，支持搜索、分类筛选、尺寸与描边颜色实时调整、一键复制与下载
+- MIT 协议，全部图标为原创作品
+
+改进
+
+- 组件默认使用 currentColor，可自动继承父级文字颜色
+- 支持 size、color、strokeWidth、fill、title 五个语义属性，同时继承全部原生 SVG 属性
+- 单个图标体积控制在 400 至 700 字节，无运行时依赖

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Naive Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -0,0 +1,278 @@
+<p align="right">
+  <a href="./README.md">中文</a> | <a href="./README.en.md">English</a>
+</p>
+
+<p align="center">
+  <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.
+
+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
+- Per-icon size: roughly 400–700 bytes
+- Dependencies: zero runtime dependencies, React as a peer dependency only
+- License: MIT
+
+## Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Component Props](#component-props)
+- [Using the SVG Directly](#using-the-svg-directly)
+- [Palette](#palette)
+- [Icon List](#icon-list)
+- [Design Principles](#design-principles)
+- [Directory Structure](#directory-structure)
+- [Local Development](#local-development)
+- [Browser Support](#browser-support)
+- [License](#license)
+
+## Features
+
+- 101 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
+- Every icon ships as both an SVG source file and a React TSX component
+- Full TypeScript types: IconProps, IconName, IconCategory, NAIVE_PALETTE
+- Transparent background, no gradients, no external font dependency
+- Supports currentColor, so icons automatically follow the surrounding text color
+
+## Installation
+
+```bash
+npm install naive-icons
+```
+
+```bash
+yarn add naive-icons
+```
+
+```bash
+pnpm add naive-icons
+```
+
+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';
+
+export function Example() {
+  return (
+    <nav>
+      <HomeIcon size={24} />
+      <HeartIcon size={24} color="#E76F51" />
+      <PenguinIcon size={48} strokeWidth={4} />
+    </nav>
+  );
+}
+```
+
+Import per icon to further reduce bundle size:
+
+```tsx
+import HomeIcon from 'naive-icons/src/HomeIcon';
+```
+
+Use with currentColor so icons automatically inherit the parent text color:
+
+```tsx
+<span style={{ color: '#264653' }}>
+  <HomeIcon size={20} />
+  Home
+</span>
+```
+
+Add an accessibility title:
+
+```tsx
+<HomeIcon size={24} title="Back to home" />
+```
+
+## Component Props
+
+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 | Icon size, equal width and height. Overrides width and height when set |
+| color | string | currentColor | Stroke 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';
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+  fill?: string;
+  title?: string;
+}
+```
+
+## Using the SVG Directly
+
+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="Home" />
+```
+
+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">
+  <!-- Copy the path content from svg/home.svg -->
+</svg>
+```
+
+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 | 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 |
+
+## Icon List
+
+**Interface Basics** (13)
+home, user, settings, search, heart, star, bell, calendar, clock, eye, bulb, tag, bookmark
+
+**Actions** (11)
+edit, trash, download, upload, save, plus, close, check, refresh, share, play
+
+**Files & Media** (9)
+file, folder, image, camera, video, mic, music, code, book
+
+**Navigation & Direction** (6)
+location, compass, map, flag, anchor, magnet
+
+**Communication** (4)
+mail, chat, phone, wifi
+
+**Nature & Weather** (12)
+sun, moon, cloud, umbrella, tree, flower, leaf, rainbow, mushroom, cactus, snowflake, flame
+
+**Animals** (14)
+cat, dog, bird, fish, penguin, rabbit, bear, fox, owl, frog, bee, butterfly, snail, ladybug
+
+**Food & Drink** (9)
+apple, strawberry, watermelon, cherry, lemon, cake, icecream, donut, coffee
+
+**Everyday Objects** (13)
+balloon, lamp, candle, pencil, paintbrush, globe, trophy, shopping-bag, credit-card, gift, thermometer, lock, key
+
+**Transport** (7)
+car, airplane, rocket, cart, bicycle, sailboat, train
+
+**Emotions** (2)
+smile, thumbs-up
+
+Icon file names use kebab-case (e.g. `shopping-bag.svg`, `thumbs-up.svg`), while React component names use PascalCase with an `Icon` suffix (e.g. `ShoppingBagIcon`, `ThumbsUpIcon`).
+
+## Design Principles
+
+Naive Icons follows four fixed rules. They should be respected when adding new icons.
+
+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**: Use only the 9 colors in the palette — 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.
+
+## Directory Structure
+
+```
+naive-icons/
+├── svg/                 101 SVG source files
+├── src/                 101 React TSX components + index.ts + types.ts
+├── assets/              Brand assets (logo)
+├── scripts/             Icon generation and preview build scripts
+├── website/             Official documentation site
+├── dist/                Build output (ESM + CJS + type declarations, not version-controlled)
+├── tsup.config.ts       Build configuration
+├── tsconfig.json
+├── LICENSE
+├── README.md
+├── CHANGELOG.md
+├── CONTRIBUTING.md
+└── package.json
+```
+
+## Local Development
+
+```bash
+git clone https://github.com/guokaigdg/naive-icons.git
+cd naive-icons
+npm install
+```
+
+Common scripts:
+
+```bash
+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` runs the build automatically on publish, so there is no need to run `npm run build` manually.
+
+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.
+
+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.
+
+## Fonts
+
+The icon library itself (SVG and React components) has no font dependency. The website additionally loads a hand-written-style font for headings and body text: [LXGW Yozai](https://github.com/lxgw/yozai-font) (SIL Open Font License 1.1, free for commercial use).
+
+The website self-hosts the font: it only bundles the characters actually used on the site (about 715 characters, roughly 170 KB for the regular weight), fully offline. Files live in `website/assets/fonts/`. To regenerate the subset yourself, run:
+
+```bash
+python3 scripts/subset_fonts.py
+```
+
+It depends on `fonttools` and `brotli`:
+
+```bash
+pip install fonttools brotli
+```
+
+## Browser Support
+
+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
+
+MIT License. See [LICENSE](./LICENSE).
+
+All icons are original works, free to use in personal and commercial projects without attribution.

package/README.md

@@ -0,0 +1,278 @@
+<p align="right">
+  <a href="./README.md">中文</a> | <a href="./README.en.md">English</a>
+</p>
+
+<p align="center">
+  <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 生成，均为原创作品。
+
+每一个图标都建立在 48x48 的网格上，使用 3.5 的粗描边、圆角线帽与统一的复古调色板，并保留了手绘插画特有的笨拙感与温度——部分图标还带有一对小圆点眼睛和微笑，让界面多一点点人情味。
+
+- 图标数量：101
+- 单个体积：约 400 至 700 字节
+- 依赖：零运行时依赖，仅 peer 依赖 React
+- 许可证：MIT
+
+## 目录
+
+- [特性](#特性)
+- [安装](#安装)
+- [快速开始](#快速开始)
+- [组件属性](#组件属性)
+- [直接使用 SVG](#直接使用-svg)
+- [调色板](#调色板)
+- [图标清单](#图标清单)
+- [设计原则](#设计原则)
+- [目录结构](#目录结构)
+- [本地开发](#本地开发)
+- [浏览器支持](#浏览器支持)
+- [许可证](#许可证)
+
+## 特性
+
+- 101 个手绘风格的原创 SVG 图标，覆盖界面、操作、媒体、导航、动物、食物等 11 个分类
+- 统一规格：48x48 viewBox、3.5 描边宽度、round 线帽与线角
+- 统一调色板：9 色复古配色，可作为设计令牌直接引用
+- 部分图标带有圆点眼睛与微笑表情，风格辨识度高
+- 每个图标同时提供 SVG 源文件与 React TSX 组件
+- 完整 TypeScript 类型：IconProps、IconName、IconCategory、NAIVE_PALETTE
+- 透明背景、无渐变、无外部字体依赖
+- 支持 currentColor，可跟随文字颜色自动变化
+
+## 安装
+
+```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>
+  );
+}
+```
+
+按需引入可以进一步减小打包体积：
+
+```tsx
+import HomeIcon from 'naive-icons/src/HomeIcon';
+```
+
+配合 currentColor 使用，图标会自动继承父级文字颜色：
+
+```tsx
+<span style={{ color: '#264653' }}>
+  <HomeIcon size={20} />
+  首页
+</span>
+```
+
+添加无障碍标题：
+
+```tsx
+<HomeIcon size={24} title="返回首页" />
+```
+
+## 组件属性
+
+Naive Icons 的每个组件都继承原生 `SVGProps<SVGSVGElement>`，可以直接传入 `className`、`onClick`、`style` 等任意 SVG 属性。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| 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 | 单独指定宽或高 |
+
+```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 | 浅色底 |
+
+## 图标清单
+
+**界面基础**（13）
+home, user, settings, search, heart, star, bell, calendar, clock, eye, bulb, tag, bookmark
+
+**操作**（11）
+edit, trash, download, upload, save, plus, close, check, refresh, share, play
+
+**文件与媒体**（9）
+file, folder, image, camera, video, mic, music, code, book
+
+**导航方位**（6）
+location, compass, map, flag, anchor, magnet
+
+**通信**（4）
+mail, chat, phone, wifi
+
+**自然天气**（12）
+sun, moon, cloud, umbrella, tree, flower, leaf, rainbow, mushroom, cactus, snowflake, flame
+
+**动物**（14）
+cat, dog, bird, fish, penguin, rabbit, bear, fox, owl, frog, bee, butterfly, snail, ladybug
+
+**食物饮品**（9）
+apple, strawberry, watermelon, cherry, lemon, cake, icecream, donut, coffee
+
+**日常物品**（13）
+balloon, lamp, candle, pencil, paintbrush, globe, trophy, shopping-bag, credit-card, gift, thermometer, lock, key
+
+**交通工具**（7）
+car, airplane, rocket, cart, bicycle, sailboat, train
+
+**表情**（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/                 101 个 SVG 源文件
+├── src/                 101 个 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
+```
+
+## 本地开发
+
+```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。支持浅色 / 深色主题（跟随系统、可手动切换并记忆），弹窗内可用方向键连续切换图标。
+
+## 字体
+
+图标库本体（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 输出的是标准 SVG 1.1，支持所有现代浏览器（Chrome、Firefox、Safari、Edge 最近两个大版本）。React 组件不含任何浏览器专有 API，可在服务端渲染环境中安全使用。
+
+## 许可证
+
+MIT License。详见 [LICENSE](./LICENSE)。
+
+全部图标均为原创作品，可自由用于个人与商业项目，无需署名。

package/assets/logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-labelledby="title">
+  <title id="title">Naive Icons</title>
+  <rect x="12" y="12" width="488" height="488" rx="116" fill="#E9C46A" stroke="#264653" stroke-width="24" stroke-linejoin="round"/>
+  <g transform="translate(256 256) scale(0.82) translate(-256 -256) translate(0 -10)">
+    <path d="M256 85 L341 235 L459 235 L363 331 L395 448 L256 363 L117 448 L149 331 L53 235 L171 235 Z"
+          fill="#E76F51" stroke="#264653" stroke-width="24" stroke-linejoin="round" stroke-linecap="round"/>
+    <circle cx="204" cy="266" r="22" fill="#264653"/>
+    <circle cx="308" cy="266" r="22" fill="#264653"/>
+    <path d="M214 330 Q256 372 298 330" fill="none" stroke="#264653" stroke-width="28" stroke-linecap="round"/>
+  </g>
+</svg>