Repolode
提交项目
oreo-design

oreo-design/doodle-icons

一套免费的 MIT 协议手绘风格图标，共 204 个，支持描边动画与抖动效果，并提供 React 组件。

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

这是什么？

Oreo Doodle Icons 是一套包含 204 个描边图标的素材库，线条刻意带有手绘的抖动感。每个图标既提供静态 SVG，也提供会先描绘线条、随后持续抖动的动画 SVG；可以通过 React 包使用，也可以直接作为普通文件嵌入任何支持 SVG 的页面。

抖动效果由一个 SVG 滤镜实现，而不是视频或精灵图。湍流噪声使线条产生位移，六步动画循环推进噪声种子，因此线条在帧之间跳动而非平滑滑动。由于滤镜作用于光栅化后的像素，其开销不随图标路径数量增加，同一页面上的所有图标可共用一个滤镜。

React 组件支持传入名称或原始图标数据，并可设置尺寸、线宽与绘制时序，其他属性会透传到 SVG 上。描边使用 currentColor，颜色由 CSS 控制。该包无运行时依赖，同时提供 ESM、CJS 和类型定义，并附带可供 AI 编程助手使用的技能文件。

核心功能

  • 01204 个描边图标，基于 48×48 网格，呈现手绘质感
  • 02动画 SVG 版本先描绘线条，随后持续抖动
  • 03共享的 SVG 滤镜实现抖动，可调节幅度、周期和频率
  • 04React 组件支持尺寸、线宽与绘制时序等属性
  • 05描边使用 currentColor，颜色通过 CSS 设置
  • 06无运行时依赖，提供 ESM、CJS 与 TypeScript 类型

适用场景

  • 为营销页或落地页添加活泼的手绘风格图标
  • 为生日、节日等主题页面做装饰
  • 在无构建步骤的静态 HTML 中直接使用 SVG 文件
  • 让 AI 编程助手按手绘风格构建界面

快速上手

  1. 1

    安装 React 包

    npm i @oreo-design/doodle-icons
  2. 2

    在页面中挂载一次抖动滤镜

  3. 3

    使用 boilId 属性渲染图标

使用前须知

  • 更大的 1,700+ 图标集属于付费 Pro 版本，不包含在本仓库中。
  • 抖动效果风格固定，未必适合所有设计。
  • 通过 img 标签加载时，静态 SVG 图标会显示为黑色，若需改色需内联 SVG 或使用 React 组件。

标签

#icons#svg#react#animation#hand-drawn#design-system#typescript

常见问题

doodle-icons 是什么？
一套免费的 MIT 协议手绘风格图标，共 204 个，支持描边动画与抖动效果，并提供 React 组件。 Oreo Doodle Icons 是一套包含 204 个描边图标的素材库，线条刻意带有手绘的抖动感。每个图标既提供静态 SVG，也提供会先描绘线条、随后持续抖动的动画 SVG；可以通过 React 包使用，也可以直接作为普通文件嵌入任何支持 SVG 的页面。
doodle-icons 可以免费使用吗？用的什么许可证？
doodle-icons 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
doodle-icons 还在维护吗？
活跃维护中。doodle-icons 最近一次提交是在 2026年11月4日。
doodle-icons 适合用来做什么？
为营销页或落地页添加活泼的手绘风格图标 为生日、节日等主题页面做装饰 在无构建步骤的静态 HTML 中直接使用 SVG 文件 让 AI 编程助手按手绘风格构建界面
doodle-icons 怎么安装和运行？
安装 React 包: npm i @oreo-design/doodle-icons 在页面中挂载一次抖动滤镜 使用 boilId 属性渲染图标
在哪里获取 doodle-icons？
源代码和安装说明在 GitHub 上：https://github.com/oreo-design/doodle-icons

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

相关项目