The files in this directory are used to generate a custom icon library using
icons from the free Fontawesome collection. This
is used by the Icon
component to render icons and by various other components
(e.g. Alert
, Button
, Checkbox
, etc) which include icons.
Fontawesome has 3 free sets: the solid
icons, the regular
icons (which
more accurately should be called the outline
icons) and the brands
.
Icons can be included from either of those sets.
It is also possible to add custom SVG icons that will be included in the generated icon library.
The badger-ui
library defines its own small set of core icons. You can
extend this with additional icons for other projects which use the badger-ui
library.
As of March 2023, the icons library is built using the svg-icon-librarian.
See the documentation for that module to understand how everything works.
The config.yaml
file defines the icons that should be included in the icon
library.
The solid
and regular
configuration items should list the names of the icons
from the solid and regular sets which should be included.
sets:
solid:
- arrow-up
- arrow-down
regular:
- check-circle
- check-square
You can add custom SVG icons by adding them to the custom
directory.
Each of the files in the custom
directory will be added as an icon
using the filename (without the .svg
extension) as the name for the
icon.
There is also an icons
mapping in the configuration file which allows
you to create aliases to other icons. For example, you can create warning
as an alias for the exclamation-triangle
icon in the solid
set. This
is ideal for forgetful people who can’t remember long names like
exclamation-triangle
and for lazy people who can’t be bothered to type them.
Aliases are also useful for “semantic” naming. For example, you could define
the portfolio
icon as an alias to the briefcase
icon in the solid set.
icons:
portfolio: solid:briefcase
If at some point in the future you decide to use a different icon to
represent portfolios then you only need to update the alias here and
then all references to the portfolio
icon in your code will result
in the new icon being used.
There’s another reason why aliases are awesome. That’s because they
eliminate the need to specify which icons have come from the regular
icon set. When you’re including an icon using the Icon
component you
can specify the name of a solid
icon or an alias to an icon using just the
name
property.
<Icon name="arrow-up"/> // solid icon
<Icon name="warning"/> // icon alias
In the badger-ui
library you can rebuild the icons library as:
pnpm icons
The badger-ui
library only defines a small core set of icons that are used by
the badger-ui
components. When you incorporate the badger-ui
library into another
project you can use the same script to add further icons that are specific
to your project.
See the documentation for svg-icon-librarian for further details.