Tiny FontAwesome component for Svelte
npm install svelte-fashell
npm install svelte-fa
`
Install FontAwesome icons via [official packages][fontawesome-npm], for example:
`shell
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons
`
Icons gallery: [FontAwesome icons][fontawesome-icons]
$3
You may need to install the component as a devDependency:
`shell
npm install svelte-fa -D
`
$3
You may need to import the component explicitly as below:
`js
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:
`ts
// app.d.ts
declare module '@fortawesome/pro-solid-svg-icons/index.es' {
export * from '@fortawesome/pro-solid-svg-icons';
}
`
Usage
`html
`
Fa Properties
`html
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][fontawesome-npm], for example: @fortawesome/free-solid-svg-icons, icons gallery: [FontAwesome icons][fontawesome-icons]
* class: string values ${your preffered any css class}
* size: string values xs, sm, lg or 2x, 3x, 4x, ..., ${number}x
* color: string icon color, default currentColor
* fw: boolean fixed width
* pull: string values left, right
* scale: number | string transform scale, unit is em, default 1
* translateX: number | string transform position X, unit is em, default 0
* translateY: number | string transform position Y, unit is em, default 0
* flip: string values horizontal, vertical, both
* rotate: number | string values 90, 180, 270, 30, -30 ...
* spin: boolean spin icons
* pulse: boolean pulse spin icons
Layering & Text
`js
import Fa, {
FaLayers,
FaLayersText,
} from 'svelte-fa';
`
`html
size="4x"
pull="left"
>
scale={0.25}
rotate={-30}
color="white"
style="font-weight: 900"
>
NEW
`
$3
* size: string values xs, sm, lg or 2x, 3x, 4x, ..., ${number}x
* pull: string values left, right
$3
* size: string values xs, sm, lg or 2x, 3x, 4x, ..., ${number}x
* color: string icon color, default currentColor
* scale: number | string transform scale, unit is em, default 1
* translateX: number | string transform position X, unit is em, default 0
* translateY: number | string transform position Y, unit is em, default 0
* flip: string values horizontal, vertical, both
* rotate: number | string values 90, 180, 270, 30, -30 ...
Duotone Icons
`html
icon={faFlag}
primaryColor="red"
secondaryColor="#000000"
primaryOpacity={0.8}
secondaryOpacity={0.6}
swapOpacity
/>
`
$3
`html
icon={faFlag}
{...theme}
/>
``
|
Cweili |
Marek Dědič |
Gtmnayan |
Rui Sousa |
Theodore Brown |
Mirco Sanguineti |
|
Alon Krymgand |
Conner |
Kawsar Ahmed |
Mark Volkmann |
Robin Modisch |
Rémi Kalbe |
|
Null |