svelte-fa
Tiny FontAwesome 5 component for Svelte.
- FontAwesome svg icons
- Tree-shakable, only import used icons
- No CSS file required
- FontAwesome duotone icons
Installation
npm install svelte-fa
Notice: For Sapper user, you have to install the component as a devDependency.
npm install svelte-fa -D
Usage
<script>
import Fa from 'svelte-fa'
import { faFlag } from '@fortawesome/free-solid-svg-icons'
</script>
<Fa icon={faFlag}/>
Properties
<Fa
icon={faFlag}
fw
flip="horizontal"
pull="left"
rotate={90}
size="2x"
color="#ff0000"/>
fw: fixed widthflip:stringvalueshorizontal,vertical,bothpull:stringvaluesleft,rightrotate:number or stringvalues90,180,270,30,-30...size:stringvaluesxs,sm,lgor2x,3x,4x...color: icon color, defaultcurrentColor
Duotone Icons
<script>
import Fa from 'svelte-fa'
import { faFlag } from '@fortawesome/pro-duotone-svg-icons'
</script>
<Fa
icon={faFlag}
primaryColor="red"
secondaryColor="#000000"
primaryOpacity={0.8}
secondaryOpacity={0.6}
swapOpacity/>
Duotone Icons Theme
<script>
import Fa from 'svelte-fa'
import { faFlag } from '@fortawesome/pro-duotone-svg-icons'
const theme = {
primaryColor: 'red',
secondaryColor: '#000000',
primaryOpacity: 0.8,
secondaryOpacity: 0.6,
}
</script>
<Fa
icon={faFlag}
{...theme}/>