@org-design-system/icons 0.1.4 → 0.1.6

package/README.md

@@ -1,40 +1,43 @@
-# @org-design-system/icons
+# @org-design-system/icons 🛰️
 
-A collection of high-quality SVG icons optimized as React components.
+A specialized icon library for the Antaris Design System. This package transforms raw SVGs into optimized, type-safe React components.
 
-## 🛰️ Features
-- **'Icon' Suffix**: All components are named with an `Icon` suffix (e.g., `SatelliteIcon`) to avoid conflicts.
-- **Dynamic Coloring**: Uses `currentColor` so you can color icons using standard CSS `color` or Tailwind text classes.
-- **Optimized**: Tiny bundle size with full tree-shaking support.
+## 🚀 Features
 
-## 🛠️ How it Works
+- **Icon Suffix**: All components follow the `[Name]Icon` convention (e.g., `SatelliteIcon`) for clarity and to avoid collision with standard HTML tags.
+- **Dynamic Styling**: uses `currentColor` for fills/strokes, allowing icons to be styled with standard CSS `color` or Tailwind `text-*` utilities.
+- **Sizing Control**: Standardized `width` and `height` props with sensible defaults.
+- **Performance**: Fully tree-shakable ES modules.
 
-### 1. Source SVGs
-Add new SVG files to the `svg/` directory.
+## 🛠️ Build Process
 
-### 2. Build Process
-Run `npm run build` to trigger the `build.js` script.
-- It cleans the `src/` folder.
-- Uses `SVGR` to transform SVGs into standard React components.
-- Automatically appends the `Icon` suffix to filenames and component names.
-- Generates a central `src/index.ts` for clean exports.
+We use a custom automated pipeline to handle icons:
+
+1. **SVG Optimization**: Raw SVGs are processed to remove hardcoded colors, unnecessary metadata, and standard styling.
+2. **SVGR Transformation**: optimized SVGs are converted into React components.
+3. **Component Generation**: Components are written to `src/components/` with proper React and TypeScript boilerplate.
+4. **Index Generation**: A central export file is created to facilitate clean imports.
+
+### Adding New Icons
+Simply drop your `.svg` file into the `svg/` directory and run:
+```bash
+npm run build
+```
 
 ## 📦 Usage
 
 ```tsx
 import { RocketIcon, SatelliteIcon } from "@org-design-system/icons";
 
-function App() {
+function Dashboard() {
   return (
-    <div className="flex gap-4 text-blue-500">
-      <RocketIcon width={24} height={24} />
-      <SatelliteIcon className="animate-spin" />
+    <div className="text-zinc-50 flex gap-2">
+      <RocketIcon className="text-blue-500" width={24} height={24} />
+      <span>Mission Control</span>
     </div>
   );
 }
 ```
 
-## 📝 Best Practices
-- **Consistency**: Always use the `Icon` suffixed names.
-- **Sizing**: Use `width` and `height` props for precise control.
-- **Color**: Control colors via parent text classes (e.g., `text-red-500`).
+---
+*Precision tools for visual communication.*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@org-design-system/icons",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Icon components for the @org-design-system",
   "publishConfig": {
     "access": "public"
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "tailwindcss": "^4.0.0",
-    "@org-design-system/styles": "0.1.4"
+    "@org-design-system/styles": "0.1.6"
   },
   "peerDependencies": {
     "react": ">=18"