@fiscozen/icons 0.1.38 → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# @fiscozen/icons
+
+## 1.0.0
+
+### Major Changes
+
+- Add FzIconBackground component
+
+## 0.2.0
+
+### Minor Changes
+
+- a26bc2c: Add support to v-color directive
+- 2d4fc5e: Add FzIconBackground component

package/README.md

@@ -1,7 +1,33 @@
 # @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 <code>v-color</code> directive on the component (e.g. <code>&lt;FzIcon v-color:blue="500" /&gt;</code>). The root element is a <code>&lt;span role="presentation"&gt;</code>, so v-color is valid (SPAN is allowed in @fiscozen/style) and the icon can be nested inside <code>&lt;p&gt;</code> or <code>&lt;span&gt;</code> without invalid HTML.
+
+## FzIconBackground
+
+Wrapper around FzIcon that adds a configurable background to the icon container (rounded, padded). Same props as FzIcon plus <code>backgroundColor</code>; 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 <code>bg-&#123;value&#125;</code>. |
+
 ## Notes
 
-- For the current iteration we decided to ship icons in a bundle (svg + js style), no API or lazy loading is currently happening
-- In order to keep the bundle size low we are leveraging the "incon kits" Pro Font Awesome feature, therefore tailoring the icon set that we ship. In order to install the design system users therefore need to configure a `.npmrc` in the application root folder, use the one in this repo as a guideline.
-To avoid exposing secrets the Font Awesome Pro token should be configured in a environment variable as `FONTAWESOME_PACKAGE_TOKEN`
+- 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 `.npmrc` in the app root (see this repo); set `FONTAWESOME_PACKAGE_TOKEN` in the environment for the Pro token.