Minimal yet meaningful abstractions for Fontawesome icons in Svelte.
npm i svelte-yafal -D
<script>
import { FaSvg, Icon } from 'svelte-yafal';
import { faFlag } from '@fortawesome/free-solid-svg-icons';
</script>
<FaSvg><Icon icon="{faFlag}" size="{3}" /></FaSvg>
<FaSvg beat>
<Icon icon="{faHeart}" />
</FaSvg>
<FaSvg>
<Icon
icon="{faFlag}"
translateX="{256}"
translateY="{128}"
scale="{0.25}"
rotate="{90}"
flipX
flipY
/>
</FaSvg>
<FaSvg>
<Icon icon="{faCalendar}" />
<Icon icon="{faSun}" scale="{0.2}" />
<text x="100" y="450" font-size="250">23</text>
</FaSvg>
The units used for positioning will be in the frame of reference of the SVG. x=0 would start the text from the left edge, whereas 512 would push it beyond the right edge.
Feature requests and PRs are welcome. New features will only be added upon request so as to not bloat things.