Repolode
提交项目
guokaigdg

guokaigdg/naive-icons

面向 React 与 TypeScript 的手绘 naive 民间艺术风格 SVG 图标库，可作为 AI 编码助手技能使用。

在 GitHub 查看官网
Star
249
Fork
5
未关闭 Issue
0
最近提交
6天前

这是什么？

Naive Icons 是一套手绘风格的 SVG 图标库，灵感来自 naive 民间艺术。每个图标基于 48x48 网格绘制，线宽统一为 3.5，线帽和连接处为圆角，配色采用复古色板，许多有生命的图形还带有圆点眼睛和小微笑。每个图标同时提供 SVG 源文件和 React TSX 组件。

React 组件继承原生 SVG 属性，支持 size、color、strokeWidth、fill 和 title 等参数。strokeWidth 以基准线宽的倍数缩放，color 可设为 currentColor 以跟随文字颜色。包采用 ESM 格式并声明 sideEffects 为 false，按名导入或按子路径导入都能有效 tree-shaking。项目还导出 TypeScript 类型和统一的 NAIVE_PALETTE 色板。

项目另提供可安装的 AI 助手技能，适用于 Claude Code、Cursor、Codex 等工具，助手可以按语义挑选图标，并依照库的设计规范直接生成代码。

核心功能

  • 01图标覆盖界面、操作、媒体、导航、动物、食物等 11 类。
  • 02每个图标同时提供 SVG 文件和 React TSX 组件。
  • 03提供完整的 TypeScript 类型与统一色板导出。
  • 04通过 strokeWidth 与 color 属性调整线宽和颜色，保持手绘风格。
  • 05可安装 AI 编码助手技能，用于按语义选图标并生成代码。

适用场景

  • 为 React 网站或落地页添加轻松的手绘风格图标。
  • 为登录或引导页面营造温暖、亲切的视觉氛围。
  • 在非 React 项目或 SVG 雪碧图中直接使用源文件。
  • 让 AI 编码助手在项目中挑选并插入匹配的图标。

快速上手

  1. 1

    安装依赖包

    npm install naive-icons
  2. 2

    在 React 中导入并使用图标

    import { HomeIcon } from 'naive-icons';

使用前须知

  • 许多图标的颜色是写死的，根级 fill 无法改变它们的颜色，通常只能方便地修改描边颜色。
  • 需要 React 16.8 或更新版本。

标签

#icons#svg#react#typescript#ui-design#hand-drawn#component-library#naive

常见问题

naive-icons 是什么？
面向 React 与 TypeScript 的手绘 naive 民间艺术风格 SVG 图标库，可作为 AI 编码助手技能使用。 Naive Icons 是一套手绘风格的 SVG 图标库，灵感来自 naive 民间艺术。每个图标基于 48x48 网格绘制，线宽统一为 3.5，线帽和连接处为圆角，配色采用复古色板，许多有生命的图形还带有圆点眼睛和小微笑。每个图标同时提供 SVG 源文件和 React TSX 组件。
naive-icons 可以免费使用吗？用的什么许可证？
naive-icons 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
naive-icons 还在维护吗？
活跃维护中。naive-icons 最近一次提交是在 2026年10月14日。
naive-icons 适合用来做什么？
为 React 网站或落地页添加轻松的手绘风格图标。 为登录或引导页面营造温暖、亲切的视觉氛围。 在非 React 项目或 SVG 雪碧图中直接使用源文件。 让 AI 编码助手在项目中挑选并插入匹配的图标。
naive-icons 怎么安装和运行？
安装依赖包: npm install naive-icons 在 React 中导入并使用图标: import { HomeIcon } from 'naive-icons';
在哪里获取 naive-icons？
源代码和安装说明在 GitHub 上：https://github.com/guokaigdg/naive-icons

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目