@moamfar/icon-pack 1.0.0 → 1.0.1

package/README.md

@@ -1,6 +1,19 @@
 # @moamfar/icon-pack
 
-A collection of beautiful, weight-adjustable SVG icons.
+![npm version](https://badge.fury.io/js/@moamfar/icon-pack.svg)
+![npm downloads](https://img.shields.io/npm/dm/@moamfar/icon-pack.svg)
+![License](https://img.shields.io/npm/l/@moamfar/icon-pack.svg)
+![Typescript](https://img.shields.io/badge/TypeScript-5.0-blue)
+
+ A collection of beautiful, weight-adjustable SVG icons.
+
+## Features
+
+*   **🌳 Tree-shakable:** Only import the icons you use.
+*   **🎨 Customizable:** Control size, color, and weight (Outline/Bold) easily.
+*   **✨ TypeScript:** Built with full type safety support.
+*   **🛠 Framework Agnostic:** Works with React, Next.js, Vite, and CRA.
+*   **⚡ Zero Dependencies:** Lightweight footprint.
 
 ## Installation
 
@@ -20,18 +33,17 @@ yarn add @moamfar/icon-pack
 import { Dislike, Heart, HeartAngle } from "@moamfar/icon-pack";
 
 const App = () => {
-return (
-<div>
-<Dislike size={32} color="black" />
+  return (
+    <div>
+      <Dislike size={32} color="black" />
       <Heart size={32} color="blue" weight="bold" />
-<HeartAngle size={48} className="text-red-500" />
-</div>
-);
+      <HeartAngle size={48} className="text-red-500" />
+    </div>
+  );
 };
 ```
 
-
-
+ 
 <h3>Component Props</h3>
 
 <table style="border-collapse: collapse; width: 100%; min-width: 500px;">
@@ -77,8 +89,7 @@ return (
 There are currently **17** icons.
 
 <!-- Icons Grid Start -->
-
-<table style="border-collapse: collapse; width: 100%; min-width: 500px;">
+ <table style="border-collapse: collapse; width: 100%; min-width: 500px;">
   <thead>
     <tr style="border-bottom: 1px solid #ddd;">
       <th style="text-align: center; padding: 12px; width: 50px;">Preview</th>
@@ -144,9 +155,14 @@ There are currently **17** icons.
     </tr>
   </tbody>
 </table>
-
 <!-- Icons Grid End -->
 
+## Keywords
+
+ A collection of beautiful, weight-adjustable SVG icons.
+
+react, icons, svg, components, ui, outline, bold, weight, typescript, tailwind, icon-library, design-system, free-icons
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moamfar/icon-pack",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A collection of beautiful, weight-adjustable SVG icons.",
   "main": "./src/generated/index.js",
   "module": "./src/generated/index.js",

package/readme.js

@@ -37,14 +37,13 @@ function getBase64Icon(componentName) {
       return `<img src="data:image/svg+xml;base64,${base64}" width="24" height="24" style="vertical-align: middle;" alt="${componentName}" />`;
     }
   }
-  return "";
+  return `<code>${componentName}</code>`;
 }
 
 // 3. Generate HTML Table for Icons
 function generateIconList(components) {
   if (components.length === 0) return "No icons found.";
 
-  // Using HTML ensures perfect alignment in VS Code
   let tableHTML = `<table style="border-collapse: collapse; width: 100%; min-width: 500px;">\n  <thead>\n    <tr style="border-bottom: 1px solid #ddd;">\n      <th style="text-align: center; padding: 12px; width: 50px;">Preview</th>\n      <th style="text-align: left; padding: 12px;">Name</th>\n      <th style="text-align: center; padding: 12px; width: 50px;">Preview</th>\n      <th style="text-align: left; padding: 12px;">Name</th>\n    </tr>\n  </thead>\n  <tbody>\n`;
 
   for (let i = 0; i < components.length; i += 2) {
@@ -72,10 +71,9 @@ function generateIconList(components) {
   return tableHTML;
 }
 
-// 4. Generate HTML Table for Props
+// 4. Generate Props Table
 function generatePropsTable() {
   return `
-
 <h3>Component Props</h3>
 
 <table style="border-collapse: collapse; width: 100%; min-width: 500px;">
@@ -138,7 +136,20 @@ try {
   // 3. Construct README Content
   const readmeContent = `# ${pkgName}
 
-${pkgDesc}
+![npm version](https://badge.fury.io/js/${pkgName}.svg)
+![npm downloads](https://img.shields.io/npm/dm/${pkgName}.svg)
+![License](https://img.shields.io/npm/l/${pkgName}.svg)
+![Typescript](https://img.shields.io/badge/TypeScript-5.0-blue)
+
+ ${pkgDesc}
+
+## Features
+
+*   **🌳 Tree-shakable:** Only import the icons you use.
+*   **🎨 Customizable:** Control size, color, and weight (Outline/Bold) easily.
+*   **✨ TypeScript:** Built with full type safety support.
+*   **🛠 Framework Agnostic:** Works with React, Next.js, Vite, and CRA.
+*   **⚡ Zero Dependencies:** Lightweight footprint.
 
 ## Installation
 
@@ -158,27 +169,31 @@ yarn add ${pkgName}
 import { ${components.slice(0, 3).join(", ")} } from "${pkgName}";
 
 const App = () => {
-return (
-<div>
-<${components[0]} size={32} color="black" />
+  return (
+    <div>
+      <${components[0]} size={32} color="black" />
       <${components[1]} size={32} color="blue" weight="bold" />
-<${components[2]} size={48} className="text-red-500" />
-</div>
-);
+      <${components[2]} size={48} className="text-red-500" />
+    </div>
+  );
 };
 \`\`\`
 
-${propsTableHTML}
+ ${propsTableHTML}
 
 ## Available Icons
 
 There are currently **${components.length}** icons.
 
 <!-- Icons Grid Start -->
+ ${iconListHTML}
+<!-- Icons Grid End -->
 
-${iconListHTML}
+## Keywords
 
-<!-- Icons Grid End -->
+ ${pkgDesc}
+
+react, icons, svg, components, ui, outline, bold, weight, typescript, tailwind, icon-library, design-system, free-icons
 
 ## License
 
@@ -187,7 +202,7 @@ MIT
 
   // 4. Write to file
   fs.writeFileSync(readmeOutputPath, readmeContent);
-  console.log(`✅ README.md generated successfully!`);
+  console.log(`✅ README.md generated successfully with SEO tags!`);
 } catch (error) {
   console.error("❌ Error generating README:", error);
   process.exit(1);