Add svg-icons
to your FASTN.ftd
-- fastn.dependency: fastn-community.github.io/svg-icons
Font Awesome
And then use helpers from this module to show icons:
-- import: fastn-community.github.io/svg-icons/fa
-- fa.brand: font-awesome
-- fa.regular: bell
size: 64
![](//raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/brands/font-awesome.svg)
![](//raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/regular/bell.svg)
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
-- 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
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