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.