firebird-icon-lib 1.0.11 → 1.1.0

package/README.md

@@ -181,15 +181,15 @@ Use TypeScript autocomplete to see all available icon names, or check the `IconN
 
 ### Icon Component Props
 
-| Prop            | Type                  | Default         | Description                                              |
-| --------------- | --------------------- | --------------- | -------------------------------------------------------- |
-| `name`          | `IconName`            | **required**    | The name of the icon to display                          |
-| `size`          | `number`              | `12`            | Font size of the icon (in pixels)                        |
-| `color`         | `string`              | -               | Color of the icon (uses `currentColor` by default)       |
-| `className`     | `string`              | `'_demo_glyph'` | CSS class for the wrapper div. Use `''` for inline icons |
-| `iconClassName` | `string`              | `'icon'`        | CSS class for the icon span element                      |
-| `showLabel`     | `boolean`             | `false`         | Show the icon name as a label                            |
-| `style`         | `React.CSSProperties` | -               | Inline styles to apply                                   |
+| Prop            | Type                  | Default         | Description                                                                                            |
+| --------------- | --------------------- | --------------- | ------------------------------------------------------------------------------------------------------ |
+| `name`          | `IconName`            | **required**    | The name of the icon to display. Must be a valid icon name from the icon map.                          |
+| `size`          | `number`              | `12`            | Font size of the icon in pixels.                                                                       |
+| `color`         | `string`              | -               | Color of the icon. Uses `currentColor` by default if not specified.                                    |
+| `className`     | `string \| undefined` | `'_demo_glyph'` | CSS class for the wrapper div. Use `''` (empty string) to render only the icon span without a wrapper. |
+| `iconClassName` | `string`              | `'icon'`        | CSS class for the icon span element. This is added alongside the `icon-{name}` class.                  |
+| `showLabel`     | `boolean`             | `false`         | Whether to display the icon name as a label below the icon.                                            |
+| `style`         | `React.CSSProperties` | -               | Inline styles to apply to the wrapper element (or icon span if `className` is empty string).           |
 
 ### TypeScript Types
 
@@ -218,19 +218,22 @@ const html = generateIconFontHTML('spam_management');
 
 ## HTML/CSS Usage
 
-You can also use icons directly in HTML. **Make sure to include the CSS file first:**
+You can also use icons directly in HTML without React. **Make sure to include the CSS file first:**
 
 ```html
 <!-- Required: Import the CSS file -->
 <link rel="stylesheet" href="node_modules/firebird-icon-lib/dist/style.css" />
 
-<!-- Then use icons in your HTML -->
-<div class="_demo_glyph">
-  <span class="icon">&#xf000;</span> icon-spam_management
-</div>
+<!-- Then use icons in your HTML with the icon-{name} class format -->
+<span class="icon-cash"></span>
+<span class="icon-search"></span>
+<span class="icon-spam_management"></span>
+
+<!-- Or with the wrapper div for demo purposes -->
+<div class="_demo_glyph"><span class="icon-cash"></span> icon-cash</div>
 ```
 
-The CSS file is required as it contains the `@font-face` declaration and icon styles needed for the fonts to work.
+The CSS file is required as it contains the `@font-face` declaration and icon styles (using `:before` pseudo-elements) needed for the fonts to work. Each icon uses the class format `icon-{iconName}` where `{iconName}` matches the icon name from the icon map.
 
 ## Development
 

package/dist/Icon.d.ts

@@ -1,22 +1,77 @@
 import React from 'react';
 import type { IconName } from './iconMap';
+/**
+ * Props for the Icon component
+ *
+ * @interface IconProps
+ */
 export interface IconProps {
+    /** The name of the icon to display. Must be a valid icon name from the icon map. */
     name: IconName;
+    /**
+     * CSS class name for the wrapper div element.
+     * - If `undefined`: defaults to `'_demo_glyph'`
+     * - If `''` (empty string): renders only the icon span without a wrapper div
+     * - If a string value: uses that as the wrapper class name
+     */
     className?: string;
+    /**
+     * CSS class name for the icon span element.
+     * @default 'icon'
+     */
     iconClassName?: string;
+    /**
+     * Whether to display the icon name as a label below the icon.
+     * @default false
+     */
     showLabel?: boolean;
+    /**
+     * Inline styles to apply to the wrapper element (or icon span if className is empty).
+     */
     style?: React.CSSProperties;
+    /**
+     * Color of the icon. Uses `currentColor` by default if not specified.
+     */
     color?: string;
+    /**
+     * Font size of the icon in pixels.
+     * @default 12
+     */
     size?: number;
 }
 /**
- * Icon component - Renders icons using icon font (span-based)
+ * Icon component that renders icons using icon font (CSS-based icon font).
  *
+ * This component uses CSS classes and the `:before` pseudo-element to display icons
+ * from the icon font. The icon font must be loaded via the `style.css` file.
+ *
+ * @component
  * @example
  * ```tsx
+ * // Basic usage
  * <Icon name="spam_management" />
+ *
+ * // With custom size and color
+ * <Icon name="search" size={24} color="#ff0000" />
+ *
+ * // Inline icon (no wrapper div)
+ * <Icon name="search" size={20} className="" />
+ *
+ * // With label
  * <Icon name="add" showLabel={true} />
+ *
+ * // With custom styling
+ * <Icon
+ *   name="settings"
+ *   size={32}
+ *   color="#646cff"
+ *   className="my-icon-wrapper"
+ *   style={{ margin: '10px' }}
+ * />
  * ```
+ *
+ * @param {IconProps} props - The component props
+ * @returns {JSX.Element | null} The rendered icon component or null if icon not found
  */
 export declare const Icon: React.FC<IconProps>;
 export default Icon;

package/dist/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4CpC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG1C;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB,oFAAoF;IACpF,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyDpC,CAAC;AAEF,eAAe,IAAI,CAAC"}