Svelte-heart NPM

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.