Svelte-Awesome

Font Awesome component for Svelte.js, using inline SVG.

See here for a (temporarily crude) list of all available embedded icons

Basic

<Icon data={flag}/>

Scale

<Icon data={language} scale={3}/>

Spin

<Icon data={refresh} spin/>

Pulse

<Icon data={spinner} pulse/>

Flip

<Icon data={signal} flip="horizontal"/>

Label

Accessible for screen readers, etc.

<Icon data={code} label="Source Code"/>

Custom Class

Additional classes for custom styling

<Icon data={certificate} class="pinkIcon"/>

Custom Styles

Inline custom styling

<Icon data={paintBrush} style="border: 1px solid #000; border-radius: 8px; padding: 5px"/>

Dynamic Scale and Styles

Inline dynamic scaling and styling

<Icon data={powerOff} style={`transform:rotate(${iconOpen ? 0 : -180}deg)`} scale={5}/>

Custom icons

You can register your own icons.

<Icon data={baidu}/>

FontAwesome v5 Icons

<Icon data={faFontAwesomeLogoFull} scale={10}/>

FontAwesome v6 Icons

<Icon data={faCircleQuestion} scale={3}/>

Multi-color icons

Register icons in more advanced ways to unleash the full power of SVG.

See readme for further instructions.