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

package/dist/esm/{icon-4feff534.js → icon-fc868c56.js}

@@ -1,4 +1,4 @@
-import { g as getAssetPath, a as setAssetPath, r as registerInstance, h, H as Host, c as getElement } from './index-051cb4f1.js';
+import { g as getAssetPath, r as registerInstance, h, H as Host, c as getElement } from './index-051cb4f1.js';
 
 /**
  * Provide custom SVG path for icons
@@ -14,6 +14,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
  *
@@ -24,7 +46,6 @@ function getCustomAssetUrl() {
  */
 let fetchCache;
 const requests = new Map();
-let parser = null;
 const getIconCacheMap = () => {
     if (typeof window === 'undefined') {
         return new Map();
@@ -44,21 +65,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)) {
@@ -67,18 +73,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;
@@ -95,20 +110,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();
@@ -116,19 +130,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)) {
@@ -160,10 +164,16 @@ 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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Size of the icon
+         */
+        this.size = '24';
+        /**
+         * Only fetch and parse svg data when icon is visible
+         */
         this.lazyLoading = false;
         this.isVisible = false;
     }
@@ -174,12 +184,12 @@ const Icon = class {
         });
     }
     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) {
@@ -204,12 +214,12 @@ const Icon = class {
         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 getElement(this); }
@@ -221,4 +231,4 @@ Icon.style = IxIconStyle0;
 
 export { Icon as I, addIcons as a, addIconToCache as b };
 
-//# sourceMappingURL=icon-4feff534.js.map
+//# sourceMappingURL=icon-fc868c56.js.map

package/dist/esm/icon-fc868c56.js.map

@@ -0,0 +1 @@
+{"file":"icon-fc868c56.js","mappings":"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","names":[],"sources":["src/components/icon/meta-tag.ts","src/components/icon/parser.ts","src/components/icon/resolveIcon.ts","src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["/**\n * Provide custom SVG path for icons\n *\n * <meta name=\"ix-icons:path\" content=\"/build/svg\" />\n */\nexport function getCustomAssetUrl() {\n  const assetPath = document.querySelector(\"meta[name='ix-icons:path']\");\n  if (assetPath) {\n    const path = assetPath.getAttribute('content');\n    return path;\n  }\n\n  return false;\n}\n","/*\n * COPYRIGHT (c) Siemens AG 2018-2025 ALL RIGHTS RESERVED.\n */\n\nlet parser: any = null;\n\nexport const errorSymbol =\n  \"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>\";\n\nexport function parseSVGDataContent(content: string): string {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.error('DOMParser not supported by your browser.');\n    return '';\n  }\n\n  if (parser === null) {\n    parser = new window['DOMParser']();\n  }\n\n  const svgDocument = parser.parseFromString(content, 'text/html');\n  const svgElement = svgDocument.querySelector('svg') as HTMLElement;\n\n  if (!svgElement) {\n    console.error('No valid svg data provided');\n    return '';\n  }\n\n  return svgElement.outerHTML;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { getAssetPath } from '@stencil/core';\nimport { getCustomAssetUrl } from './meta-tag';\nimport { parseSVGDataContent } from './parser';\n\ndeclare global {\n  interface Window {\n    IxIcons: any;\n  }\n}\n\nlet fetchCache: Map<string, string>;\nconst requests = new Map<string, Promise<string>>();\n\nexport const getIconCacheMap = (): Map<string, string> => {\n  if (typeof window === 'undefined') {\n    return new Map();\n  }\n\n  if (!fetchCache) {\n    window.IxIcons = window.IxIcons || {};\n    fetchCache = window.IxIcons.map = window.IxIcons.map || new Map();\n  }\n\n  return fetchCache;\n};\n\nexport const isSvgDataUrl = (url: string) => {\n  if (!url) {\n    return false;\n  }\n\n  if (typeof url !== 'string') {\n    return false;\n  }\n\n  return url.startsWith('data:image/svg+xml');\n};\n\nasync function fetchSVG(url: string) {\n  const cache = getIconCacheMap();\n\n  if (cache.has(url)) {\n    return cache.get(url)!;\n  }\n\n  if (requests.has(url)) {\n    return requests.get(url)!;\n  }\n\n  const fetching = fetch(url)\n    .then(async response => {\n      const responseText = await response.text();\n\n      let svgContent = '';\n      if (response.ok) {\n        svgContent = parseSVGDataContent(responseText);\n        cache.set(url, svgContent);\n      } else {\n        console.error('Failed to request svg data from', url, 'with status code', response.status);\n      }\n\n      return svgContent;\n    })\n    .catch(() => {\n      console.error('Failed to fetch svg data:', url);\n      cache.set(url, '');\n      return '';\n    })\n    .finally(() => {\n      requests.delete(url);\n    });\n\n  return fetching;\n}\n\nconst urlRegex = /^(?:(?:https?|ftp):\\/\\/)?(?:\\S+(?::\\S*)?@)?(?:www\\.)?(?:\\S+\\.\\S+)(?:\\S*)$/i;\n\nfunction isValidUrl(url: string) {\n  return urlRegex.test(url);\n}\n\nexport function getIconUrl(name: string) {\n  const customAssetUrl = getCustomAssetUrl();\n\n  if (customAssetUrl) {\n    return `${customAssetUrl}/${name}.svg`;\n  }\n\n  let url: string = `svg/${name}.svg`;\n\n  try {\n    url = getAssetPath(url);\n  } catch (error) {\n    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.`);\n  }\n\n  return url;\n}\n\nexport async function resolveIcon(element: HTMLIxIconElement, iconName?: string): Promise<string> {\n  if (!iconName) {\n    console.warn('No icon was provided', element);\n    return '';\n  }\n\n  if (isSvgDataUrl(iconName)) {\n    return parseSVGDataContent(iconName);\n  }\n\n  return loadIcon(iconName);\n}\n\nasync function loadIcon(iconName: string): Promise<string> {\n  const cache = getIconCacheMap();\n\n  if (cache.has(iconName)) {\n    return cache.get(iconName)!;\n  }\n\n  if (isValidUrl(iconName)) {\n    return fetchSVG(iconName);\n  }\n\n  return fetchSVG(getIconUrl(iconName));\n}\n\nfunction removePrefix(name: string, prefix: string) {\n  if (name.startsWith(prefix)) {\n    name = name.slice(prefix.length);\n    return name.replace(/^(\\w)/, (_match, p1) => p1.toLowerCase());\n  }\n\n  return name;\n}\n\nexport function addIcons(icons: { [name: string]: any }) {\n  Object.keys(icons).forEach(name => {\n    const icon = icons[name];\n    name = removePrefix(name, 'icon');\n\n    addIconToCache(name, icon);\n  });\n}\n\nexport function addIconToCache(name: string, icon: string) {\n  const cache = getIconCacheMap();\n\n  if (cache.has(name)) {\n    console.warn(`Icon name '${name}' already in cache. Overwritting with new icon data.`);\n  }\n\n  const svg = parseSVGDataContent(icon);\n\n  cache.set(name, svg);\n\n  const toKebabCase = name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z0-9])/g, '$1-$2').toLowerCase();\n\n  if (name != toKebabCase) {\n    cache.set(toKebabCase, svg);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@mixin size($size) {\n  height: $size;\n  width: $size;\n  min-height: $size;\n  min-width: $size;\n}\n\n:host {\n  display: inline-flex;\n  @include size(1.5rem);\n  color: inherit;\n\n  .svg-container {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    svg {\n      display: block;\n      position: relative;\n      height: 100%;\n      width: 100%;\n    }\n\n    svg,\n    svg[fill],\n    svg [fill] {\n      fill: currentColor !important;\n    }\n  }\n}\n\n:host(.size-12) {\n  @include size(0.75rem);\n}\n\n:host(.size-16) {\n  @include size(1rem);\n}\n\n:host(.size-32) {\n  @include size(2rem);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, h, Host, Prop, State, Watch, Element, Build } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\nimport { errorSymbol, parseSVGDataContent } from './parser';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n  assetsDirs: ['svg'],\n})\nexport class Icon {\n  @Element() hostElement!: HTMLIxIconElement;\n\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32' = '24';\n\n  /**\n   * Color of the icon\n   */\n  @Prop() color?: string;\n\n  /**\n   * Use one of our defined icon names e.g. `copy`\n   *\n   * https://ix.siemens.io/docs/icon-library/icons\n   *\n   * or the import variant\n   *\n   * ```\n   * import { rocket } from '@siemens/ix-icons/icons';\n   *\n   * <ix-icon name={rocket}></ix-icon>\n   * ```\n   */\n  @Prop() name?: string;\n\n  /**\n   * Only fetch and parse svg data when icon is visible\n   */\n  @Prop() lazyLoading = false;\n\n  @State() svgContent?: string;\n  @State() isVisible = false;\n\n  componentWillLoad() {\n    this.waitForRendering(() => {\n      this.isVisible = true;\n      this.loadIconContent();\n    });\n  }\n\n  @Watch('name')\n  async loadIconContent() {\n    const content = await resolveIcon(this.hostElement, this.name);\n\n    if (!content) {\n      this.svgContent = parseSVGDataContent(errorSymbol);\n      return;\n    }\n\n    this.svgContent = content;\n  }\n\n  private waitForRendering(onRender: () => void) {\n    if (Build.isBrowser && this.lazyLoading && typeof window !== 'undefined' && (window as any).IntersectionObserver) {\n      const observer = new IntersectionObserver(\n        entries => {\n          entries.forEach(entry => {\n            if (entry.isIntersecting) {\n              onRender();\n              observer.disconnect();\n            }\n          });\n        },\n        {\n          rootMargin: '25px',\n        },\n      );\n\n      observer.observe(this.hostElement);\n    } else {\n      onRender();\n    }\n  }\n\n  render() {\n    const style: {\n      [key: string]: string;\n    } = {};\n\n    if (this.color) {\n      style['color'] = `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        style={style}\n        class={{\n          ['size-12']: this.size === '12',\n          ['size-16']: this.size === '16',\n          ['size-24']: this.size === '24',\n          ['size-32']: this.size === '32',\n        }}\n      >\n        <div class={'svg-container'} innerHTML={this.svgContent}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { I as Icon, b as addIconToCache, a as addIcons } from './icon-4feff534.js';
+export { I as Icon, b as addIconToCache, a as addIcons } from './icon-fc868c56.js';
 export { a as setAssetPath } from './index-051cb4f1.js';
 
 //# sourceMappingURL=index.js.map

package/dist/esm/ix-icon.entry.js

@@ -1,4 +1,4 @@
-export { I as ix_icon } from './icon-4feff534.js';
+export { I as ix_icon } from './icon-fc868c56.js';
 import './index-051cb4f1.js';
 
 //# sourceMappingURL=ix-icon.entry.js.map

package/dist/ix-icons/index.esm.js

@@ -1,2 +1,2 @@
-export{I as Icon,b as addIconToCache,a as addIcons}from"./p-588f84dc.js";export{a as setAssetPath}from"./p-48b5ebf2.js";
+export{I as Icon,b as addIconToCache,a as addIcons}from"./p-423803cb.js";export{a as setAssetPath}from"./p-48b5ebf2.js";
 //# sourceMappingURL=index.esm.js.map

package/dist/ix-icons/ix-icons.esm.js

@@ -1,2 +1,2 @@
-import{p as o,b as n}from"./p-48b5ebf2.js";export{s as setNonce}from"./p-48b5ebf2.js";import{g as e}from"./p-e1255160.js";var a=()=>{const n=import.meta.url;const e={};if(n!==""){e.resourcesUrl=new URL(".",n).href}return o(e)};a().then((async o=>{await e();return n([["p-08f117ce",[[1,"ix-icon",{size:[1],color:[1],name:[1],lazyLoading:[4,"lazy-loading"],svgContent:[32],isVisible:[32]},null,{name:["loadIconContent"]}]]]],o)}));
+import{p as o,b as n}from"./p-48b5ebf2.js";export{s as setNonce}from"./p-48b5ebf2.js";import{g as a}from"./p-e1255160.js";var e=()=>{const n=import.meta.url;const a={};if(n!==""){a.resourcesUrl=new URL(".",n).href}return o(a)};e().then((async o=>{await a();return n([["p-ca4fc358",[[1,"ix-icon",{size:[1],color:[1],name:[1],lazyLoading:[4,"lazy-loading"],svgContent:[32],isVisible:[32]},null,{name:["loadIconContent"]}]]]],o)}));
 //# sourceMappingURL=ix-icons.esm.js.map

package/dist/ix-icons/p-423803cb.js

@@ -0,0 +1,2 @@
+import{g as t,r as e,h as n,H as i,c as s}from"./p-48b5ebf2.js";function o(){const t=document.querySelector("meta[name='ix-icons:path']");if(t){const e=t.getAttribute("content");return e}return false}let r=null;const c="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 a(t){if(typeof window["DOMParser"]==="undefined"){console.error("DOMParser not supported by your browser.");return""}if(r===null){r=new window["DOMParser"]}const e=r.parseFromString(t,"text/html");const n=e.querySelector("svg");if(!n){console.error("No valid svg data provided");return""}return n.outerHTML}let h;const d=new Map;const f=()=>{if(typeof window==="undefined"){return new Map}if(!h){window.IxIcons=window.IxIcons||{};h=window.IxIcons.map=window.IxIcons.map||new Map}return h};const l=t=>{if(!t){return false}if(typeof t!=="string"){return false}return t.startsWith("data:image/svg+xml")};async function u(t){const e=f();if(e.has(t)){return e.get(t)}if(d.has(t)){return d.get(t)}const n=fetch(t).then((async n=>{const i=await n.text();let s="";if(n.ok){s=a(i);e.set(t,s)}else{console.error("Failed to request svg data from",t,"with status code",n.status)}return s})).catch((()=>{console.error("Failed to fetch svg data:",t);e.set(t,"");return""})).finally((()=>{d.delete(t)}));return n}const w=/^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:www\.)?(?:\S+\.\S+)(?:\S*)$/i;function g(t){return w.test(t)}function m(e){const n=o();if(n){return`${n}/${e}.svg`}let i=`svg/${e}.svg`;try{i=t(i)}catch(t){console.warn(`Could not load icon with name "${e}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to property.`)}return i}async function v(t,e){if(!e){console.warn("No icon was provided",t);return""}if(l(e)){return a(e)}return p(e)}async function p(t){const e=f();if(e.has(t)){return e.get(t)}if(g(t)){return u(t)}return u(m(t))}function y(t,e){if(t.startsWith(e)){t=t.slice(e.length);return t.replace(/^(\w)/,((t,e)=>e.toLowerCase()))}return t}function L(t){Object.keys(t).forEach((e=>{const n=t[e];e=y(e,"icon");b(e,n)}))}function b(t,e){const n=f();if(n.has(t)){console.warn(`Icon name '${t}' already in cache. Overwritting with new icon data.`)}const i=a(e);n.set(t,i);const s=t.replace(/([a-z0-9]|(?=[A-Z]))([A-Z0-9])/g,"$1-$2").toLowerCase();if(t!=s){n.set(s,i)}}const M=":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 x=M;const $=class{constructor(t){e(this,t);this.size="24";this.lazyLoading=false;this.isVisible=false}componentWillLoad(){this.waitForRendering((()=>{this.isVisible=true;this.loadIconContent()}))}async loadIconContent(){const t=await v(this.hostElement,this.name);if(!t){this.svgContent=a(c);return}this.svgContent=t}waitForRendering(t){if(this.lazyLoading&&typeof window!=="undefined"&&window.IntersectionObserver){const e=new IntersectionObserver((n=>{n.forEach((n=>{if(n.isIntersecting){t();e.disconnect()}}))}),{rootMargin:"25px"});e.observe(this.hostElement)}else{t()}}render(){const t={};if(this.color){t["color"]=`var(--theme-${this.color})`}return n(i,{key:"484071b4f74e0b803b8d36913c866bfdb4b1a259",style:t,class:{["size-12"]:this.size==="12",["size-16"]:this.size==="16",["size-24"]:this.size==="24",["size-32"]:this.size==="32"}},n("div",{key:"d988ef0fcc83087c24c905cf95ff02fe187aed5e",class:"svg-container",innerHTML:this.svgContent}))}static get assetsDirs(){return["svg"]}get hostElement(){return s(this)}static get watchers(){return{name:["loadIconContent"]}}};$.style=x;export{$ as I,L as a,b};
+//# sourceMappingURL=p-423803cb.js.map

package/dist/ix-icons/p-423803cb.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getCustomAssetUrl","assetPath","document","querySelector","path","getAttribute","parser","errorSymbol","parseSVGDataContent","content","window","console","error","svgDocument","parseFromString","svgElement","outerHTML","fetchCache","requests","Map","getIconCacheMap","IxIcons","map","isSvgDataUrl","url","startsWith","async","fetchSVG","cache","has","get","fetching","fetch","then","response","responseText","text","svgContent","ok","set","status","catch","finally","delete","urlRegex","isValidUrl","test","getIconUrl","name","customAssetUrl","getAssetPath","warn","resolveIcon","element","iconName","loadIcon","removePrefix","prefix","slice","length","replace","_match","p1","toLowerCase","addIcons","icons","Object","keys","forEach","icon","addIconToCache","svg","toKebabCase","iconCss","IxIconStyle0","Icon","constructor","hostRef","this","size","lazyLoading","isVisible","componentWillLoad","waitForRendering","loadIconContent","hostElement","onRender","IntersectionObserver","observer","entries","entry","isIntersecting","disconnect","rootMargin","observe","render","style","color","h","Host","key","class","innerHTML"],"sources":["src/components/icon/meta-tag.ts","src/components/icon/parser.ts","src/components/icon/resolveIcon.ts","src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["/**\n * Provide custom SVG path for icons\n *\n * <meta name=\"ix-icons:path\" content=\"/build/svg\" />\n */\nexport function getCustomAssetUrl() {\n  const assetPath = document.querySelector(\"meta[name='ix-icons:path']\");\n  if (assetPath) {\n    const path = assetPath.getAttribute('content');\n    return path;\n  }\n\n  return false;\n}\n","/*\n * COPYRIGHT (c) Siemens AG 2018-2025 ALL RIGHTS RESERVED.\n */\n\nlet parser: any = null;\n\nexport const errorSymbol =\n  \"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>\";\n\nexport function parseSVGDataContent(content: string): string {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.error('DOMParser not supported by your browser.');\n    return '';\n  }\n\n  if (parser === null) {\n    parser = new window['DOMParser']();\n  }\n\n  const svgDocument = parser.parseFromString(content, 'text/html');\n  const svgElement = svgDocument.querySelector('svg') as HTMLElement;\n\n  if (!svgElement) {\n    console.error('No valid svg data provided');\n    return '';\n  }\n\n  return svgElement.outerHTML;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { getAssetPath } from '@stencil/core';\nimport { getCustomAssetUrl } from './meta-tag';\nimport { parseSVGDataContent } from './parser';\n\ndeclare global {\n  interface Window {\n    IxIcons: any;\n  }\n}\n\nlet fetchCache: Map<string, string>;\nconst requests = new Map<string, Promise<string>>();\n\nexport const getIconCacheMap = (): Map<string, string> => {\n  if (typeof window === 'undefined') {\n    return new Map();\n  }\n\n  if (!fetchCache) {\n    window.IxIcons = window.IxIcons || {};\n    fetchCache = window.IxIcons.map = window.IxIcons.map || new Map();\n  }\n\n  return fetchCache;\n};\n\nexport const isSvgDataUrl = (url: string) => {\n  if (!url) {\n    return false;\n  }\n\n  if (typeof url !== 'string') {\n    return false;\n  }\n\n  return url.startsWith('data:image/svg+xml');\n};\n\nasync function fetchSVG(url: string) {\n  const cache = getIconCacheMap();\n\n  if (cache.has(url)) {\n    return cache.get(url)!;\n  }\n\n  if (requests.has(url)) {\n    return requests.get(url)!;\n  }\n\n  const fetching = fetch(url)\n    .then(async response => {\n      const responseText = await response.text();\n\n      let svgContent = '';\n      if (response.ok) {\n        svgContent = parseSVGDataContent(responseText);\n        cache.set(url, svgContent);\n      } else {\n        console.error('Failed to request svg data from', url, 'with status code', response.status);\n      }\n\n      return svgContent;\n    })\n    .catch(() => {\n      console.error('Failed to fetch svg data:', url);\n      cache.set(url, '');\n      return '';\n    })\n    .finally(() => {\n      requests.delete(url);\n    });\n\n  return fetching;\n}\n\nconst urlRegex = /^(?:(?:https?|ftp):\\/\\/)?(?:\\S+(?::\\S*)?@)?(?:www\\.)?(?:\\S+\\.\\S+)(?:\\S*)$/i;\n\nfunction isValidUrl(url: string) {\n  return urlRegex.test(url);\n}\n\nexport function getIconUrl(name: string) {\n  const customAssetUrl = getCustomAssetUrl();\n\n  if (customAssetUrl) {\n    return `${customAssetUrl}/${name}.svg`;\n  }\n\n  let url: string = `svg/${name}.svg`;\n\n  try {\n    url = getAssetPath(url);\n  } catch (error) {\n    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.`);\n  }\n\n  return url;\n}\n\nexport async function resolveIcon(element: HTMLIxIconElement, iconName?: string): Promise<string> {\n  if (!iconName) {\n    console.warn('No icon was provided', element);\n    return '';\n  }\n\n  if (isSvgDataUrl(iconName)) {\n    return parseSVGDataContent(iconName);\n  }\n\n  return loadIcon(iconName);\n}\n\nasync function loadIcon(iconName: string): Promise<string> {\n  const cache = getIconCacheMap();\n\n  if (cache.has(iconName)) {\n    return cache.get(iconName)!;\n  }\n\n  if (isValidUrl(iconName)) {\n    return fetchSVG(iconName);\n  }\n\n  return fetchSVG(getIconUrl(iconName));\n}\n\nfunction removePrefix(name: string, prefix: string) {\n  if (name.startsWith(prefix)) {\n    name = name.slice(prefix.length);\n    return name.replace(/^(\\w)/, (_match, p1) => p1.toLowerCase());\n  }\n\n  return name;\n}\n\nexport function addIcons(icons: { [name: string]: any }) {\n  Object.keys(icons).forEach(name => {\n    const icon = icons[name];\n    name = removePrefix(name, 'icon');\n\n    addIconToCache(name, icon);\n  });\n}\n\nexport function addIconToCache(name: string, icon: string) {\n  const cache = getIconCacheMap();\n\n  if (cache.has(name)) {\n    console.warn(`Icon name '${name}' already in cache. Overwritting with new icon data.`);\n  }\n\n  const svg = parseSVGDataContent(icon);\n\n  cache.set(name, svg);\n\n  const toKebabCase = name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z0-9])/g, '$1-$2').toLowerCase();\n\n  if (name != toKebabCase) {\n    cache.set(toKebabCase, svg);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@mixin size($size) {\n  height: $size;\n  width: $size;\n  min-height: $size;\n  min-width: $size;\n}\n\n:host {\n  display: inline-flex;\n  @include size(1.5rem);\n  color: inherit;\n\n  .svg-container {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    svg {\n      display: block;\n      position: relative;\n      height: 100%;\n      width: 100%;\n    }\n\n    svg,\n    svg[fill],\n    svg [fill] {\n      fill: currentColor !important;\n    }\n  }\n}\n\n:host(.size-12) {\n  @include size(0.75rem);\n}\n\n:host(.size-16) {\n  @include size(1rem);\n}\n\n:host(.size-32) {\n  @include size(2rem);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, h, Host, Prop, State, Watch, Element, Build } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\nimport { errorSymbol, parseSVGDataContent } from './parser';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n  assetsDirs: ['svg'],\n})\nexport class Icon {\n  @Element() hostElement!: HTMLIxIconElement;\n\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32' = '24';\n\n  /**\n   * Color of the icon\n   */\n  @Prop() color?: string;\n\n  /**\n   * Use one of our defined icon names e.g. `copy`\n   *\n   * https://ix.siemens.io/docs/icon-library/icons\n   *\n   * or the import variant\n   *\n   * ```\n   * import { rocket } from '@siemens/ix-icons/icons';\n   *\n   * <ix-icon name={rocket}></ix-icon>\n   * ```\n   */\n  @Prop() name?: string;\n\n  /**\n   * Only fetch and parse svg data when icon is visible\n   */\n  @Prop() lazyLoading = false;\n\n  @State() svgContent?: string;\n  @State() isVisible = false;\n\n  componentWillLoad() {\n    this.waitForRendering(() => {\n      this.isVisible = true;\n      this.loadIconContent();\n    });\n  }\n\n  @Watch('name')\n  async loadIconContent() {\n    const content = await resolveIcon(this.hostElement, this.name);\n\n    if (!content) {\n      this.svgContent = parseSVGDataContent(errorSymbol);\n      return;\n    }\n\n    this.svgContent = content;\n  }\n\n  private waitForRendering(onRender: () => void) {\n    if (Build.isBrowser && this.lazyLoading && typeof window !== 'undefined' && (window as any).IntersectionObserver) {\n      const observer = new IntersectionObserver(\n        entries => {\n          entries.forEach(entry => {\n            if (entry.isIntersecting) {\n              onRender();\n              observer.disconnect();\n            }\n          });\n        },\n        {\n          rootMargin: '25px',\n        },\n      );\n\n      observer.observe(this.hostElement);\n    } else {\n      onRender();\n    }\n  }\n\n  render() {\n    const style: {\n      [key: string]: string;\n    } = {};\n\n    if (this.color) {\n      style['color'] = `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        style={style}\n        class={{\n          ['size-12']: this.size === '12',\n          ['size-16']: this.size === '16',\n          ['size-24']: this.size === '24',\n          ['size-32']: this.size === '32',\n        }}\n      >\n        <div class={'svg-container'} innerHTML={this.svgContent}></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ix-icons/p-ca4fc358.entry.js

@@ -0,0 +1,2 @@
+export{I as ix_icon}from"./p-423803cb.js";import"./p-48b5ebf2.js";
+//# sourceMappingURL=p-ca4fc358.entry.js.map

package/dist/types/components/icon/icon.d.ts

@@ -7,7 +7,7 @@ export declare class Icon {
     /**
      * Color of the icon
      */
-    color: string;
+    color?: string;
     /**
      * Use one of our defined icon names e.g. `copy`
      *
@@ -21,7 +21,10 @@ export declare class Icon {
      * <ix-icon name={rocket}></ix-icon>
      * ```
      */
-    name: string;
+    name?: string;
+    /**
+     * Only fetch and parse svg data when icon is visible
+     */
     lazyLoading: boolean;
     svgContent?: string;
     isVisible: boolean;

package/dist/types/components/icon/meta-tag.d.ts

@@ -3,4 +3,4 @@
  *
  * <meta name="ix-icons:path" content="/build/svg" />
  */
-export declare function getCustomAssetUrl(): string | false;
+export declare function getCustomAssetUrl(): string | false | null;

package/dist/types/components/icon/parser.d.ts

@@ -0,0 +1,2 @@
+export declare 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>";
+export declare function parseSVGDataContent(content: string): string;

package/dist/types/components/icon/resolveIcon.d.ts

@@ -5,9 +5,8 @@ declare global {
 }
 export declare const getIconCacheMap: () => Map<string, string>;
 export declare const isSvgDataUrl: (url: string) => boolean;
-export declare function parseSVGDataContent(content: string): string;
 export declare function getIconUrl(name: string): string;
-export declare function resolveIcon(iconName: string): Promise<string>;
+export declare function resolveIcon(element: HTMLIxIconElement, iconName?: string): Promise<string>;
 export declare function addIcons(icons: {
     [name: string]: any;
 }): void;

package/dist/types/components.d.ts

@@ -10,12 +10,15 @@ export namespace Components {
         /**
           * Color of the icon
          */
-        "color": string;
+        "color"?: string;
+        /**
+          * Only fetch and parse svg data when icon is visible
+         */
         "lazyLoading": boolean;
         /**
           * Use one of our defined icon names e.g. `copy`  https://ix.siemens.io/docs/icon-library/icons  or the import variant  ``` import { rocket } from '@siemens/ix-icons/icons';  <ix-icon name={rocket}></ix-icon> ```
          */
-        "name": string;
+        "name"?: string;
         /**
           * Size of the icon
          */
@@ -39,6 +42,9 @@ declare namespace LocalJSX {
           * Color of the icon
          */
         "color"?: string;
+        /**
+          * Only fetch and parse svg data when icon is visible
+         */
         "lazyLoading"?: boolean;
         /**
           * Use one of our defined icon names e.g. `copy`  https://ix.siemens.io/docs/icon-library/icons  or the import variant  ``` import { rocket } from '@siemens/ix-icons/icons';  <ix-icon name={rocket}></ix-icon> ```

package/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/ix/icons",
-  "version": "0.0.0-pr-69-20250203134847",
+  "version": "0.0.0-pr-69-20250205144920",
   "module": "index.mjs",
   "main": "index.js",
   "typings": "index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/ix-icons",
-  "version": "0.0.0-pr-69-20250203134847",
+  "version": "0.0.0-pr-69-20250205144920",
   "license": "MIT",
   "description": "Siemens iX icon library",
   "author": "Siemens AG",