@heartpace/icons 0.1.1 → 0.1.2

package/README.md

@@ -102,21 +102,84 @@ Component names are automatically generated from the folder structure and file n
 After building, import icons from the package:
 
 ```tsx
-import { Icon, UiButtonIcon, ActionsSave } from 'heartpace-icons';
+import { ArrowsIconsArrowArrow2, GeneralIconlyLightHome, FlagsUsa } from '@heartpace/icons';
 
 function MyComponent() {
   return (
     <div>
-      <Icon className="w-6 h-6" />
-      <UiButtonIcon width={24} height={24} fill="currentColor" />
-      <ActionsSave stroke="blue" />
+      {/* Default size (24x24) with custom stroke color */}
+      <ArrowsIconsArrowArrow2 stroke="#00A0E5" />
+      
+      {/* Custom size with custom stroke color */}
+      <ArrowsIconsArrowArrow2 width={100} height={100} stroke="#00A0E5" />
+      
+      {/* Using CSS color via className */}
+      <GeneralIconlyLightHome className="w-6 h-6 text-blue-500" stroke="currentColor" />
+      
+      {/* Flags keep their original colors */}
+      <FlagsUsa width={32} height={32} />
     </div>
   );
 }
 ```
 
+### Color Control
+
+All icons (except flags) use `currentColor` for `stroke` and `fill` attributes, which means:
+
+- **Pass `stroke` or `fill` props** to set specific colors: `<Icon stroke="#00A0E5" />`
+- **Use CSS `color` property** via `className`: `<Icon className="text-blue-500" stroke="currentColor" />`
+- **Flags preserve their original colors** and cannot be recolored
+
 All icons accept standard React SVG props (`className`, `width`, `height`, `fill`, `stroke`, etc.).
 
+## Categories
+
+The library automatically generates a `categories.json` file that groups all icons by their root category (the first folder in the path). This file is available in the `dist` folder and can be imported for programmatic access to icons by category.
+
+### Accessing Categories
+
+```tsx
+// Import categories JSON
+import categories from '@heartpace/icons/categories';
+// or
+import categories from '@heartpace/icons/categories.json';
+
+// Access icons by category
+const arrowsIcons = categories.Arrows;
+const flagsIcons = categories.Flags;
+const generalIcons = categories.General;
+
+// Each icon has:
+// - componentName: The React component name
+// - relativePath: Path from icons directory
+// - fileName: The SVG file name
+
+console.log(arrowsIcons[0]);
+// {
+//   componentName: "ArrowsIconArrowCloseMenu",
+//   relativePath: "Arrows/Icon/Arrow/Close menu.svg",
+//   fileName: "Close menu.svg"
+// }
+```
+
+### TypeScript Support
+
+TypeScript types are included for the categories:
+
+```tsx
+import type { Categories, IconInfo } from '@heartpace/icons/categories';
+
+const categories: Categories = require('@heartpace/icons/categories.json');
+
+// IconInfo type
+interface IconInfo {
+  componentName: string;
+  relativePath: string;
+  fileName: string;
+}
+```
+
 ## Tree-shaking Support
 
 This library is fully optimized for tree-shaking! Only the icons you import will be included in your final bundle.

package/dist/categories.d.ts

@@ -0,0 +1,23 @@
+// Auto-generated file - do not edit manually
+// Generated from SVG files in src/icons
+
+export interface IconInfo {
+  componentName: string;
+  relativePath: string;
+  fileName: string;
+}
+
+export interface Categories {
+  [category: string]: IconInfo[];
+}
+
+declare const categories: Categories;
+export default categories;
+export { categories };
+
+// For JSON import support
+declare module '@heartpace/icons/categories.json' {
+  const categories: Categories;
+  export default categories;
+  export { IconInfo, Categories };
+}