@yonatan-kra/heart-component
v1.2.1
Published
This web component is part of the `alt-text-bluesky-game` project. The Heart component is responsible for rendering a heart icon. It can be dynamically filled with a selected color and change in size.
Downloads
945
Readme
Heart Component
This web component is part of the alt-text-bluesky-game project. The Heart component is responsible for rendering a heart icon. It can be dynamically filled with a selected color and change in size.
Usage
You can use it with the unpkg CDN:
<script type="module" src="https://www.unpkg.com/@yonatan-kra/[email protected]/heart.es.js" defer></script>
<div>
<love-meter></love-meter>
</div>To use the Heart component in your project, install it and import it in your scripts:
npm install @yonatan-kra/heart-component<div>
<love-meter></love-meter>
</div>
<script type="module">
import "@yonatan-kra/heart-component";
</script>Props
The Heart component accepts the following props:
| Prop | Type | Description |
| --------- | -------- | ---------------------------------------- |
| color | string | Sets the hearts fill color (defaults to red) |
| percentage | number | Sets the fill percentage (bottom to top) |
| size | number | Sets the width and height of the heart (defaults to 24) |
Example
<love-meter percetange="90" color="purple" size="50"></love-meter>Also see this CodePen example
Contributing
- Fork
- Clone
npm installnpm startto run the demo app with the heart inside- Run the tests:
npm test
License
This project is licensed under the MIT License. See the LICENSE file for more details.