icon fix

Author: ZiZIGY

docs/@capsule/components/capsule-icon/capsule-icon.js

@@ -8,8 +8,6 @@ class CapsuleIcon extends LitElement {
 
   constructor() {
     super();
-    this._iconCache = new Map();
-    this._loadingIcons = new Map();
     this.size = '1em';
   }
 
@@ -42,29 +40,12 @@ class CapsuleIcon extends LitElement {
       return;
     }
 
-    if (this._iconCache.has(this.name)) {
-      const cached = this._iconCache.get(this.name);
-      this._renderIcon(cached);
-      return;
-    }
-
-    if (this._loadingIcons.has(this.name)) {
-      await this._loadingIcons.get(this.name);
-      return;
-    }
-
-    const loadPromise = this._fetchIcon(this.name);
-    this._loadingIcons.set(this.name, loadPromise);
-
     try {
-      const iconData = await loadPromise;
-      this._iconCache.set(this.name, iconData);
+      const iconData = await this._fetchIcon(this.name);
       this._renderIcon(iconData);
     } catch (error) {
       console.error(`Failed to load icon: ${this.name}`, error);
       this.innerHTML = '';
-    } finally {
-      this._loadingIcons.delete(this.name);
     }
   }
 
@@ -95,14 +76,21 @@ class CapsuleIcon extends LitElement {
 
   async _fetchIcon(iconName) {
     const url = `https://api.iconify.design/${iconName}.svg`;
+    return await this._fetchAndParseSvg(url);
+  }
+
+  async _fetchAndParseSvg(url) {
     const response = await fetch(url);
 
     if (!response.ok) {
       throw new Error(`Failed to fetch icon: ${response.statusText}`);
     }
 
     const svgText = await response.text();
+    return this._parseSvg(svgText);
+  }
 
+  _parseSvg(svgText) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(svgText, 'image/svg+xml');
     const svg = doc.querySelector('svg');

docs/@capsule/components/capsule-icon/capsule-icon.style.css

@@ -39,4 +39,3 @@ capsule-icon[size='xl'] {
   width: 2rem;
   height: 2rem;
 }
-

docs/@capsule/components/capsule-icon/register.js

@@ -1,2 +1 @@
 import './capsule-icon.js';
-

docs/@capsule/components/capsule-icon/vscode.data.json

@@ -1,8 +1,8 @@
+@import url('./components/capsule-icon/capsule-icon.style.css');
 @import url('./components/capsule-sidebar/capsule-sidebar.style.css');
 @import url('./components/capsule-radio-group/capsule-radio-group.style.css');
 @import url('./components/capsule-hover-card/capsule-hover-card.style.css');
 @import url('./components/capsule-input/capsule-input.style.css');
-@import url('./components/capsule-icon/capsule-icon.style.css');
 @import url('./components/capsule-tour/capsule-tour.style.css');
 @import url('./components/capsule-circular-progress/capsule-circular-progress.style.css');
 @import url('./components/capsule-pagination/capsule-pagination.style.css');
@@ -29,7 +29,7 @@
 @import url('./components/capsule-breadcrumb/capsule-breadcrumb.style.css');
 @import url('./components/capsule-button-group/capsule-button-group.style.css');
 @import url('./components/capsule-button/capsule-button.style.css');
-/* Shadcn-style theme variables */
+
 :root {
   color-scheme: light;
 

docs/@capsule/global.css

@@ -45,12 +45,12 @@ import './components/capsule-comparison/register.js';
 import './components/capsule-pagination/register.js';
 import './components/capsule-circular-progress/register.js';
 import './components/capsule-tour/register.js';
-
-// Import all modules
-import './modules/form/index.js';
 import './components/capsule-container/register.js';
-import './components/capsule-icon/register.js';
 import './components/capsule-input/register.js';
 import './components/capsule-hover-card/register.js';
 import './components/capsule-radio-group/register.js';
 import './components/capsule-sidebar/register.js';
+
+// Import all modules
+import './modules/form/index.js';
+import './components/capsule-icon/register.js';

docs/@capsule/index.js

@@ -1,20 +1,20 @@
 /**
  * @file CapsuleUI Main Entry Point
- * @version 1.0.0
- * @description Open-source Web Components library. 
+ * @version 1.2.6
+ * @description Open-source Web Components library.
  * Copy, paste, and customize - no npm install required.
- * 
+ *
  * @example
  * // HTML
  * <script type="module" src="@capsule/index.js"></script>
  * <capsule-button>Click</capsule-button>
- * 
- * @see https://capsuleui.dev/docs
+ *
+ * @see https://zizigy.github.io/CapsuleUI/
  */
 
 /**
  * Auto-registers all CapsuleUI components
  * @namespace CapsuleUI
  */
 
-// Import all components
+// Import all components

src/@template/index.js

@@ -8,8 +8,6 @@ class CapsuleIcon extends LitElement {
 
   constructor() {
     super();
-    this._iconCache = new Map();
-    this._loadingIcons = new Map();
     this.size = '1em';
   }
 
@@ -42,29 +40,12 @@ class CapsuleIcon extends LitElement {
       return;
     }
 
-    if (this._iconCache.has(this.name)) {
-      const cached = this._iconCache.get(this.name);
-      this._renderIcon(cached);
-      return;
-    }
-
-    if (this._loadingIcons.has(this.name)) {
-      await this._loadingIcons.get(this.name);
-      return;
-    }
-
-    const loadPromise = this._fetchIcon(this.name);
-    this._loadingIcons.set(this.name, loadPromise);
-
     try {
-      const iconData = await loadPromise;
-      this._iconCache.set(this.name, iconData);
+      const iconData = await this._fetchIcon(this.name);
       this._renderIcon(iconData);
     } catch (error) {
       console.error(`Failed to load icon: ${this.name}`, error);
       this.innerHTML = '';
-    } finally {
-      this._loadingIcons.delete(this.name);
     }
   }
 
@@ -95,14 +76,21 @@ class CapsuleIcon extends LitElement {
 
   async _fetchIcon(iconName) {
     const url = `https://api.iconify.design/${iconName}.svg`;
+    return await this._fetchAndParseSvg(url);
+  }
+
+  async _fetchAndParseSvg(url) {
     const response = await fetch(url);
 
     if (!response.ok) {
       throw new Error(`Failed to fetch icon: ${response.statusText}`);
     }
 
     const svgText = await response.text();
+    return this._parseSvg(svgText);
+  }
 
+  _parseSvg(svgText) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(svgText, 'image/svg+xml');
     const svg = doc.querySelector('svg');

src/templates/Icon/icon.js

@@ -39,4 +39,3 @@ __PREFIX__-__COMPONENT__[size='xl'] {
   width: 2rem;
   height: 2rem;
 }
-

src/templates/Icon/icon.style.css

@@ -1,2 +1 @@
 import './__PREFIX__-__COMPONENT__.js';
-