@moamfar/icon-pack 1.0.1 → 1.0.3

package/package.json

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

package/readme.js

@@ -5,7 +5,22 @@ const path = require("path");
 const packageJsonPath = path.join(__dirname, "package.json");
 const generatedIndexPath = path.join(__dirname, "src", "generated", "index.ts");
 const readmeOutputPath = path.join(__dirname, "README.md");
-const rawIconsDir = path.join(__dirname, "src", "raw", "outline");
+
+// Define all weight directories
+const WEIGHTS = ["bold", "boldduotone", "broken", "lineduotone", "linear", "outline"];
+const weightConfigs = {
+  bold: { dir: "bold", label: "Bold" },
+  boldduotone: { dir: "boldduotone", label: "Bold Duotone" },
+  broken: { dir: "broken", label: "Broken" },
+  lineduotone: { dir: "lineduotone", label: "Line Duotone" },
+  linear: { dir: "linear", label: "Linear" },
+  outline: { dir: "outline", label: "Outline" },
+};
+
+// UPDATE THESE VALUES FOR YOUR REPOSITORY
+const GITHUB_USERNAME = "moamfar"; // Replace with your GitHub username
+const GITHUB_REPO_NAME = "icon-pack"; // Replace with your repository name
+const GITHUB_BRANCH = "main"; // Or "master" depending on your default branch
 
 // --- UTILITIES ---
 
@@ -25,185 +40,430 @@ function getExportedComponents(indexPath) {
   return components.sort();
 }
 
-// 2. Convert SVG file to a Base64 Data URI string
-function getBase64Icon(componentName) {
-  const candidates = [`${componentName}.svg`, `${componentName.toLowerCase()}.svg`];
+// 2. Get base component name (without weight suffix)
+function getBaseComponentName(componentName) {
+  // Remove weight suffixes if they exist
+  for (const weight of WEIGHTS) {
+    const suffix = weight.charAt(0).toUpperCase() + weight.slice(1);
+    if (componentName.endsWith(suffix)) {
+      return componentName.slice(0, -suffix.length);
+    }
+  }
+  return componentName;
+}
+
+// 3. Find SVG file for a component and weight
+function findSvgFile(baseName, weight) {
+  const weightDir = path.join(__dirname, "src", "raw", weightConfigs[weight].dir);
+
+  if (!fs.existsSync(weightDir)) {
+    return null;
+  }
+
+  // Common naming patterns
+  const candidates = [
+    `${baseName}.svg`,
+    `${baseName.toLowerCase()}.svg`,
+    `${baseName.charAt(0).toLowerCase() + baseName.slice(1)}.svg`,
+    `${baseName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}.svg`,
+  ];
 
   for (const filename of candidates) {
-    const fullPath = path.join(rawIconsDir, filename);
+    const fullPath = path.join(weightDir, filename);
     if (fs.existsSync(fullPath)) {
-      const svgContent = fs.readFileSync(fullPath, "utf-8");
-      const base64 = Buffer.from(svgContent).toString("base64");
-      return `<img src="data:image/svg+xml;base64,${base64}" width="24" height="24" style="vertical-align: middle;" alt="${componentName}" />`;
+      return { weight, filename, path: fullPath };
     }
   }
-  return `<code>${componentName}</code>`;
+
+  return null;
+}
+
+// 4. Get GitHub URL for an SVG
+function getSvgGitHubUrl(baseName, weight) {
+  const svgFile = findSvgFile(baseName, weight);
+  if (!svgFile) {
+    return null;
+  }
+
+  return `https://raw.githubusercontent.com/${GITHUB_USERNAME}/${GITHUB_REPO_NAME}/${GITHUB_BRANCH}/src/raw/${weightConfigs[weight].dir}/${svgFile.filename}`;
+}
+
+// 5. Generate icon preview with all weights
+function generateIconPreview(baseName) {
+  let previewHTML = `<div style="display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;">`;
+
+  WEIGHTS.forEach((weight) => {
+    const svgUrl = getSvgGitHubUrl(baseName, weight);
+    if (svgUrl) {
+      previewHTML += `
+        <div style="text-align: center; min-width: 40px;">
+          <img src="${svgUrl}" width="24" height="24" alt="${baseName} ${weight}" />
+          <div style="font-size: 10px; margin-top: 4px; color: #666;">${weightConfigs[weight].label}</div>
+        </div>`;
+    }
+  });
+
+  previewHTML += `</div>`;
+  return previewHTML;
+}
+
+// 6. Group components by base name
+function groupComponentsByBaseName(components) {
+  const grouped = {};
+
+  components.forEach((componentName) => {
+    const baseName = getBaseComponentName(componentName);
+    if (!grouped[baseName]) {
+      grouped[baseName] = [];
+    }
+    grouped[baseName].push(componentName);
+  });
+
+  // Convert to array and sort
+  return Object.keys(grouped)
+    .sort()
+    .map((baseName) => ({
+      baseName,
+      components: grouped[baseName].sort(),
+    }));
 }
 
-// 3. Generate HTML Table for Icons
+// 7. Generate Markdown Table with all weights
 function generateIconList(components) {
-  if (components.length === 0) return "No icons found.";
+  if (components.length === 0) return "**No icons found.**";
+
+  const groupedIcons = groupComponentsByBaseName(components);
+
+  let markdown = "| Preview (All Weights) | Icon Name | Component Names |\n";
+  markdown += "|:---:|:---|:---|\n";
+
+  groupedIcons.forEach(({ baseName, components: iconComponents }) => {
+    const preview = generateIconPreview(baseName);
+    const weightBadges = WEIGHTS.map((weight) => {
+      const weightName = weight.charAt(0).toUpperCase() + weight.slice(1);
+      const hasWeight = iconComponents.some((comp) => comp.endsWith(weightName));
+      return hasWeight
+        ? `<span style="background: #e9ecef; padding: 2px 6px; border-radius: 4px; font-size: 11px; margin: 2px; display: inline-block;">${weightConfigs[weight].label}</span>`
+        : `<span style="background: #f8f9fa; color: #adb5bd; padding: 2px 6px; border-radius: 4px; font-size: 11px; margin: 2px; display: inline-block;">${weightConfigs[weight].label}</span>`;
+    }).join(" ");
+
+    markdown += `| ${preview} | \`${baseName}\` | <div style="max-width: 200px;">${weightBadges}</div> |\n`;
+  });
+
+  return markdown;
+}
+
+// Alternative: Grid layout with 2 icons per row
+function generateIconListGrid(components) {
+  if (components.length === 0) return "**No icons found.**";
+
+  const groupedIcons = groupComponentsByBaseName(components);
+
+  let markdown = "| Preview | Icon Name & Weights | Preview | Icon Name & Weights |\n";
+  markdown += "|:---:|:---|:---:|:---|\n";
 
-  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 < groupedIcons.length; i += 2) {
+    const icon1 = groupedIcons[i];
+    const icon2 = groupedIcons[i + 1];
 
-  for (let i = 0; i < components.length; i += 2) {
-    const name1 = components[i];
-    const img1 = getBase64Icon(name1);
+    const preview1 = generateIconPreview(icon1.baseName);
+    const preview2 = icon2 ? generateIconPreview(icon2.baseName) : "";
 
-    const name2 = components[i + 1];
-    const img2 = name2 ? getBase64Icon(name2) : "";
+    const weightsList1 = WEIGHTS.map((weight) => {
+      const weightName = weight.charAt(0).toUpperCase() + weight.slice(1);
+      const hasWeight = icon1.components.some((comp) => comp.endsWith(weightName));
+      return hasWeight
+        ? `<span style="background: #4f46e5; color: white; padding: 2px 6px; border-radius: 4px; font-size: 10px; margin: 1px; display: inline-block;">${weight.charAt(0).toUpperCase()}</span>`
+        : `<span style="background: #f1f5f9; color: #64748b; padding: 2px 6px; border-radius: 4px; font-size: 10px; margin: 1px; display: inline-block;">${weight.charAt(0).toUpperCase()}</span>`;
+    }).join("");
 
-    tableHTML += `    <tr style="border-bottom: 1px solid #eee;">\n`;
-    tableHTML += `      <td style="text-align: center; padding: 10px;">${img1}</td>\n`;
-    tableHTML += `      <td style="text-align: left; padding: 10px;"><code>${name1}</code></td>\n`;
+    const name1 = `<div><strong>${icon1.baseName}</strong><br/><div style="margin-top: 4px;">${weightsList1}</div></div>`;
 
-    if (name2) {
-      tableHTML += `      <td style="text-align: center; padding: 10px;">${img2}</td>\n`;
-      tableHTML += `      <td style="text-align: left; padding: 10px;"><code>${name2}</code></td>\n`;
-    } else {
-      tableHTML += `      <td></td>\n      <td></td>\n`;
+    let name2 = "";
+    if (icon2) {
+      const weightsList2 = WEIGHTS.map((weight) => {
+        const weightName = weight.charAt(0).toUpperCase() + weight.slice(1);
+        const hasWeight = icon2.components.some((comp) => comp.endsWith(weightName));
+        return hasWeight
+          ? `<span style="background: #4f46e5; color: white; padding: 2px 6px; border-radius: 4px; font-size: 10px; margin: 1px; display: inline-block;">${weight.charAt(0).toUpperCase()}</span>`
+          : `<span style="background: #f1f5f9; color: #64748b; padding: 2px 6px; border-radius: 4px; font-size: 10px; margin: 1px; display: inline-block;">${weight.charAt(0).toUpperCase()}</span>`;
+      }).join("");
+
+      name2 = `<div><strong>${icon2.baseName}</strong><br/><div style="margin-top: 4px;">${weightsList2}</div></div>`;
     }
 
-    tableHTML += `    </tr>\n`;
+    markdown += `| ${preview1} | ${name1} | ${preview2} | ${name2} |\n`;
   }
 
-  tableHTML += `  </tbody>\n</table>`;
-  return tableHTML;
+  return markdown;
+}
+
+// 8. Generate Weight Legend
+function generateWeightLegend() {
+  let legend = "\n### Weight Legend\n\n";
+  legend += "| Symbol | Weight | Description |\n";
+  legend += "|:---:|:---|:---|\n";
+
+  WEIGHTS.forEach((weight) => {
+    const config = weightConfigs[weight];
+    legend += `| <span style="background: #4f46e5; color: white; padding: 2px 6px; border-radius: 4px; font-size: 10px;">${weight.charAt(0).toUpperCase()}</span> | **${config.label}** | ${weight} style icons |\n`;
+  });
+
+  return legend;
 }
 
-// 4. Generate Props Table
+// 9. Generate Props Table (updated for weights)
 function generatePropsTable() {
   return `
-<h3>Component Props</h3>
-
-<table style="border-collapse: collapse; width: 100%; min-width: 500px;">
-  <thead>
-    <tr style="border-bottom: 2px solid #ddd;">
-      <th style="text-align: left; padding: 8px;">Prop</th>
-      <th style="text-align: left; padding: 8px;">Type</th>
-      <th style="text-align: left; padding: 8px;">Default</th>
-      <th style="text-align: left; padding: 8px;">Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr style="border-bottom: 1px solid #eee;">
-      <td style="padding: 8px;"><code>size</code></td>
-      <td style="padding: 8px;"><code>number</code></td>
-      <td style="padding: 8px;"><code>24</code></td>
-      <td style="padding: 8px;">Sets the width and height of the icon.</td>
-    </tr>
-    <tr style="border-bottom: 1px solid #eee;">
-      <td style="padding: 8px;"><code>color</code></td>
-      <td style="padding: 8px;"><code>string</code></td>
-      <td style="padding: 8px;"><code>"currentColor"</code></td>
-      <td style="padding: 8px;">Sets the fill color.</td>
-    </tr>
-    <tr style="border-bottom: 1px solid #eee;">
-      <td style="padding: 8px;"><code>weight</code></td>
-      <td style="padding: 8px;"><code>"outline" | "bold"</code></td>
-      <td style="padding: 8px;"><code>"outline"</code></td>
-      <td style="padding: 8px;">Switches between the icon styles.</td>
-    </tr>
-    <tr style="border-bottom: 1px solid #eee;">
-      <td style="padding: 8px;"><code>...props</code></td>
-      <td style="padding: 8px;"><code>SVGAttributes</code></td>
-      <td style="padding: 8px;"><code>-</code></td>
-      <td style="padding: 8px;">Allows standard SVG props like <code>className</code>, <code>id</code>, etc.</td>
-    </tr>
-  </tbody>
-</table>
+## Component Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`size\` | \`number\` | \`24\` | Sets the width and height of the icon |
+| \`color\` | \`string\` | \`"currentColor"\` | Sets the fill color |
+| \`weight\` | \`"bold" \| "boldduotone" \| "broken" \| "lineduotone" \| "linear" \| "outline"\` | \`"outline"\` | Choose between different icon styles |
+| \`...props\` | \`SVGAttributes\` | \`-\` | Standard SVG props like \`className\`, \`id\`, etc. |
+`;
+}
+
+// 10. Generate Installation Section
+function generateInstallationSection(pkgName) {
+  return `
+## Installation
+
+\`\`\`bash
+npm install ${pkgName}
+\`\`\`
+
+or
+
+\`\`\`bash
+yarn add ${pkgName}
+\`\`\`
+
+or
+
+\`\`\`bash
+pnpm add ${pkgName}
+\`\`\`
+`;
+}
+
+// 11. Generate Usage Examples with different weights
+function generateUsageExamples(pkgName, components) {
+  const groupedIcons = groupComponentsByBaseName(components);
+
+  if (groupedIcons.length === 0) {
+    return `
+## Usage
+
+Import the icons you need and use them as React components:
+
+\`\`\`tsx
+import { IconName } from "${pkgName}";
+
+function App() {
+  return (
+    <div>
+      <IconName size={32} color="#333" weight="outline" />
+    </div>
+  );
+}
+\`\`\`
+`;
+  }
+
+  const exampleIcon = groupedIcons[0];
+  const exampleName = exampleIcon.baseName;
+
+  // Find available weights for this icon
+  const availableWeights = WEIGHTS.filter((weight) => {
+    const weightName = weight.charAt(0).toUpperCase() + weight.slice(1);
+    return exampleIcon.components.some((comp) => comp.endsWith(weightName));
+  });
+
+  return `
+## Usage
+
+Import icons by name and specify the weight:
+
+\`\`\`tsx
+import { ${exampleName} } from "${pkgName}";
+
+function App() {
+  return (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      ${availableWeights
+        .map((weight) => `<${exampleName} size={32} color="#4f46e5" weight="${weight}" />`)
+        .join("\n      ")}
+    </div>
+  );
+}
+\`\`\`
+
+### Importing specific weights:
+
+\`\`\`tsx
+// You can also import specific weight variants directly
+import { ${exampleName}Bold, ${exampleName}Linear, ${exampleName}Outline } from "${pkgName}";
+
+function App() {
+  return (
+    <div>
+      <${exampleName}Bold size={32} color="red" />
+      <${exampleName}Linear size={32} color="blue" />
+      <${exampleName}Outline size={32} color="green" />
+    </div>
+  );
+}
+\`\`\`
+
+For TypeScript users, types are included out of the box.
 `;
 }
 
 // --- MAIN LOGIC ---
 
 try {
+  console.log("📦 Starting README generation...");
+
   // 1. Load Package Metadata
   let pkgName = "my-icon-pack";
-  let pkgDesc = "A collection of beautiful SVG icons.";
+  let pkgDesc = "A collection of beautiful SVG icons in 6 different weights.";
+  let pkgVersion = "1.0.0";
+  let pkgLicense = "MIT";
 
   if (fs.existsSync(packageJsonPath)) {
     const pkg = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
     pkgName = pkg.name || pkgName;
     pkgDesc = pkg.description || pkgDesc;
+    pkgVersion = pkg.version || pkgVersion;
+    pkgLicense = pkg.license || pkgLicense;
+  } else {
+    console.warn("⚠️ package.json not found. Using default values.");
   }
 
   // 2. Get Component List
+  console.log("📋 Getting component list...");
   const components = getExportedComponents(generatedIndexPath);
-  const iconListHTML = generateIconList(components);
-  const propsTableHTML = generatePropsTable();
 
-  // 3. Construct README Content
+  if (components.length === 0) {
+    console.warn("⚠️ No components found. The index.ts file might be empty or the build hasn't been run.");
+  } else {
+    console.log(`✅ Found ${components.length} components`);
+    const groupedIcons = groupComponentsByBaseName(components);
+    console.log(`📊 Grouped into ${groupedIcons.length} unique icons`);
+
+    // Log weight distribution
+    const weightCount = {};
+    WEIGHTS.forEach((weight) => {
+      const weightName = weight.charAt(0).toUpperCase() + weight.slice(1);
+      const count = components.filter((comp) => comp.endsWith(weightName)).length;
+      weightCount[weight] = count;
+    });
+
+    console.log("🎨 Weight distribution:");
+    WEIGHTS.forEach((weight) => {
+      console.log(`  ${weightConfigs[weight].label}: ${weightCount[weight]}`);
+    });
+  }
+
+  // 3. Generate Sections
+  console.log("🛠️ Generating README sections...");
+  const iconListSection = generateIconListGrid(components);
+  const weightLegend = generateWeightLegend();
+  const propsTableSection = generatePropsTable();
+  const installationSection = generateInstallationSection(pkgName);
+  const usageSection = generateUsageExamples(pkgName, components);
+
+  // 4. Construct README Content
+  console.log("📝 Assembling README...");
   const readmeContent = `# ${pkgName}
 
-![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)
+![bundle size](https://img.shields.io/bundlephobia/minzip/${pkgName})
+![license](https://img.shields.io/npm/l/${pkgName}.svg)
+![TypeScript](https://img.shields.io/badge/TypeScript-✓-blue)
+![Weights](https://img.shields.io/badge/Weights-6-blueviolet)
 
- ${pkgDesc}
+${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.
+- **🎨 6 Different Weights:** Bold, Bold Duotone, Broken, Line Duotone, Linear, and Outline styles
+- **🌳 Tree-shakable:** Only import the icons you use
+- **🎨 Customizable:** Control size, color, and weight
+- **✨ TypeScript:** Built with full type safety support
+- **🛠 Framework Agnostic:** Works with React, Next.js, Vite, and CRA
+- **⚡ Zero Dependencies:** Lightweight footprint
+- **🎯 Perfect for Design Systems:** Consistent across all weights
 
-## Installation
+${weightLegend}
 
-\`\`\`bash
-npm install ${pkgName}
-\`\`\`
+${installationSection}
 
-or
+${usageSection}
 
-\`\`\`bash
-yarn add ${pkgName}
-\`\`\`
+${propsTableSection}
 
-## Usage
+## Available Icons
 
-\`\`\`tsx
-import { ${components.slice(0, 3).join(", ")} } from "${pkgName}";
+There are currently **${groupComponentsByBaseName(components).length}** unique icons, each available in up to 6 different weights:
 
-const App = () => {
-  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>
-  );
-};
-\`\`\`
+${iconListSection}
 
- ${propsTableHTML}
+## Contributing
 
-## Available Icons
+We welcome contributions! If you'd like to add new icons or improve existing ones:
+
+1. Fork the repository
+2. Create a new branch
+3. Add your SVG icons to the appropriate weight directory in \`src/raw/\`
+4. Run the build script to generate components
+5. Submit a pull request
 
-There are currently **${components.length}** icons.
+## Development
 
-<!-- Icons Grid Start -->
- ${iconListHTML}
-<!-- Icons Grid End -->
+To build the project locally:
 
-## Keywords
+\`\`\`bash
+# Clone the repository
+git clone https://github.com/${GITHUB_USERNAME}/${GITHUB_REPO_NAME}.git
 
- ${pkgDesc}
+# Install dependencies
+npm install
 
-react, icons, svg, components, ui, outline, bold, weight, typescript, tailwind, icon-library, design-system, free-icons
+# Build the project
+npm run build
+
+# Generate the README (this file)
+npm run readme
+\`\`\`
 
 ## License
 
-MIT
+${pkgLicense} © ${new Date().getFullYear()} ${GITHUB_USERNAME}. See the [LICENSE](./LICENSE) file for details.
+
+---
+
+<div align="center">
+  Made with ❤️ by <a href="https://github.com/${GITHUB_USERNAME}">${GITHUB_USERNAME}</a>
+</div>
 `;
 
-  // 4. Write to file
+  // 5. Write to file
   fs.writeFileSync(readmeOutputPath, readmeContent);
-  console.log(`✅ README.md generated successfully with SEO tags!`);
+  console.log(`✅ README.md generated successfully at: ${readmeOutputPath}`);
+  console.log(`📊 Unique icons documented: ${groupComponentsByBaseName(components).length}`);
+  console.log(`🔗 GitHub URL: https://github.com/${GITHUB_USERNAME}/${GITHUB_REPO_NAME}`);
+
+  // 6. Print next steps
+  console.log("\n📋 NEXT STEPS:");
+  console.log("1. Ensure all weight directories exist in src/raw/");
+  console.log("2. Commit and push your SVG files to GitHub");
+  console.log("3. Verify images work by checking the README on GitHub");
 } catch (error) {
-  console.error("❌ Error generating README:", error);
+  console.error("❌ Error generating README:");
+  console.error(error);
   process.exit(1);
 }

package/src/generated/4K.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+// Weights available: bold, boldduotone, broken, lineduotone, linear, outline
+const svgs = {
+     "bold": `
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12ZM6.25 8C6.25 7.58579 5.91421 7.25 5.5 7.25C5.08579 7.25 4.75 7.58579 4.75 8V10C4.75 11.5188 5.98122 12.75 7.5 12.75H9.75V16C9.75 16.4142 10.0858 16.75 10.5 16.75C10.9142 16.75 11.25 16.4142 11.25 16V8C11.25 7.58579 10.9142 7.25 10.5 7.25C10.0858 7.25 9.75 7.58579 9.75 8V11.25H7.5C6.80964 11.25 6.25 10.6904 6.25 10V8ZM19.0198 7.45938C19.3184 7.74647 19.3277 8.22125 19.0406 8.51983L16.3738 11.2933L19.1314 15.5953C19.3549 15.944 19.2535 16.4079 18.9048 16.6314C18.556 16.8549 18.0921 16.7535 17.8686 16.4047L15.3047 12.4051L14.25 13.5021V16C14.25 16.4142 13.9142 16.75 13.5 16.75C13.0858 16.75 12.75 16.4142 12.75 16V8C12.75 7.58579 13.0858 7.25 13.5 7.25C13.9142 7.25 14.25 7.58579 14.25 8V11.3379L17.9594 7.48017C18.2465 7.18159 18.7213 7.17228 19.0198 7.45938Z"/>
+</svg>
+`,
+    "boldduotone": `
+<path opacity="0.5" d="M12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22Z"/>
+<path d="M19.0198 7.45938C19.3184 7.74647 19.3277 8.22125 19.0406 8.51983L16.3738 11.2934L19.1314 15.5953C19.3549 15.944 19.2535 16.4079 18.9048 16.6314C18.556 16.8549 18.0921 16.7535 17.8686 16.4048L15.3047 12.4051L14.25 13.5021V16C14.25 16.4142 13.9142 16.75 13.5 16.75C13.0858 16.75 12.75 16.4142 12.75 16V8C12.75 7.58579 13.0858 7.25 13.5 7.25C13.9142 7.25 14.25 7.58579 14.25 8V11.3379L17.9594 7.48017C18.2465 7.18159 18.7213 7.17228 19.0198 7.45938Z"/>
+<path d="M5.5 7.25C5.91421 7.25 6.25 7.58579 6.25 8V10C6.25 10.6904 6.80964 11.25 7.5 11.25H9.75V8C9.75 7.58579 10.0858 7.25 10.5 7.25C10.9142 7.25 11.25 7.58579 11.25 8V16C11.25 16.4142 10.9142 16.75 10.5 16.75C10.0858 16.75 9.75 16.4142 9.75 16V12.75H7.5C5.98122 12.75 4.75 11.5188 4.75 10V8C4.75 7.58579 5.08579 7.25 5.5 7.25Z"/>
+</svg>
+`,
+    "broken": `
+<path d="M5.5 8V10C5.5 11.1046 6.39543 12 7.5 12H10.5M10.5 8V12M10.5 12V16M13.5 8V13.2M13.5 13.2V16M13.5 13.2L15.4231 11.2M15.4231 11.2L18.5 8M15.4231 11.2L18.5 16" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C21.5093 4.43821 21.8356 5.80655 21.9449 8" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+`,
+    "lineduotone": `
+<path opacity="0.5" d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke-width="1.5"/>
+<path d="M5.5 8V10C5.5 11.1046 6.39543 12 7.5 12H10.5M10.5 8V12M10.5 12V16M13.5 8V13.2M13.5 13.2V16M13.5 13.2L15.4231 11.2M15.4231 11.2L18.5 8M15.4231 11.2L18.5 16" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+`,
+    "linear": `
+<path d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke-width="1.5"/>
+<path d="M5.5 8V10C5.5 11.1046 6.39543 12 7.5 12H10.5M10.5 8V12M10.5 12V16M13.5 8V13.2M13.5 13.2V16M13.5 13.2L15.4231 11.2M15.4231 11.2L18.5 8M15.4231 11.2L18.5 16" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+`,
+    "outline": `
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9426 1.25H12.0574C14.3658 1.24999 16.1748 1.24998 17.5863 1.43975C19.031 1.63399 20.1711 2.03933 21.0659 2.93414C21.9607 3.82895 22.366 4.96897 22.5603 6.41371C22.75 7.82519 22.75 9.63423 22.75 11.9426V12.0574C22.75 14.3658 22.75 16.1748 22.5603 17.5863C22.366 19.031 21.9607 20.1711 21.0659 21.0659C20.1711 21.9607 19.031 22.366 17.5863 22.5603C16.1748 22.75 14.3658 22.75 12.0574 22.75H11.9426C9.63423 22.75 7.82519 22.75 6.41371 22.5603C4.96897 22.366 3.82895 21.9607 2.93414 21.0659C2.03933 20.1711 1.63399 19.031 1.43975 17.5863C1.24998 16.1748 1.24999 14.3658 1.25 12.0574V11.9426C1.24999 9.63423 1.24998 7.82519 1.43975 6.41371C1.63399 4.96897 2.03933 3.82895 2.93414 2.93414C3.82895 2.03933 4.96897 1.63399 6.41371 1.43975C7.82519 1.24998 9.63423 1.24999 11.9426 1.25ZM6.61358 2.92637C5.33517 3.09825 4.56445 3.42514 3.9948 3.9948C3.42514 4.56445 3.09825 5.33517 2.92637 6.61358C2.75159 7.91356 2.75 9.62177 2.75 12C2.75 14.3782 2.75159 16.0864 2.92637 17.3864C3.09825 18.6648 3.42514 19.4355 3.9948 20.0052C4.56445 20.5749 5.33517 20.9018 6.61358 21.0736C7.91356 21.2484 9.62177 21.25 12 21.25C14.3782 21.25 16.0864 21.2484 17.3864 21.0736C18.6648 20.9018 19.4355 20.5749 20.0052 20.0052C20.5749 19.4355 20.9018 18.6648 21.0736 17.3864C21.2484 16.0864 21.25 14.3782 21.25 12C21.25 9.62177 21.2484 7.91356 21.0736 6.61358C20.9018 5.33517 20.5749 4.56445 20.0052 3.9948C19.4355 3.42514 18.6648 3.09825 17.3864 2.92637C16.0864 2.75159 14.3782 2.75 12 2.75C9.62177 2.75 7.91356 2.75159 6.61358 2.92637Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0198 7.45938C19.3184 7.74647 19.3277 8.22125 19.0406 8.51983L16.3738 11.2934L19.1314 15.5953C19.3549 15.944 19.2535 16.4079 18.9047 16.6314C18.556 16.8549 18.0921 16.7535 17.8686 16.4048L15.3047 12.4051L14.25 13.5021V16C14.25 16.4142 13.9142 16.75 13.5 16.75C13.0858 16.75 12.75 16.4142 12.75 16V8C12.75 7.58579 13.0858 7.25 13.5 7.25C13.9142 7.25 14.25 7.58579 14.25 8V11.3379L17.9594 7.48017C18.2465 7.18159 18.7213 7.17228 19.0198 7.45938ZM5.5 7.25C5.91421 7.25 6.25 7.58579 6.25 8V10C6.25 10.6904 6.80964 11.25 7.5 11.25H9.75V8C9.75 7.58579 10.0858 7.25 10.5 7.25C10.9142 7.25 11.25 7.58579 11.25 8V16C11.25 16.4142 10.9142 16.75 10.5 16.75C10.0858 16.75 9.75 16.4142 9.75 16V12.75H7.5C5.98122 12.75 4.75 11.5188 4.75 10V8C4.75 7.58579 5.08579 7.25 5.5 7.25Z"/>
+</svg>
+`,
+};
+
+export const 4K: React.FC<IconProps> = ({ size = 24, color = "currentColor", weight, ...props }) => {
+  // If weight is passed and exists, use it. Otherwise default to the first available weight.
+  const activeWeight = Object.keys(svgs).includes(weight) ? weight : Object.keys(svgs)[0];
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill={color}
+      {...props}
+    >
+      <g dangerouslySetInnerHTML={{ __html: svgs[activeWeight] }} />
+    </svg>
+  );
+};