@fiscozen/icons
Design system icon components (Font Awesome). For usage documentation and examples, see Storybook (Documentation/Media/FzIcon and Documentation/Media/FzIconBackground).
FzIcon
Base icon component. Renders a single icon with configurable size and variant.
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | required | Font Awesome icon name (e.g. bell, check). |
size | IconSize | 'lg' | Size: xs, sm, md, lg, xl, 2xl. |
variant | IconVariant | 'far' | Font Awesome style (e.g. fas, far, fal). |
spin | boolean | false | Enables spinning animation. |
To apply design system text color, use the v-color directive on the component (e.g. <FzIcon v-color:blue="500" />). The root element is a <span role="presentation">, so v-color is valid (SPAN is allowed in @fiscozen/style) and the icon can be nested inside <p> or <span> without invalid HTML.
FzIconBackground
Wrapper around FzIcon that adds a configurable background to the icon container (rounded, padded). Same props as FzIcon plus backgroundColor; use when you need an icon with a visible background (e.g. status indicators, badges).
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | required | Font Awesome icon name (e.g. bell, check). |
size | IconSize | 'lg' | Size: xs, sm, md, lg, xl, 2xl. |
variant | IconVariant | 'far' | Font Awesome style (e.g. fas, far, fal). |
spin | boolean | false | Enables spinning animation. |
backgroundColor | string | 'core-white' | Tailwind background color token (e.g. core-white, grey-100). Applied as bg-{value}. |
Notes
- For the current iteration we decided to ship icons in a bundle (svg + js style), no API or lazy loading is currently happening.
- To keep the bundle size low we use Font Awesome "icon kits" (Pro), so the shipped set is tailored. Configure
.npmrcin the app root (see this repo); setFONTAWESOME_PACKAGE_TOKENin the environment for the Pro token.