A simple SVG icon that comes with an animation on the fly. Add a cool additive to the like buttons on your Svelte app.
How it works
Svelte Heart is basically an SVG icon component with the keyframe animation built in. This works by binding your like variable to bind:value. It detects the change, and triggers the heart animation when it changes to true.
Demo
| Heart | Star | Thumb |
|---|---|---|
Installation
npm install svelte-heart
Usage
<script>
import { SvelteHeart } from 'svelte-heart'
let like = false
const likeEvent = () => { //this is where you set up an ajax call.
like = like ? false : true
}
</script>
<button on:click="{likeEvent}">
Like
<SvelteHeart bind:value="{like}"/>
</button>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | boolean |
false |
The component listens to the change of value. When it changes to true, the animation triggers. |
| colorLiked | string |
"#da3a09" |
The color when value is set to true |
| colorUnliked | string |
"#222" |
The color when value is set to false |
| symbol | "heart" ⎮ "star" ⎮ "thumb" |
"heart" |
Accepts one out of three icon types. (heart, star, thumb) |
| size | number |
20 |
This sets the size of the symbol as well as those in the animation. |
Caution
There is no event dispatched from this component as its sole purpose is just an icon with an animation.
License
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.