@nikaat-crop/es-icons 0.0.9 → 0.2.0

package/README.md

@@ -16,7 +16,7 @@ A comprehensive collection of beautiful and modern SVG icons specifically design
 </p>
 </div>
 
-## 📸 Preview
+## 📸 Demo
 
 <div align="center">
   <img src="./assets/preview.png" alt="ES Icons Preview" width="100%" />
@@ -94,6 +94,70 @@ import * as Icons from '@nikaat-crop/es-icons';
 
 And many more! Check out the [full documentation](https://es-icons.vercel.app/) for a complete list.
 
+## ➕ Adding New Icons
+
+Want to contribute a new icon to the collection? Follow these simple steps:
+
+### Step 1: Prepare Your SVG
+1. Place your SVG file in the `src/svgs/` directory
+2. **Important guidelines:**
+   - Set the icon size to **24×24 pixels**
+   - Use `#000` (black) for colors that should be customizable from outside
+   - Ensure the SVG is optimized and clean
+
+```xml
+<!-- ✅ Good example -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2L2 7V10C2 16 6 20.5 12 22C18 20.5 22 16 22 10V7L12 2Z" fill="#000"/>
+</svg>
+
+<!-- ❌ Avoid fixed colors if you want them to be customizable -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2L2 7V10C2 16 6 20.5 12 22C18 20.5 22 16 22 10V7L12 2Z" fill="#3B82F6"/>
+</svg>
+```
+
+### Step 2: Generate React Component
+Run the icon generation script to automatically create the React component:
+
+```bash
+npm run icons:generate
+```
+
+This command will:
+- Convert your SVG to a React component using SVGR
+- Add TypeScript definitions
+- Update the main exports in `src/index.ts`
+
+### Step 3: Update Storybook
+Add your new icon to the Storybook gallery by importing it in `src/stories/icons.stories.tsx`:
+
+```tsx
+// Add your import
+import { YourNewIcon } from '../index';
+
+// Add to the icons array
+const icons = [
+  // ... existing icons
+  { name: 'YourNewIcon', component: YourNewIcon },
+];
+```
+
+### Step 4: Test Your Icon
+1. Start Storybook to preview your icon:
+   ```bash
+   npm run storybook
+   ```
+2. Verify that your icon displays correctly
+3. Test that colors can be customized via props
+
+### Step 5: Publish (For Maintainers)
+Once everything looks good, publish the updated package:
+
+```bash
+npm run release
+```
+
 ## 🎨 Icon Props
 
 All icons accept standard SVG props:

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@nikaat-crop/es-icons",
-  "version": "0.0.9",
+  "version": "0.2.0",
   "description": "A comprehensive collection of beautiful and modern SVG icons specifically designed for Skenas (اسکناس) project, featuring 160+ carefully crafted financial and service icons with TypeScript support.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
     "release": "node release.js",
-    "icons:generate": "node script/svgr-convert-only-new.js && node script/update-icon-exports.js && node script/update-storybook.js",
+    "icons:generate": "node script/svgr-convert-only-new.js && node script/update-icon-exports.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

package/script/update-storybook.js

@@ -1,66 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const ICONS_DIR = path.resolve(__dirname, '../src/icons');
-const STORYBOOK_FILE = path.resolve(__dirname, '../src/stories/icons.stories.tsx');
-const INDEX_FILE = path.resolve(__dirname, '../src/index.ts');
-
-function toPascalCase(str) {
-  return str
-    .split(/[-_]/)
-    .map(s => s.charAt(0).toUpperCase() + s.slice(1))
-    .join('');
-}
-
-function updateStorybook() {
-  console.log('🔄 Updating storybook with new icons...');
-  
-  // Get all .tsx files from icons directory
-  const iconFiles = fs.readdirSync(ICONS_DIR)
-    .filter(f => f.endsWith('.tsx'))
-    .map(f => path.basename(f, '.tsx'));
-
-  // Convert to PascalCase names
-  const iconNames = iconFiles.map(toPascalCase);
-  iconNames.sort(); // Sort alphabetically
-
-  // Read current storybook file
-  let storybookContent = fs.readFileSync(STORYBOOK_FILE, 'utf8');
-
-  // Update imports section
-  const importStart = storybookContent.indexOf('import {');
-  const importEnd = storybookContent.indexOf("} from '../index';") + "} from '../index';".length;
-  
-  const newImports = `import {\n  ${iconNames.join(',\n  ')}\n} from '../index';`;
-  
-  storybookContent = storybookContent.substring(0, importStart) + 
-                   newImports + 
-                   storybookContent.substring(importEnd);
-
-  // Update icons array
-  const arrayStart = storybookContent.indexOf('const icons = [');
-  const arrayEnd = storybookContent.indexOf('];', arrayStart) + 2;
-  
-  const iconEntries = iconNames.map(name => 
-    `    { name: '${name}', component: ${name} }`
-  );
-  
-  const newIconsArray = `const icons = [\n${iconEntries.join(',\n')}\n  ];`;
-  
-  storybookContent = storybookContent.substring(0, arrayStart) + 
-                   newIconsArray + 
-                   storybookContent.substring(arrayEnd);
-
-  // Write updated content back to file
-  fs.writeFileSync(STORYBOOK_FILE, storybookContent);
-  
-  console.log(`✅ Storybook updated with ${iconNames.length} icons`);
-  console.log('📋 Updated icons:', iconNames.join(', '));
-}
-
-// Run if called directly
-if (require.main === module) {
-  updateStorybook();
-}
-
-module.exports = { updateStorybook };