8 个图标 · MIT 许可
形状与数学动态图标
圆形、正方形、三角形、六边形、八边形和除号。可以用作绘图应用中的形状工具、计算器的运算符,或者图表和新手引导步骤中的中性标记。
全部 8 个图标都悬停时播放一次。每个图标都提供 React 组件、shadcn/ui 组件和 Lottie JSON 动画,并附带静态 SVG,可依据 MIT 许可证免费用于商业项目。
全部形状与数学图标
适用场景
- 白板和绘图应用中的形状工具
- 计算器和公式编辑器的运算符
- 图表中的项目符号和步骤标记
- 答题和游戏界面
按交互方式
- 悬停播放动态图标 · 8
在 mouseenter 时播放一次,除非用户偏好减少动态效果。移出不会中断播放,播放期间再次移入也不会重新开始。Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle.
添加到您的应用
在 React 中,安装 react-useanimations 并导入图标即可,它会自动播放“悬停重播”交互。本类别的所有图标用法都一样:把 hexagon 换成图标页面上的名称。
npm install react-useanimationsimport UseAnimations from 'react-useanimations';
import hexagon from 'react-useanimations/lib/hexagon';
<UseAnimations animation={hexagon} size={32} />使用 shadcn/ui 时,CLI 会添加一个现成的组件:
npx shadcn@latest add https://useanimations.com/r/hexagon.jsonimport { AnimatedHexagon } from '@/components/animations/hexagon';
<AnimatedHexagon size={24} />没有使用 React?每个图标都是位于 /icons/<id>.json 的 Lottie JSON 文件;网页、iOS、Android 和 Flutter 的播放器用法请参阅 Lottie 图标。
常见问题
包含哪些形状与数学动态图标?
共 8 个图标:Circle、Divide、Divide Circle、Divide Square、Hexagon、Octagon、Square 和 Triangle。全部可依据 MIT 许可证免费用于个人和商业项目,无需署名。
如何在 React 中使用这些形状与数学动态图标?
安装 react-useanimations,添加 import hexagon from 'react-useanimations/lib/hexagon',然后渲染 <UseAnimations animation={hexagon} size={32} />。图标会播放它的“悬停重播”交互,并跟随文字颜色。使用 shadcn/ui 时,改为运行 npx shadcn@latest add https://useanimations.com/r/hexagon.json。
不用 React 也能使用这些形状与数学动态图标吗?
可以。每个图标都是一个 Lottie JSON 文件,地址为 https://useanimations.com/icons/<id>.json(例如 https://useanimations.com/icons/hexagon.json),可以用 lottie-web、lottie-ios、lottie-android 或 Flutter 的 lottie 包播放;静态 SVG 可以在各个图标页面(英文)下载。这些图标都没有用到表达式,因此 lottie-web 的轻量版(light build)就够用了。