@ animaticons/ 反应

1500个动画SVG图标用于React. 由动起/反应而成.

文档

完整文件,访问 动能.in/icons/docs。 。 。 .

浏览所有图标 动能. in。 。 。 .

安装

npm i @animateicons/react

pnpm add @animateicons/react

yarn add @animateicons/react

bun add @animateicons/react

使用量

从中导入任意图标 lucide 或者说 huge 子路径 :

import { BellRingIcon } from "@animateicons/react/lucide";
import { HeartIcon } from "@animateicons/react/huge";

export default function Demo() {
    return <BellRingIcon size={24} color="#f45b48" />;
}

图标动画默认会徘徊.

绕行,单击或双击

每个图标都有 startAnimation() 财务报告和审定财务报表 stopAnimation()。 。 。 . useIconHover 当一个用户徘徊或点击时,请为您呼叫:

"use client";
import { useIconHover } from "@animateicons/react";
import { BellRingIcon } from "@animateicons/react/lucide";

export default function Bell() {
    const { ref, triggerProps } = useIconHover(); // hover (default)

    return (
        <button {...triggerProps}>
            <BellRingIcon ref={ref} size={28} />
        </button>
    );
}

见 完整文档 ,用于单击,同时和多个图标.

道具

其他框架

不使用反应? 相同的图标和相同的运动船 @animateicons/vanilla 对于简单的JS和网络组件, @animateicons/vue 用于 Vue 3 和 Nuxt,以及 @animateicons/angular 为角. 文档 : 普通联署材料, (中文(简体) ), 阴道 财务报告和审定财务报表 角质。 。 。 .

许可证

麻省理工学院 阿维吉特·戴伊

图标形状基于 卢西德 财务报告和审定财务报表 巨头,参见 第三方通知。 。 。 .