svelte-fa
v4.0.3
Published
Tiny FontAwesome component for Svelte
Downloads
70,336
Maintainers
Readme
svelte-fa
Tiny FontAwesome component for Svelte.
- FontAwesome version 5 and 6
- FontAwesome svg icons
- Tree-shakable, only import used icons
- No CSS file required
- FontAwesome layering
- FontAwesome duotone icons
Installation
npm install svelte-fa
Install FontAwesome icons via official packages, for example:
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons
Icons gallery: FontAwesome icons
Work with Sapper
You may need to install the component as a devDependency:
npm install svelte-fa -D
Work with SvelteKit/Vite
You may need to import the component explicitly as below:
import Fa from 'svelte-fa/dist/fa.svelte'
import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons/index.es'
When using typescript with SvelteKit/Vite, you may also needed to add type definitions that redirect to the non-index.es
export:
// app.d.ts
declare module '@fortawesome/pro-solid-svg-icons/index.es' {
export * from '@fortawesome/pro-solid-svg-icons';
}
Usage
<script>
import Fa from 'svelte-fa'
import { faFlag } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from '@fortawesome/free-brands-svg-icons';
</script>
<Fa icon={faFlag} />
<Fa icon={faGithub} />
Fa
Properties
<Fa
icon={faFlag}
class="bg-gold"
size="2x"
color="#ff0000"
fw
pull="left"
scale={1.2}
translateX={0.2}
translateY={0.2}
rotate={90}
flip="horizontal"
spin
pulse
/>
icon
: icon from FontAwesome packages, for example:@fortawesome/free-solid-svg-icons
, icons gallery: FontAwesome iconsclass
:string
values${your preffered any css class}
size
:string
valuesxs
,sm
,lg
or2x
,3x
,4x
, ...,${number}x
color
:string
icon color, defaultcurrentColor
fw
:boolean
fixed widthpull
:string
valuesleft
,right
scale
:number | string
transform scale, unit isem
, default1
translateX
:number | string
transform position X, unit isem
, default0
translateY
:number | string
transform position Y, unit isem
, default0
flip
:string
valueshorizontal
,vertical
,both
rotate
:number | string
values90
,180
,270
,30
,-30
...spin
:boolean
spin iconspulse
:boolean
pulse spin icons
Layering & Text
import Fa, {
FaLayers,
FaLayersText,
} from 'svelte-fa';
<FaLayers
size="4x"
pull="left"
>
<Fa icon={faCertificate} />
<FaLayersText
scale={0.25}
rotate={-30}
color="white"
style="font-weight: 900"
>
NEW
</FaLayersText>
</FaLayers>
FaLayers
Properties
size
:string
valuesxs
,sm
,lg
or2x
,3x
,4x
, ...,${number}x
pull
:string
valuesleft
,right
FaLayersText
Properties
size
:string
valuesxs
,sm
,lg
or2x
,3x
,4x
, ...,${number}x
color
:string
icon color, defaultcurrentColor
scale
:number | string
transform scale, unit isem
, default1
translateX
:number | string
transform position X, unit isem
, default0
translateY
:number | string
transform position Y, unit isem
, default0
flip
:string
valueshorizontal
,vertical
,both
rotate
:number | string
values90
,180
,270
,30
,-30
...
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}
/>