@siemens/ix-icons 0.0.0-pr-69-20250205111227 → 0.0.0-pr-69-20250205144920

package/components/index.js

@@ -1,3 +1,3 @@
-export { I as Icon, d as addIconToCache, c as addIcons, e as defineCustomElement, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-da232b5d.js';
+export { I as Icon, d as addIconToCache, c as addIcons, e as defineCustomElement, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-187634d0.js';
 
 //# sourceMappingURL=index.js.map

package/components/ix-icon.js

@@ -1,4 +1,4 @@
-import { I as Icon, e as defineCustomElement$1 } from './p-da232b5d.js';
+import { I as Icon, e as defineCustomElement$1 } from './p-187634d0.js';
 
 const IxIcon = Icon;
 const defineCustomElement = defineCustomElement$1;

package/components/{p-da232b5d.js → p-187634d0.js}

@@ -1119,6 +1119,28 @@ function getCustomAssetUrl() {
     return false;
 }
 
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2025 ALL RIGHTS RESERVED.
+ */
+let parser = null;
+const errorSymbol = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M384,0 L384,384 L0,384 L0,0 L384,0 Z M192,207.085 L57.751,341.333 L326.248,341.333 L192,207.085 Z M42.666,57.751 L42.666,326.248 L176.915,192 L42.666,57.751 Z M341.333,57.751 L207.085,192 L341.333,326.248 L341.333,57.751 Z M326.248,42.666 L57.751,42.666 L192,176.915 L326.248,42.666 Z' transform='translate(64 64)'/></svg>";
+function parseSVGDataContent(content) {
+    if (typeof window['DOMParser'] === 'undefined') {
+        console.error('DOMParser not supported by your browser.');
+        return '';
+    }
+    if (parser === null) {
+        parser = new window['DOMParser']();
+    }
+    const svgDocument = parser.parseFromString(content, 'text/html');
+    const svgElement = svgDocument.querySelector('svg');
+    if (!svgElement) {
+        console.error('No valid svg data provided');
+        return '';
+    }
+    return svgElement.outerHTML;
+}
+
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -1129,7 +1151,6 @@ function getCustomAssetUrl() {
  */
 let fetchCache;
 const requests = new Map();
-let parser = null;
 const getIconCacheMap = () => {
     if (typeof window === 'undefined') {
         return new Map();
@@ -1149,21 +1170,6 @@ const isSvgDataUrl = (url) => {
     }
     return url.startsWith('data:image/svg+xml');
 };
-function parseSVGDataContent(content) {
-    if (typeof window['DOMParser'] === 'undefined') {
-        console.warn('DOMParser not supported by your browser.');
-        return;
-    }
-    if (parser === null) {
-        parser = new window['DOMParser']();
-    }
-    const svgDocument = parser.parseFromString(content, 'text/html');
-    const svgElement = svgDocument.querySelector('svg');
-    if (!svgElement) {
-        throw Error('No valid svg data provided');
-    }
-    return svgElement.outerHTML;
-}
 async function fetchSVG(url) {
     const cache = getIconCacheMap();
     if (cache.has(url)) {
@@ -1172,18 +1178,27 @@ async function fetchSVG(url) {
     if (requests.has(url)) {
         return requests.get(url);
     }
-    const fetching = fetch(url).then(async (response) => {
+    const fetching = fetch(url)
+        .then(async (response) => {
         const responseText = await response.text();
-        if (!response.ok) {
-            console.error(responseText);
-            throw Error(responseText);
+        let svgContent = '';
+        if (response.ok) {
+            svgContent = parseSVGDataContent(responseText);
+            cache.set(url, svgContent);
+        }
+        else {
+            console.error('Failed to request svg data from', url, 'with status code', response.status);
         }
-        const svgContent = parseSVGDataContent(responseText);
-        cache.set(url, svgContent);
-        requests.delete(url);
         return svgContent;
+    })
+        .catch(() => {
+        console.error('Failed to fetch svg data:', url);
+        cache.set(url, '');
+        return '';
+    })
+        .finally(() => {
+        requests.delete(url);
     });
-    requests.set(url, fetching);
     return fetching;
 }
 const urlRegex = /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:www\.)?(?:\S+\.\S+)(?:\S*)$/i;
@@ -1200,20 +1215,19 @@ function getIconUrl(name) {
         url = getAssetPath(url);
     }
     catch (error) {
-        console.warn(error);
-        setAssetPath(`${window.location.origin}/`);
-        url = getAssetPath(url);
+        console.warn(`Could not load icon with name "${name}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to property.`);
     }
     return url;
 }
-async function resolveIcon(iconName) {
+async function resolveIcon(element, iconName) {
     if (!iconName) {
-        throw Error('No icon name provided');
+        console.warn('No icon was provided', element);
+        return '';
     }
     if (isSvgDataUrl(iconName)) {
         return parseSVGDataContent(iconName);
     }
-    return await loadIcon(iconName);
+    return loadIcon(iconName);
 }
 async function loadIcon(iconName) {
     const cache = getIconCacheMap();
@@ -1221,19 +1235,9 @@ async function loadIcon(iconName) {
         return cache.get(iconName);
     }
     if (isValidUrl(iconName)) {
-        try {
-            return fetchSVG(iconName);
-        }
-        catch (error) {
-            throw error;
-        }
-    }
-    try {
-        return fetchSVG(getIconUrl(iconName));
-    }
-    catch (error) {
-        throw Error(`Could not resolve ${iconName}`);
+        return fetchSVG(iconName);
     }
+    return fetchSVG(getIconUrl(iconName));
 }
 function removePrefix(name, prefix) {
     if (name.startsWith(prefix)) {
@@ -1265,12 +1269,18 @@ function addIconToCache(name, icon) {
 const iconCss = ":host{display:inline-flex;height:1.5rem;width:1.5rem;min-height:1.5rem;min-width:1.5rem;color:inherit}:host .svg-container{display:block;position:relative;width:100%;height:100%}:host .svg-container svg{display:block;position:relative;height:100%;width:100%}:host .svg-container svg,:host .svg-container svg[fill],:host .svg-container svg [fill]{fill:currentColor !important}:host(.size-12){height:0.75rem;width:0.75rem;min-height:0.75rem;min-width:0.75rem}:host(.size-16){height:1rem;width:1rem;min-height:1rem;min-width:1rem}:host(.size-32){height:2rem;width:2rem;min-height:2rem;min-width:2rem}";
 const IxIconStyle0 = iconCss;
 
-const iconMissingSymbol = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M384,0 L384,384 L0,384 L0,0 L384,0 Z M192,207.085 L57.751,341.333 L326.248,341.333 L192,207.085 Z M42.666,57.751 L42.666,326.248 L176.915,192 L42.666,57.751 Z M341.333,57.751 L207.085,192 L341.333,326.248 L341.333,57.751 Z M326.248,42.666 L57.751,42.666 L192,176.915 L326.248,42.666 Z' transform='translate(64 64)'/></svg>";
 const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Size of the icon
+         */
+        this.size = '24';
+        /**
+         * Only fetch and parse svg data when icon is visible
+         */
         this.lazyLoading = false;
         this.isVisible = false;
     }
@@ -1281,12 +1291,12 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends H {
         });
     }
     async loadIconContent() {
-        try {
-            this.svgContent = await resolveIcon(this.name);
-        }
-        catch (error) {
-            this.svgContent = parseSVGDataContent(iconMissingSymbol);
+        const content = await resolveIcon(this.hostElement, this.name);
+        if (!content) {
+            this.svgContent = parseSVGDataContent(errorSymbol);
+            return;
         }
+        this.svgContent = content;
     }
     waitForRendering(onRender) {
         if (this.lazyLoading && typeof window !== 'undefined' && window.IntersectionObserver) {
@@ -1311,12 +1321,12 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends H {
         if (this.color) {
             style['color'] = `var(--theme-${this.color})`;
         }
-        return (h(Host, { key: '8dc18bf3b1ab1e2a521bd0fee33fa91b856dc52b', style: style, class: {
+        return (h(Host, { key: '484071b4f74e0b803b8d36913c866bfdb4b1a259', style: style, class: {
                 ['size-12']: this.size === '12',
                 ['size-16']: this.size === '16',
                 ['size-24']: this.size === '24',
                 ['size-32']: this.size === '32',
-            } }, h("div", { key: '48c3e8ae8e0d36be5fa112dbd408756f56c19535', class: 'svg-container', innerHTML: this.svgContent })));
+            } }, h("div", { key: 'd988ef0fcc83087c24c905cf95ff02fe187aed5e', class: 'svg-container', innerHTML: this.svgContent })));
     }
     static get assetsDirs() { return ["svg"]; }
     get hostElement() { return this; }
@@ -1350,4 +1360,4 @@ function defineCustomElement() {
 
 export { Icon as I, setNonce as a, setPlatformOptions as b, addIcons as c, addIconToCache as d, defineCustomElement as e, getAssetPath as g, setAssetPath as s };
 
-//# sourceMappingURL=p-da232b5d.js.map
+//# sourceMappingURL=p-187634d0.js.map