Add svg-icons to your FASTN.ftd

-- fastn.dependency: fastn-community.github.io/svg-icons

Lang:

ftd

Font Awesome

And then use helpers from this module to show icons:

Using font-awesome icons

-- import: fastn-community.github.io/svg-icons/fa

-- fa.brand: font-awesome
-- fa.regular: bell
size: 64

Lang:

ftd

Font-Awesome icon names you can get by browsing this folder, it contains three folders, brands, which are accessed via e.g. -- fa.brand: apple, files in regular can be accessed using fa.regular, and solid via, you guessed it, fa.solid.

Phosphor Icons

Using Phosphor Icons

-- import: fastn-community.github.io/svg-icons/phosphor

-- phosphor.bold: app-store-logo
size: 200

-- phosphor.duotone: alarm
size: 100
-- phosphor.fill: airplay
-- phosphor.light: align-left

Lang:

ftd

Similarly to use Phosphor Icons, visit this folder to get the name of icons. For each folder we have phosphor.<folder-name> components, eg phosphor.bold and so on.

size

You can specify size property to any of these components to control their size. The default value of the size is 24px.

color

You can add color property to the parent element where you are placing the icon.

Demos