https://github.com/iceywu/svg-animate-web
svg-animate-web
https://github.com/iceywu/svg-animate-web
animation svg typescript web
Last synced: 5 months ago
JSON representation
svg-animate-web
- Host: GitHub
- URL: https://github.com/iceywu/svg-animate-web
- Owner: IceyWu
- Created: 2024-03-01T07:20:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-10T04:23:50.000Z (about 1 year ago)
- Last Synced: 2025-10-10T14:44:36.611Z (9 months ago)
- Topics: animation, svg, typescript, web
- Language: TypeScript
- Homepage: https://svg-animate-web.netlify.app/
- Size: 206 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
SVG-Animate-Web
Making your svg moving🦄.
## 动机
周末闲暇时，我在做个人网站时遇到一个有趣的需求：想让 SVG 图标有个描边动画效果。市面上有很多成熟的动画库，但大多功能繁杂、体积庞大。其实我只需要一个轻量的 SVG 动画解决方案，于是决定自己动手写一个。
这就是`svg-animate-web`的由来 —— 一个完全为个人兴趣开发的小工具，纯粹是解决自己的需求，顺便分享给有类似需求的同学。
## 📦 Installation
```bash
npm install svg-animate-web
or
pnpm add svg-animate-web
or
yarn add svg-animate-web
```
## 🦄 Usage
[Demo](https://svg-animate-web.netlify.app/)
### Vue
```html
....
```
```ts
// main.ts
import SetSvgAnimation from 'svg-animate-web'
const svgRef = ref()
onMounted(() => {
SetSvgAnimation(svgRef.value)
// Or use with options
// SetSvgAnimation(svgRef.value, {
// duration: 5,
// fill: "transparent",
// fillBase: "#333",
// stroke: "#333",
// strokeWidth: 10,
// count:1
// })
})
```
## 🐟 Source
[Demo Source](./play/src/App.vue)
