@ animaticons/ vanilla (韩语)
1170平原JavaScript的动画SVG图标,网页组件和每个没有自有软件包的框架(Svelte, Solid,Astro,服务器模板). 同样的动议: @animateicons/react,不需要框架.
文档 : 动能.in/icons/docs/vanilla。浏览每个图标 动能. in。 。 。 .
安装
npm i @animateicons/vanilla
使用量
每个图标都是纯数据,从 lucide 或者说 huge 子路径。 名称是 PascalCase 中的图标名称 : bell-ring 实值 BellRing。 。 。 .
import { createIcon } from "@animateicons/vanilla";
import { BellRing } from "@animateicons/vanilla/lucide";
const icon = createIcon(BellRing, { size: 32, color: "tomato" });
document.querySelector("#bell").append(icon);
图标动画在悬浮。 打电话 icon.startAnimation() 财务报告和审定财务报表 icon.stopAnimation() 自己弹,和 icon.destroy() 当取去.
自定义元素
注册您曾经使用的图标, 然后在任何地方, 包括 Svelte、 Solid 或 Astro 页面内写入标记 :
<script type="module">
import { defineIcons } from "@animateicons/vanilla";
import { Bell, Heart } from "@animateicons/vanilla/lucide";
defineIcons({ Bell, Heart });
</script>
<animate-icons name="bell" size="32" color="tomato"></animate-icons>
属性 : name, (中文(简体) ), library (单位:千美元)lucide 或者说 huge,只有在两者都有名字时才需要, size, (中文(简体) ), color, (中文(简体) ), duration 财务报告和审定财务报表 is-animated。该元素有 startAnimation() 财务报告和审定财务报表 stopAnimation()。 。 。 .
光盘N
对于没有构建步骤的页面,一个脚本记录一个库的每个图标:
<script src="https://cdn.jsdelivr.net/npm/@animateicons/vanilla/dist/cdn/lucide.js"></script>
<animate-icons name="bell"></animate-icons>
使用 dist/cdn/huge.js 为巨大的图标。 剧本也暴露了 AnimateIcons.createIcon, (中文(简体) ), AnimateIcons.defineIcons 财务报告和审定财务报表 AnimateIcons.icons。它持有库的每个图标(Lucide大约为84 kB,大而压缩的为113 kB),因此在拥有捆绑器时更倾向于导入.
选项
| 选项 | 类型 | 默认 |
|---|---|---|
size | number | 24 |
color | string | currentColor |
duration | number | 1 |
isAnimated | boolean | true |
duration 乘以每个持续时间和延迟,所以 2 以半速演奏. isAnimated: false 转动时转动 startAnimation() 还行 随着运动的减少, 徘徊无所作为 startAnimation() 保持图标的休息.
许可证
麻省理工学院. 图标形状来自Lucide和大图标,见 第三次议会 NoTICES.md。 。 。 .