svelte-yafal

Minimal yet meaningful abstractions for fontawesome icons in Svelte.

npm i svelte-yafal -D
REPL

Basics

<script lang="ts">
	import { FaSvg, Icon } from 'svelte-yafal';
	import { faFlag } from '@fortawesome/free-solid-svg-icons';
</script>

<FaSvg size={3}><Icon icon={faFlag} color="var(--blue-3)" /></FaSvg>

Animations

<FaSvg size={3} beat><Icon icon={faHeart} /></FaSvg>
<FaSvg size={3} spin><Icon icon={faCog} /></FaSvg>
<FaSvg size={3} pulse><Icon icon={faSpinner} /></FaSvg>

Transformations

<FaSvg size={3}>
	<Icon icon={faFlag} flipX scale={0.8} />
</FaSvg>

<FaSvg size={3}>
	<Icon icon={faRedo} flipY rotate={30} scale={0.6} />
</FaSvg>

Layering

27 
<FaSvg size={3}>
	<Icon icon={faCalendar} />
	<Icon icon={faSun} color="white" scale={0.25} translateX={-150} translateY={10} />
	<text x="150" y="450">27</text>
</FaSvg>