@siemens/ix-icons 1.1.0 → 1.1.2

package/dist/cjs/{icon-a769c6ea.js → icon-4106de76.js}

@@ -2,10 +2,15 @@
 
 const index = require('./index-22d7f5a7.js');
 
-/*
- * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
- */
-const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+const isSvgDataUrl = (url) => {
+  if (!url) {
+    return false;
+  }
+  if (typeof url !== 'string') {
+    return false;
+  }
+  return url.startsWith('data:image/svg+xml');
+};
 let parser = null;
 function parseSVGDataContent(content) {
   if (typeof window['DOMParser'] === 'undefined') {
@@ -29,7 +34,7 @@ async function fetchSVG(url) {
     console.error(responseText);
     return '';
   }
-  return responseText;
+  return parseSVGDataContent(responseText);
 }
 async function resolveIcon(icon) {
   const { src, name } = icon;
@@ -40,6 +45,9 @@ async function resolveIcon(icon) {
     //Fallback return undefined to render web font icon
     return;
   }
+  if (!src) {
+    return '';
+  }
   if (isSvgDataUrl(src)) {
     return parseSVGDataContent(src);
   }
@@ -103,4 +111,4 @@ Icon.style = iconCss;
 
 exports.Icon = Icon;
 
-//# sourceMappingURL=icon-a769c6ea.js.map
+//# sourceMappingURL=icon-4106de76.js.map

package/dist/cjs/icon-4106de76.js.map

@@ -0,0 +1 @@
+{"file":"icon-4106de76.js","mappings":"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","names":["h","Host"],"sources":["./src/components/icon/resolveIcon.ts","./src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["/*\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 { Icon } from './icon';\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\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('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    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return parseSVGDataContent(responseText);\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (!src) {\n    return '';\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\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@import './generated/ix-icons';\n\n:host {\n  display: inline-flex;\n  height: 1.5rem;\n  width: 1.5rem;\n\n  i {\n    color: inherit;\n    transition: color 150ms;\n  }\n\n  .svg-container {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .svg-container > svg {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .svg-container > svg [fill] {\n    fill: var(--theme-color-std-text);\n  }\n\n  .skeleton-box {\n    display: inline-block;\n    height: 1em;\n    position: relative;\n    overflow: hidden;\n    background-color: #dddbdd;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transform: translateX(-100%);\n      background-image: linear-gradient(90deg, rgba(#fff, 0) 0, rgba(#fff, 0.2) 20%, rgba(#fff, 0.5) 60%, rgba(#fff, 0));\n      animation: shimmer 2s infinite;\n      content: '';\n    }\n\n    @keyframes shimmer {\n      100% {\n        transform: translateX(100%);\n      }\n    }\n  }\n}\n\n:host(.size-12) {\n  height: 0.75rem;\n  width: 0.75rem;\n\n  .svg-container > svg {\n    height: 0.75rem;\n    width: 0.75rem;\n  }\n}\n\n:host(.size-16) {\n  height: 1rem;\n  width: 1rem;\n\n  .svg-container > svg {\n    height: 1rem;\n    width: 1rem;\n  }\n}\n\n:host(.size-32) {\n  height: 2rem;\n  width: 2rem;\n\n  .svg-container > svg {\n    height: 2rem;\n    width: 2rem;\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\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\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({ reflect: true }) name: string;\n\n  /**\n   * Path to load external SVG. All color properties\n   * will be overwritten by `--theme-color-std-text`\n   *\n   * https://ix.siemens.io/docs/theming/colors\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-a769c6ea.js');
+const icon = require('./icon-4106de76.js');
 require('./index-22d7f5a7.js');
 
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-a769c6ea.js');
+const icon = require('./icon-4106de76.js');
 require('./index-22d7f5a7.js');
 
 

package/dist/collection/components/icon/icon.js

@@ -113,7 +113,7 @@ export class Icon {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Use one of our defined icon names e.g. `copy`."
+          "text": "Use one of our defined icon names e.g. `copy`\n\nhttps://ix.siemens.io/docs/icon-library/icons\n\nor the import variant\n\n```\nimport { rocket } from '@siemens/ix-icons/icons';\n\n<ix-icon name={rocket}></ix-icon>\n```"
         },
         "attribute": "name",
         "reflect": true
@@ -133,7 +133,7 @@ export class Icon {
               "name": "internal",
               "text": undefined
             }],
-          "text": "Path to the svg"
+          "text": "Path to load external SVG. All color properties\nwill be overwritten by `--theme-color-std-text`\n\nhttps://ix.siemens.io/docs/theming/colors"
         },
         "attribute": "src",
         "reflect": false

package/dist/collection/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,OAAO,IAAI;;;;;;;;EAyBf,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAID,KAAK,CAAC,eAAe;IACnB,IAAI,CAAC,UAAU,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;EAC5C,CAAC;EAED,MAAM;IACJ,MAAM,KAAK,GAEP,EAAE,CAAC;IAEP,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,KAAK,CAAC,OAAO,CAAC,GAAG,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;KAC/C;IAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;MAC3B,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;UACL,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAChC;QAED,SACE,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,CAAC,SAAS,QAAQ,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;WAC/B,GACE,CACA,CACR,CAAC;KACH;IAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;QACL,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;OAChC,IAEA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,WAAK,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,CAChE,CAAC,CAAC,CAAC,CACF,YACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;OACf,GACK,CACT,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\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\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\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  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Path to the svg\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,OAAO,IAAI;;;;;;;;EAsCf,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAID,KAAK,CAAC,eAAe;IACnB,IAAI,CAAC,UAAU,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;EAC5C,CAAC;EAED,MAAM;IACJ,MAAM,KAAK,GAEP,EAAE,CAAC;IAEP,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,KAAK,CAAC,OAAO,CAAC,GAAG,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;KAC/C;IAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;MAC3B,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;UACL,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAChC;QAED,SACE,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,CAAC,SAAS,QAAQ,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;WAC/B,GACE,CACA,CACR,CAAC;KACH;IAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;QACL,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;OAChC,IAEA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,WAAK,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,CAChE,CAAC,CAAC,CAAC,CACF,YACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;OACf,GACK,CACT,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\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\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\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({ reflect: true }) name: string;\n\n  /**\n   * Path to load external SVG. All color properties\n   * will be overwritten by `--theme-color-std-text`\n   *\n   * https://ix.siemens.io/docs/theming/colors\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon/resolveIcon.js

@@ -1,7 +1,12 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
- */
-export const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+export const isSvgDataUrl = (url) => {
+  if (!url) {
+    return false;
+  }
+  if (typeof url !== 'string') {
+    return false;
+  }
+  return url.startsWith('data:image/svg+xml');
+};
 let parser = null;
 function parseSVGDataContent(content) {
   if (typeof window['DOMParser'] === 'undefined') {
@@ -25,7 +30,7 @@ async function fetchSVG(url) {
     console.error(responseText);
     return '';
   }
-  return responseText;
+  return parseSVGDataContent(responseText);
 }
 export async function resolveIcon(icon) {
   const { src, name } = icon;
@@ -36,6 +41,9 @@ export async function resolveIcon(icon) {
     //Fallback return undefined to render web font icon
     return;
   }
+  if (!src) {
+    return '';
+  }
   if (isSvgDataUrl(src)) {
     return parseSVGDataContent(src);
   }

package/dist/collection/components/icon/resolveIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolveIcon.js","sourceRoot":"","sources":["../../../src/components/icon/resolveIcon.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAElF,IAAI,MAAM,GAAG,IAAI,CAAC;AAElB,SAAS,mBAAmB,CAAC,OAAe;EAC1C,IAAI,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;IAC9C,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;IACzD,OAAO;GACR;EAED,IAAI,MAAM,KAAK,IAAI,EAAE;IACnB,MAAM,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;GACpC;EAED,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;EACjE,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAEpD,IAAI,CAAC,UAAU,EAAE;IACf,MAAM,KAAK,CAAC,4BAA4B,CAAC,CAAC;GAC3C;EAED,OAAO,UAAU,CAAC,SAAS,CAAC;AAC9B,CAAC;AAED,KAAK,UAAU,QAAQ,CAAC,GAAW;EACjC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;EAClC,MAAM,YAAY,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;EAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;IAChB,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC5B,OAAO,EAAE,CAAC;GACX;EAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,IAAU;EAC1C,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;EAE3B,IAAI,IAAI,EAAE;IACR,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE;MACtB,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,mDAAmD;IACnD,OAAO;GACR;EAED,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE;IACrB,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC;GACjC;EAED,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;AACvB,CAAC","sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.\n */\n\nimport { Icon } from './icon';\n\nexport const isSvgDataUrl = (url: string) => url.startsWith('data:image/svg+xml');\n\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('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');\n\n  if (!svgElement) {\n    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return responseText;\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\n}\n"]}
+{"version":3,"file":"resolveIcon.js","sourceRoot":"","sources":["../../../src/components/icon/resolveIcon.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;EAC1C,IAAI,CAAC,GAAG,EAAE;IACR,OAAO,KAAK,CAAC;GACd;EAED,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;IAC3B,OAAO,KAAK,CAAC;GACd;EAED,OAAO,GAAG,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAI,MAAM,GAAG,IAAI,CAAC;AAElB,SAAS,mBAAmB,CAAC,OAAe;EAC1C,IAAI,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;IAC9C,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;IACzD,OAAO;GACR;EAED,IAAI,MAAM,KAAK,IAAI,EAAE;IACnB,MAAM,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;GACpC;EAED,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;EACjE,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAgB,CAAC;EAEnE,IAAI,CAAC,UAAU,EAAE;IACf,MAAM,KAAK,CAAC,4BAA4B,CAAC,CAAC;GAC3C;EAED,OAAO,UAAU,CAAC,SAAS,CAAC;AAC9B,CAAC;AAED,KAAK,UAAU,QAAQ,CAAC,GAAW;EACjC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;EAClC,MAAM,YAAY,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;EAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;IAChB,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC5B,OAAO,EAAE,CAAC;GACX;EAED,OAAO,mBAAmB,CAAC,YAAY,CAAC,CAAC;AAC3C,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,IAAU;EAC1C,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;EAE3B,IAAI,IAAI,EAAE;IACR,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE;MACtB,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,mDAAmD;IACnD,OAAO;GACR;EAED,IAAI,CAAC,GAAG,EAAE;IACR,OAAO,EAAE,CAAC;GACX;EAED,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE;IACrB,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC;GACjC;EAED,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;AACvB,CAAC","sourcesContent":["/*\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 { Icon } from './icon';\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\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('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    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return parseSVGDataContent(responseText);\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (!src) {\n    return '';\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\n}\n"]}

package/dist/components/icon.js

@@ -1,9 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-/*
- * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
- */
-const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+const isSvgDataUrl = (url) => {
+  if (!url) {
+    return false;
+  }
+  if (typeof url !== 'string') {
+    return false;
+  }
+  return url.startsWith('data:image/svg+xml');
+};
 let parser = null;
 function parseSVGDataContent(content) {
   if (typeof window['DOMParser'] === 'undefined') {
@@ -27,7 +32,7 @@ async function fetchSVG(url) {
     console.error(responseText);
     return '';
   }
-  return responseText;
+  return parseSVGDataContent(responseText);
 }
 async function resolveIcon(icon) {
   const { src, name } = icon;
@@ -38,6 +43,9 @@ async function resolveIcon(icon) {
     //Fallback return undefined to render web font icon
     return;
   }
+  if (!src) {
+    return '';
+  }
   if (isSvgDataUrl(src)) {
     return parseSVGDataContent(src);
   }

package/dist/components/icon.js.map

@@ -1 +1 @@
-{"file":"icon.js","mappings":"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","names":[],"sources":["./src/components/icon/resolveIcon.ts","./src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.\n */\n\nimport { Icon } from './icon';\n\nexport const isSvgDataUrl = (url: string) => url.startsWith('data:image/svg+xml');\n\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('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');\n\n  if (!svgElement) {\n    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return responseText;\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\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@import './generated/ix-icons';\n\n:host {\n  display: inline-flex;\n  height: 1.5rem;\n  width: 1.5rem;\n\n  i {\n    color: inherit;\n    transition: color 150ms;\n  }\n\n  .svg-container {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .svg-container > svg {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .svg-container > svg [fill] {\n    fill: var(--theme-color-std-text);\n  }\n\n  .skeleton-box {\n    display: inline-block;\n    height: 1em;\n    position: relative;\n    overflow: hidden;\n    background-color: #dddbdd;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transform: translateX(-100%);\n      background-image: linear-gradient(90deg, rgba(#fff, 0) 0, rgba(#fff, 0.2) 20%, rgba(#fff, 0.5) 60%, rgba(#fff, 0));\n      animation: shimmer 2s infinite;\n      content: '';\n    }\n\n    @keyframes shimmer {\n      100% {\n        transform: translateX(100%);\n      }\n    }\n  }\n}\n\n:host(.size-12) {\n  height: 0.75rem;\n  width: 0.75rem;\n\n  .svg-container > svg {\n    height: 0.75rem;\n    width: 0.75rem;\n  }\n}\n\n:host(.size-16) {\n  height: 1rem;\n  width: 1rem;\n\n  .svg-container > svg {\n    height: 1rem;\n    width: 1rem;\n  }\n}\n\n:host(.size-32) {\n  height: 2rem;\n  width: 2rem;\n\n  .svg-container > svg {\n    height: 2rem;\n    width: 2rem;\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\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\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  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Path to the svg\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"icon.js","mappings":"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","names":[],"sources":["./src/components/icon/resolveIcon.ts","./src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["/*\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 { Icon } from './icon';\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\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('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    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return parseSVGDataContent(responseText);\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (!src) {\n    return '';\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\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@import './generated/ix-icons';\n\n:host {\n  display: inline-flex;\n  height: 1.5rem;\n  width: 1.5rem;\n\n  i {\n    color: inherit;\n    transition: color 150ms;\n  }\n\n  .svg-container {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .svg-container > svg {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .svg-container > svg [fill] {\n    fill: var(--theme-color-std-text);\n  }\n\n  .skeleton-box {\n    display: inline-block;\n    height: 1em;\n    position: relative;\n    overflow: hidden;\n    background-color: #dddbdd;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transform: translateX(-100%);\n      background-image: linear-gradient(90deg, rgba(#fff, 0) 0, rgba(#fff, 0.2) 20%, rgba(#fff, 0.5) 60%, rgba(#fff, 0));\n      animation: shimmer 2s infinite;\n      content: '';\n    }\n\n    @keyframes shimmer {\n      100% {\n        transform: translateX(100%);\n      }\n    }\n  }\n}\n\n:host(.size-12) {\n  height: 0.75rem;\n  width: 0.75rem;\n\n  .svg-container > svg {\n    height: 0.75rem;\n    width: 0.75rem;\n  }\n}\n\n:host(.size-16) {\n  height: 1rem;\n  width: 1rem;\n\n  .svg-container > svg {\n    height: 1rem;\n    width: 1rem;\n  }\n}\n\n:host(.size-32) {\n  height: 2rem;\n  width: 2rem;\n\n  .svg-container > svg {\n    height: 2rem;\n    width: 2rem;\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\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\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({ reflect: true }) name: string;\n\n  /**\n   * Path to load external SVG. All color properties\n   * will be overwritten by `--theme-color-std-text`\n   *\n   * https://ix.siemens.io/docs/theming/colors\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/{icon-adfc87aa.js → icon-cb9cbf8c.js}

@@ -1,9 +1,14 @@
 import { r as registerInstance, h, H as Host } from './index-460e19e2.js';
 
-/*
- * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
- */
-const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+const isSvgDataUrl = (url) => {
+  if (!url) {
+    return false;
+  }
+  if (typeof url !== 'string') {
+    return false;
+  }
+  return url.startsWith('data:image/svg+xml');
+};
 let parser = null;
 function parseSVGDataContent(content) {
   if (typeof window['DOMParser'] === 'undefined') {
@@ -27,7 +32,7 @@ async function fetchSVG(url) {
     console.error(responseText);
     return '';
   }
-  return responseText;
+  return parseSVGDataContent(responseText);
 }
 async function resolveIcon(icon) {
   const { src, name } = icon;
@@ -38,6 +43,9 @@ async function resolveIcon(icon) {
     //Fallback return undefined to render web font icon
     return;
   }
+  if (!src) {
+    return '';
+  }
   if (isSvgDataUrl(src)) {
     return parseSVGDataContent(src);
   }
@@ -101,4 +109,4 @@ Icon.style = iconCss;
 
 export { Icon as I };
 
-//# sourceMappingURL=icon-adfc87aa.js.map
+//# sourceMappingURL=icon-cb9cbf8c.js.map

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

@@ -0,0 +1 @@
+{"file":"icon-cb9cbf8c.js","mappings":"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","names":[],"sources":["./src/components/icon/resolveIcon.ts","./src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["/*\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 { Icon } from './icon';\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\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('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    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return parseSVGDataContent(responseText);\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (!src) {\n    return '';\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\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@import './generated/ix-icons';\n\n:host {\n  display: inline-flex;\n  height: 1.5rem;\n  width: 1.5rem;\n\n  i {\n    color: inherit;\n    transition: color 150ms;\n  }\n\n  .svg-container {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .svg-container > svg {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .svg-container > svg [fill] {\n    fill: var(--theme-color-std-text);\n  }\n\n  .skeleton-box {\n    display: inline-block;\n    height: 1em;\n    position: relative;\n    overflow: hidden;\n    background-color: #dddbdd;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transform: translateX(-100%);\n      background-image: linear-gradient(90deg, rgba(#fff, 0) 0, rgba(#fff, 0.2) 20%, rgba(#fff, 0.5) 60%, rgba(#fff, 0));\n      animation: shimmer 2s infinite;\n      content: '';\n    }\n\n    @keyframes shimmer {\n      100% {\n        transform: translateX(100%);\n      }\n    }\n  }\n}\n\n:host(.size-12) {\n  height: 0.75rem;\n  width: 0.75rem;\n\n  .svg-container > svg {\n    height: 0.75rem;\n    width: 0.75rem;\n  }\n}\n\n:host(.size-16) {\n  height: 1rem;\n  width: 1rem;\n\n  .svg-container > svg {\n    height: 1rem;\n    width: 1rem;\n  }\n}\n\n:host(.size-32) {\n  height: 2rem;\n  width: 2rem;\n\n  .svg-container > svg {\n    height: 2rem;\n    width: 2rem;\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\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\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({ reflect: true }) name: string;\n\n  /**\n   * Path to load external SVG. All color properties\n   * will be overwritten by `--theme-color-std-text`\n   *\n   * https://ix.siemens.io/docs/theming/colors\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { I as Icon } from './icon-adfc87aa.js';
+export { I as Icon } from './icon-cb9cbf8c.js';
 import './index-460e19e2.js';
 
 //# sourceMappingURL=index.js.map

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

@@ -1,4 +1,4 @@
-export { I as ix_icon } from './icon-adfc87aa.js';
+export { I as ix_icon } from './icon-cb9cbf8c.js';
 import './index-460e19e2.js';
 
 //# sourceMappingURL=ix-icon.entry.js.map

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

@@ -1,2 +1,2 @@
-export{I as Icon}from"./p-14a21eef.js";import"./p-625c25c8.js";
+export{I as Icon}from"./p-37738e42.js";import"./p-625c25c8.js";
 //# sourceMappingURL=index.esm.js.map

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

@@ -1,2 +1,2 @@
-import{p as o,b as c}from"./p-625c25c8.js";export{s as setNonce}from"./p-625c25c8.js";const t=()=>{const s=import.meta.url;const c={};if(s!==""){c.resourcesUrl=new URL(".",s).href}return o(c)};t().then((o=>c([["p-24f58d37",[[1,"ix-icon",{size:[1],color:[1],name:[513],src:[1],svgContent:[32]}]]]],o)));
+import{p as o,b as c}from"./p-625c25c8.js";export{s as setNonce}from"./p-625c25c8.js";const t=()=>{const s=import.meta.url;const c={};if(s!==""){c.resourcesUrl=new URL(".",s).href}return o(c)};t().then((o=>c([["p-2a168ebc",[[1,"ix-icon",{size:[1],color:[1],name:[513],src:[1],svgContent:[32]}]]]],o)));
 //# sourceMappingURL=ix-icons.esm.js.map

package/dist/ix-icons/p-2a168ebc.entry.js

@@ -0,0 +1,2 @@
+export{I as ix_icon}from"./p-37738e42.js";import"./p-625c25c8.js";
+//# sourceMappingURL=p-2a168ebc.entry.js.map

package/dist/ix-icons/p-37738e42.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as o}from"./p-625c25c8.js";const n=e=>{if(!e){return false}if(typeof e!=="string"){return false}return e.startsWith("data:image/svg+xml")};let l=null;function c(e){if(typeof window["DOMParser"]==="undefined"){console.warn("DOMParser not supported by your browser.");return}if(l===null){l=new window["DOMParser"]}const t=l.parseFromString(e,"text/html");const o=t.querySelector("svg");if(!o){throw Error("No valid svg data provided")}return o.outerHTML}async function r(e){const t=await fetch(e);const o=await t.text();if(!t.ok){console.error(o);return""}return c(o)}async function b(e){const{src:t,name:o}=e;if(o){if(n(o)){return c(o)}return}if(!t){return""}if(n(t)){return c(t)}return r(t)}const f='.glyph{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-family:"ix-icons";font-size:1.5rem;font-weight:500}.glyph-lg{font-size:1.3333333333em;line-height:0.75em;vertical-align:-15%}.glyph-2x{font-size:2em}.glyph-3x{font-size:3em}.glyph-4x{font-size:4em}.glyph-5x{font-size:5em}.glyph-fw{width:1.2857142857em;text-align:center}.glyph-12{font-size:0.75rem}.glyph-16{font-size:1rem}.glyph-24{font-size:1.5rem}.glyph-32{font-size:2rem}.glyph-about-filled:before{content:"\\ea01"}.glyph-about:before{content:"\\ea02"}.glyph-add-circle-filled:before{content:"\\ea03"}.glyph-add-circle:before{content:"\\ea04"}.glyph-add-document-note:before{content:"\\ea05"}.glyph-add-eye-filled:before{content:"\\ea06"}.glyph-add-eye:before{content:"\\ea07"}.glyph-add-task-list:before{content:"\\ea08"}.glyph-add-task:before{content:"\\ea09"}.glyph-add:before{content:"\\ea0a"}.glyph-ai:before{content:"\\ea0b"}.glyph-alarm-bell-cancelled-filled:before{content:"\\ea0c"}.glyph-alarm-bell-cancelled:before{content:"\\ea0d"}.glyph-alarm-bell-filled:before{content:"\\ea0e"}.glyph-alarm-bell:before{content:"\\ea0f"}.glyph-alarm-clock-filled:before{content:"\\ea10"}.glyph-alarm-clock:before{content:"\\ea11"}.glyph-alarm-filled:before{content:"\\ea12"}.glyph-alarm:before{content:"\\ea13"}.glyph-analyze:before{content:"\\ea14"}.glyph-anomaly-found:before{content:"\\ea15"}.glyph-anomaly:before{content:"\\ea16"}.glyph-app-menu:before{content:"\\ea17"}.glyph-apps:before{content:"\\ea18"}.glyph-arrow-down-right:before{content:"\\ea19"}.glyph-arrow-down:before{content:"\\ea1a"}.glyph-arrow-left:before{content:"\\ea1b"}.glyph-arrow-right-down:before{content:"\\ea1c"}.glyph-arrow-right:before{content:"\\ea1d"}.glyph-arrow-up:before{content:"\\ea1e"}.glyph-attach:before{content:"\\ea1f"}.glyph-attachment-upload:before{content:"\\ea20"}.glyph-audio-description1:before{content:"\\ea21"}.glyph-audio-description2:before{content:"\\ea22"}.glyph-audit-report:before{content:"\\ea23"}.glyph-average:before{content:"\\ea24"}.glyph-backup-filled:before{content:"\\ea25"}.glyph-backup:before{content:"\\ea26"}.glyph-bar-code:before{content:"\\ea27"}.glyph-barchart:before{content:"\\ea28"}.glyph-battery-check:before{content:"\\ea29"}.glyph-battery-empty-question:before{content:"\\ea2a"}.glyph-battery-empty:before{content:"\\ea2b"}.glyph-battery-exclamation:before{content:"\\ea2c"}.glyph-battery-full-check:before{content:"\\ea2d"}.glyph-battery-full:before{content:"\\ea2e"}.glyph-battery-half:before{content:"\\ea2f"}.glyph-battery-low:before{content:"\\ea30"}.glyph-battery-quarter:before{content:"\\ea31"}.glyph-battery-slash:before{content:"\\ea32"}.glyph-battery-three-quarter:before{content:"\\ea33"}.glyph-battery-xmark:before{content:"\\ea34"}.glyph-bezier-curve:before{content:"\\ea35"}.glyph-binoculars-filled:before{content:"\\ea36"}.glyph-binoculars:before{content:"\\ea37"}.glyph-blazor:before{content:"\\ea38"}.glyph-book:before{content:"\\ea39"}.glyph-bookmark-filled:before{content:"\\ea3a"}.glyph-bookmark:before{content:"\\ea3b"}.glyph-boundary-signals:before{content:"\\ea3c"}.glyph-building1-filled:before{content:"\\ea3d"}.glyph-building1:before{content:"\\ea3e"}.glyph-building2-filled:before{content:"\\ea3f"}.glyph-building2:before{content:"\\ea40"}.glyph-bulb-filled:before{content:"\\ea41"}.glyph-bulb:before{content:"\\ea42"}.glyph-calendar-filled:before{content:"\\ea43"}.glyph-calendar-settings:before{content:"\\ea44"}.glyph-calendar:before{content:"\\ea45"}.glyph-cancel:before{content:"\\ea46"}.glyph-cancelled:before{content:"\\ea47"}.glyph-capacity-filled:before{content:"\\ea48"}.glyph-capacity:before{content:"\\ea49"}.glyph-capture:before{content:"\\ea4a"}.glyph-car-filled:before{content:"\\ea4b"}.glyph-car:before{content:"\\ea4c"}.glyph-card-layout-filled:before{content:"\\ea4d"}.glyph-card-layout:before{content:"\\ea4e"}.glyph-chart-cursor:before{content:"\\ea4f"}.glyph-chart-curve-linear:before{content:"\\ea50"}.glyph-chart-curve-spline:before{content:"\\ea51"}.glyph-chart-curve-stepped:before{content:"\\ea52"}.glyph-chart-diagram-add:before{content:"\\ea53"}.glyph-chart-diagram:before{content:"\\ea54"}.glyph-chart-diagrams:before{content:"\\ea55"}.glyph-chart-labels-filled:before{content:"\\ea56"}.glyph-chart-labels:before{content:"\\ea57"}.glyph-check-in:before{content:"\\ea58"}.glyph-check-out:before{content:"\\ea59"}.glyph-checkbox-component-checked:before{content:"\\ea5a"}.glyph-checkbox-component-mixed:before{content:"\\ea5b"}.glyph-checkbox-component-unchecked:before{content:"\\ea5c"}.glyph-checkbox-filled:before{content:"\\ea5d"}.glyph-checkbox:before{content:"\\ea5e"}.glyph-checkboxes-filled:before{content:"\\ea5f"}.glyph-checkboxes:before{content:"\\ea60"}.glyph-chevron-down-small:before{content:"\\ea61"}.glyph-chevron-down:before{content:"\\ea62"}.glyph-chevron-left-small:before{content:"\\ea63"}.glyph-chevron-left:before{content:"\\ea64"}.glyph-chevron-right-small:before{content:"\\ea65"}.glyph-chevron-right:before{content:"\\ea66"}.glyph-chevron-up-small:before{content:"\\ea67"}.glyph-chevron-up:before{content:"\\ea68"}.glyph-circle-dot-filled:before{content:"\\ea69"}.glyph-circle-dot:before{content:"\\ea6a"}.glyph-circle-filled:before{content:"\\ea6b"}.glyph-circle-pause-filled:before{content:"\\ea6c"}.glyph-circle-pause:before{content:"\\ea6d"}.glyph-circle-play-filled:before{content:"\\ea6e"}.glyph-circle-play:before{content:"\\ea6f"}.glyph-circle-stop-filled:before{content:"\\ea70"}.glyph-circle-stop:before{content:"\\ea71"}.glyph-circle:before{content:"\\ea72"}.glyph-clear-filter-filled:before{content:"\\ea73"}.glyph-clear-filter:before{content:"\\ea74"}.glyph-clear:before{content:"\\ea75"}.glyph-clock-filled:before{content:"\\ea76"}.glyph-clock:before{content:"\\ea77"}.glyph-close-small:before{content:"\\ea78"}.glyph-close:before{content:"\\ea79"}.glyph-cloud-download-add-filled:before{content:"\\ea7a"}.glyph-cloud-download-add:before{content:"\\ea7b"}.glyph-cloud-download-filled:before{content:"\\ea7c"}.glyph-cloud-download-list-filled:before{content:"\\ea7d"}.glyph-cloud-download-list:before{content:"\\ea7e"}.glyph-cloud-download:before{content:"\\ea7f"}.glyph-cloud-filled:before{content:"\\ea80"}.glyph-cloud-new-filled:before{content:"\\ea81"}.glyph-cloud-new:before{content:"\\ea82"}.glyph-cloud-success-filled:before{content:"\\ea83"}.glyph-cloud-success:before{content:"\\ea84"}.glyph-cloud-upload-filled:before{content:"\\ea85"}.glyph-cloud-upload:before{content:"\\ea86"}.glyph-cloud:before{content:"\\ea87"}.glyph-code:before{content:"\\ea88"}.glyph-cogwheel-filled:before{content:"\\ea89"}.glyph-cogwheel:before{content:"\\ea8a"}.glyph-combine:before{content:"\\ea8b"}.glyph-compact-disc-filled:before{content:"\\ea8c"}.glyph-compact-disc:before{content:"\\ea8d"}.glyph-compound-block:before{content:"\\ea8e"}.glyph-configuration:before{content:"\\ea8f"}.glyph-configure-filled:before{content:"\\ea90"}.glyph-configure:before{content:"\\ea91"}.glyph-connected:before{content:"\\ea92"}.glyph-connector-chart-filled:before{content:"\\ea93"}.glyph-connector-chart:before{content:"\\ea94"}.glyph-connector-filled:before{content:"\\ea95"}.glyph-connector-hex-filled:before{content:"\\ea96"}.glyph-connector-hex:before{content:"\\ea97"}.glyph-connector-rect-filled:before{content:"\\ea98"}.glyph-connector-rect:before{content:"\\ea99"}.glyph-connector-rhomb-filled:before{content:"\\ea9a"}.glyph-connector-rhomb:before{content:"\\ea9b"}.glyph-connector:before{content:"\\ea9c"}.glyph-consistency-check:before{content:"\\ea9d"}.glyph-contact-details-filled:before{content:"\\ea9e"}.glyph-contact-details:before{content:"\\ea9f"}.glyph-context-menu:before{content:"\\eaa0"}.glyph-controlled-device:before{content:"\\eaa1"}.glyph-controller-device:before{content:"\\eaa2"}.glyph-copy:before{content:"\\eaa3"}.glyph-corner-arrow-up-left:before{content:"\\eaa4"}.glyph-couch-filled:before{content:"\\eaa5"}.glyph-couch:before{content:"\\eaa6"}.glyph-create-plant-filled:before{content:"\\eaa7"}.glyph-create-plant:before{content:"\\eaa8"}.glyph-cut:before{content:"\\eaa9"}.glyph-cycle:before{content:"\\eaaa"}.glyph-data-egress:before{content:"\\eaab"}.glyph-data-ingress-egress:before{content:"\\eaac"}.glyph-data-ingress:before{content:"\\eaad"}.glyph-database-filled:before{content:"\\eaae"}.glyph-database:before{content:"\\eaaf"}.glyph-details:before{content:"\\eab0"}.glyph-diagram-module-library:before{content:"\\eab1"}.glyph-diagram-module-new:before{content:"\\eab2"}.glyph-diagram-module:before{content:"\\eab3"}.glyph-diamond:before{content:"\\eab4"}.glyph-disconnected:before{content:"\\eab5"}.glyph-disk-filled:before{content:"\\eab6"}.glyph-disk-pen:before{content:"\\eab7"}.glyph-disk:before{content:"\\eab8"}.glyph-distribution:before{content:"\\eab9"}.glyph-doc-document:before{content:"\\eaba"}.glyph-document-bulk:before{content:"\\eabb"}.glyph-document-info:before{content:"\\eabc"}.glyph-document-link:before{content:"\\eabd"}.glyph-document-management:before{content:"\\eabe"}.glyph-document-reference:before{content:"\\eabf"}.glyph-document-settings:before{content:"\\eac0"}.glyph-document-success:before{content:"\\eac1"}.glyph-document:before{content:"\\eac2"}.glyph-double-check:before{content:"\\eac3"}.glyph-double-chevron-down:before{content:"\\eac4"}.glyph-double-chevron-left:before{content:"\\eac5"}.glyph-double-chevron-right:before{content:"\\eac6"}.glyph-double-chevron-up:before{content:"\\eac7"}.glyph-doublet-filled:before{content:"\\eac8"}.glyph-doublet:before{content:"\\eac9"}.glyph-download-add:before{content:"\\eaca"}.glyph-download-list:before{content:"\\eacb"}.glyph-download:before{content:"\\eacc"}.glyph-drop:before{content:"\\eacd"}.glyph-duplicate-document:before{content:"\\eace"}.glyph-duplicate:before{content:"\\eacf"}.glyph-e-mail-filled:before{content:"\\ead0"}.glyph-e-mail:before{content:"\\ead1"}.glyph-earth-filled:before{content:"\\ead2"}.glyph-earth:before{content:"\\ead3"}.glyph-edit-plant:before{content:"\\ead4"}.glyph-ellipse-arc:before{content:"\\ead5"}.glyph-ellipse-filled:before{content:"\\ead6"}.glyph-ellipse:before{content:"\\ead7"}.glyph-error-filled:before{content:"\\ead8"}.glyph-error:before{content:"\\ead9"}.glyph-explore-filled:before{content:"\\eada"}.glyph-explore:before{content:"\\eadb"}.glyph-export:before{content:"\\eadc"}.glyph-eye-cancelled-filled:before{content:"\\eadd"}.glyph-eye-cancelled:before{content:"\\eade"}.glyph-eye-filled:before{content:"\\eadf"}.glyph-eye:before{content:"\\eae0"}.glyph-factory-reset-filled:before{content:"\\eae1"}.glyph-factory-reset:before{content:"\\eae2"}.glyph-filter-filled:before{content:"\\eae3"}.glyph-filter-outline:before{content:"\\eae4"}.glyph-filter:before{content:"\\eae5"}.glyph-flag-filled:before{content:"\\eae6"}.glyph-flag:before{content:"\\eae7"}.glyph-folder-down-filled:before{content:"\\eae8"}.glyph-folder-down:before{content:"\\eae9"}.glyph-folder-filled:before{content:"\\eaea"}.glyph-folder-new-filled:before{content:"\\eaeb"}.glyph-folder-new-outline:before{content:"\\eaec"}.glyph-folder-new:before{content:"\\eaed"}.glyph-folder-open-filled:before{content:"\\eaee"}.glyph-folder-open-outline:before{content:"\\eaef"}.glyph-folder-open:before{content:"\\eaf0"}.glyph-folder-outline:before{content:"\\eaf1"}.glyph-folder-up-filled:before{content:"\\eaf2"}.glyph-folder-up:before{content:"\\eaf3"}.glyph-folder:before{content:"\\eaf4"}.glyph-full-screeen-exit:before{content:"\\eaf5"}.glyph-full-screeen:before{content:"\\eaf6"}.glyph-function-block-library:before{content:"\\eaf7"}.glyph-function-block-new:before{content:"\\eaf8"}.glyph-function-block:before{content:"\\eaf9"}.glyph-function-diagram-new:before{content:"\\eafa"}.glyph-function-diagram:before{content:"\\eafb"}.glyph-gauge-filled:before{content:"\\eafc"}.glyph-gauge:before{content:"\\eafd"}.glyph-gaugechart:before{content:"\\eafe"}.glyph-global-plant-filled:before{content:"\\eaff"}.glyph-global-plant:before{content:"\\eb00"}.glyph-globe-filled:before{content:"\\eb01"}.glyph-globe:before{content:"\\eb02"}.glyph-goto:before{content:"\\eb03"}.glyph-group:before{content:"\\eb04"}.glyph-hard-reset:before{content:"\\eb05"}.glyph-hardware-cabinet:before{content:"\\eb06"}.glyph-health-filled:before{content:"\\eb07"}.glyph-health:before{content:"\\eb08"}.glyph-heart-filled:before{content:"\\eb09"}.glyph-heart:before{content:"\\eb0a"}.glyph-hexagon-vertical-bars-database-filled:before{content:"\\eb0b"}.glyph-hexagon-vertical-bars-database:before{content:"\\eb0c"}.glyph-hexagon-vertical-bars-filled:before{content:"\\eb0d"}.glyph-hexagon-vertical-bars:before{content:"\\eb0e"}.glyph-hierarchy:before{content:"\\eb0f"}.glyph-highlight-filled:before{content:"\\eb10"}.glyph-highlight:before{content:"\\eb11"}.glyph-history-list:before{content:"\\eb12"}.glyph-history:before{content:"\\eb13"}.glyph-home-filled:before{content:"\\eb14"}.glyph-home:before{content:"\\eb15"}.glyph-hourglass:before{content:"\\eb16"}.glyph-image-filled:before{content:"\\eb17"}.glyph-image:before{content:"\\eb18"}.glyph-import:before{content:"\\eb19"}.glyph-info-feed:before{content:"\\eb1a"}.glyph-info-filled:before{content:"\\eb1b"}.glyph-info:before{content:"\\eb1c"}.glyph-ingestion-report:before{content:"\\eb1d"}.glyph-ingestion:before{content:"\\eb1e"}.glyph-ink-pen:before{content:"\\eb1f"}.glyph-inquiry-filled:before{content:"\\eb20"}.glyph-inquiry-mail:before{content:"\\eb21"}.glyph-inquiry:before{content:"\\eb22"}.glyph-item-details-filled:before{content:"\\eb23"}.glyph-item-details:before{content:"\\eb24"}.glyph-label-filled:before{content:"\\eb25"}.glyph-label:before{content:"\\eb26"}.glyph-language-filled:before{content:"\\eb27"}.glyph-language:before{content:"\\eb28"}.glyph-layers-filled:before{content:"\\eb29"}.glyph-layers:before{content:"\\eb2a"}.glyph-leaf:before{content:"\\eb2b"}.glyph-legal:before{content:"\\eb2c"}.glyph-library-new:before{content:"\\eb2d"}.glyph-library:before{content:"\\eb2e"}.glyph-license:before{content:"\\eb2f"}.glyph-light-dark:before{content:"\\eb30"}.glyph-line-diagonal:before{content:"\\eb31"}.glyph-link:before{content:"\\eb32"}.glyph-list:before{content:"\\eb33"}.glyph-live-schedule:before{content:"\\eb34"}.glyph-location-filled:before{content:"\\eb35"}.glyph-location-outline:before{content:"\\eb36"}.glyph-location:before{content:"\\eb37"}.glyph-lock-filled:before{content:"\\eb38"}.glyph-lock-key-filled:before{content:"\\eb39"}.glyph-lock-key:before{content:"\\eb3a"}.glyph-lock:before{content:"\\eb3b"}.glyph-log-in:before{content:"\\eb3c"}.glyph-log-out:before{content:"\\eb3d"}.glyph-log:before{content:"\\eb3e"}.glyph-logic-diagram:before{content:"\\eb3f"}.glyph-lower-limit:before{content:"\\eb40"}.glyph-mail-filled:before{content:"\\eb41"}.glyph-mail:before{content:"\\eb42"}.glyph-maintenance-documents:before{content:"\\eb43"}.glyph-maintenance-info:before{content:"\\eb44"}.glyph-maintenance-warning-filled:before{content:"\\eb45"}.glyph-maintenance-warning:before{content:"\\eb46"}.glyph-maintenance:before{content:"\\eb47"}.glyph-mandatory-done:before{content:"\\eb48"}.glyph-mandatory:before{content:"\\eb49"}.glyph-map:before{content:"\\eb4a"}.glyph-maximize:before{content:"\\eb4b"}.glyph-microphone-filled:before{content:"\\eb4c"}.glyph-microphone:before{content:"\\eb4d"}.glyph-minimize:before{content:"\\eb4e"}.glyph-minus:before{content:"\\eb4f"}.glyph-mix:before{content:"\\eb50"}.glyph-monitor-filled:before{content:"\\eb51"}.glyph-monitor-trend:before{content:"\\eb52"}.glyph-monitor:before{content:"\\eb53"}.glyph-monitoring-add:before{content:"\\eb54"}.glyph-monitoring:before{content:"\\eb55"}.glyph-monitorings:before{content:"\\eb56"}.glyph-moon-filled:before{content:"\\eb57"}.glyph-moon:before{content:"\\eb58"}.glyph-more-menu:before{content:"\\eb59"}.glyph-mouse-click-filled:before{content:"\\eb5a"}.glyph-mouse-click:before{content:"\\eb5b"}.glyph-mouse-select-filled:before{content:"\\eb5c"}.glyph-mouse-select:before{content:"\\eb5d"}.glyph-mp4-document:before{content:"\\eb5e"}.glyph-namur-check-function-filled:before{content:"\\eb5f"}.glyph-namur-check-function:before{content:"\\eb60"}.glyph-namur-failure-filled:before{content:"\\eb61"}.glyph-namur-failure:before{content:"\\eb62"}.glyph-namur-maintenance-required-filled:before{content:"\\eb63"}.glyph-namur-maintenance-required:before{content:"\\eb64"}.glyph-namur-ok-filled:before{content:"\\eb65"}.glyph-namur-ok:before{content:"\\eb66"}.glyph-namur-out-of-spec-filled:before{content:"\\eb67"}.glyph-namur-out-of-spec:before{content:"\\eb68"}.glyph-navigation-filled:before{content:"\\eb69"}.glyph-navigation-left:before{content:"\\eb6a"}.glyph-navigation-right:before{content:"\\eb6b"}.glyph-navigation:before{content:"\\eb6c"}.glyph-new-indicator-filled:before{content:"\\eb6d"}.glyph-new-indicator:before{content:"\\eb6e"}.glyph-no-filter-filled:before{content:"\\eb6f"}.glyph-no-filter:before{content:"\\eb70"}.glyph-no-image:before{content:"\\eb71"}.glyph-note-filled:before{content:"\\eb72"}.glyph-note:before{content:"\\eb73"}.glyph-notification-filled:before{content:"\\eb74"}.glyph-notification:before{content:"\\eb75"}.glyph-notifications-filled:before{content:"\\eb76"}.glyph-notifications:before{content:"\\eb77"}.glyph-ontology-filled:before{content:"\\eb78"}.glyph-ontology:before{content:"\\eb79"}.glyph-open-external:before{content:"\\eb7a"}.glyph-open-file-filled:before{content:"\\eb7b"}.glyph-open-file:before{content:"\\eb7c"}.glyph-operate-plant-filled:before{content:"\\eb7d"}.glyph-operate-plant:before{content:"\\eb7e"}.glyph-optimize:before{content:"\\eb7f"}.glyph-p-and-i-symbols:before{content:"\\eb80"}.glyph-p-i-diagram:before{content:"\\eb81"}.glyph-pan:before{content:"\\eb82"}.glyph-paste:before{content:"\\eb83"}.glyph-pause:before{content:"\\eb84"}.glyph-pc-tower-filled:before{content:"\\eb85"}.glyph-pc-tower:before{content:"\\eb86"}.glyph-pdf-document:before{content:"\\eb87"}.glyph-pen-filled:before{content:"\\eb88"}.glyph-pen:before{content:"\\eb89"}.glyph-phone-filled:before{content:"\\eb8a"}.glyph-phone:before{content:"\\eb8b"}.glyph-photo-camera-add:before{content:"\\eb8c"}.glyph-photo-camera-filled:before{content:"\\eb8d"}.glyph-photo-camera:before{content:"\\eb8e"}.glyph-photo-cameras:before{content:"\\eb8f"}.glyph-piechart-filled:before{content:"\\eb90"}.glyph-piechart:before{content:"\\eb91"}.glyph-pin-filled:before{content:"\\eb92"}.glyph-pin:before{content:"\\eb93"}.glyph-plant-filled:before{content:"\\eb94"}.glyph-plant-handbook-filled:before{content:"\\eb95"}.glyph-plant-handbook:before{content:"\\eb96"}.glyph-plant-outline:before{content:"\\eb97"}.glyph-plant-security:before{content:"\\eb98"}.glyph-plant-settings-filled:before{content:"\\eb99"}.glyph-plant-settings:before{content:"\\eb9a"}.glyph-plant-user-filled:before{content:"\\eb9b"}.glyph-plant-user:before{content:"\\eb9c"}.glyph-plant:before{content:"\\eb9d"}.glyph-plants-filled:before{content:"\\eb9e"}.glyph-plants:before{content:"\\eb9f"}.glyph-play-filled:before{content:"\\eba0"}.glyph-play-pause-filled:before{content:"\\eba1"}.glyph-play-pause:before{content:"\\eba2"}.glyph-play-stepwise-filled:before{content:"\\eba3"}.glyph-play-stepwise:before{content:"\\eba4"}.glyph-play:before{content:"\\eba5"}.glyph-plus-minus-times-divide:before{content:"\\eba6"}.glyph-plus:before{content:"\\eba7"}.glyph-point-up-filled:before{content:"\\eba8"}.glyph-point-up:before{content:"\\eba9"}.glyph-polar-plot:before{content:"\\ebaa"}.glyph-polygon-filled:before{content:"\\ebab"}.glyph-polygon-line:before{content:"\\ebac"}.glyph-polygon:before{content:"\\ebad"}.glyph-ppt-document:before{content:"\\ebae"}.glyph-print-filled:before{content:"\\ebaf"}.glyph-print:before{content:"\\ebb0"}.glyph-prio-high:before{content:"\\ebb1"}.glyph-prio-low:before{content:"\\ebb2"}.glyph-prio-middle:before{content:"\\ebb3"}.glyph-product-catalog:before{content:"\\ebb4"}.glyph-product-management:before{content:"\\ebb5"}.glyph-product:before{content:"\\ebb6"}.glyph-project-configuration:before{content:"\\ebb7"}.glyph-project-new:before{content:"\\ebb8"}.glyph-project-scenarios:before{content:"\\ebb9"}.glyph-project:before{content:"\\ebba"}.glyph-protocol:before{content:"\\ebbb"}.glyph-publish-document:before{content:"\\ebbc"}.glyph-publish:before{content:"\\ebbd"}.glyph-qr-code:before{content:"\\ebbe"}.glyph-quality-report:before{content:"\\ebbf"}.glyph-question-filled:before{content:"\\ebc0"}.glyph-question:before{content:"\\ebc1"}.glyph-radarchart:before{content:"\\ebc2"}.glyph-radio-waves-off:before{content:"\\ebc3"}.glyph-radio-waves:before{content:"\\ebc4"}.glyph-random-filled:before{content:"\\ebc5"}.glyph-random:before{content:"\\ebc6"}.glyph-reboot:before{content:"\\ebc7"}.glyph-rectangle-filled:before{content:"\\ebc8"}.glyph-rectangle:before{content:"\\ebc9"}.glyph-redo:before{content:"\\ebca"}.glyph-reference:before{content:"\\ebcb"}.glyph-refresh-cancelled:before{content:"\\ebcc"}.glyph-refresh:before{content:"\\ebcd"}.glyph-reload:before{content:"\\ebce"}.glyph-remove-eye-filled:before{content:"\\ebcf"}.glyph-remove-eye:before{content:"\\ebd0"}.glyph-rename:before{content:"\\ebd1"}.glyph-replace:before{content:"\\ebd2"}.glyph-report-barchart:before{content:"\\ebd3"}.glyph-report-linechart:before{content:"\\ebd4"}.glyph-report-text:before{content:"\\ebd5"}.glyph-reset:before{content:"\\ebd6"}.glyph-restore-backup-filled:before{content:"\\ebd7"}.glyph-restore-backup-pc:before{content:"\\ebd8"}.glyph-restore-backup:before{content:"\\ebd9"}.glyph-rhomb-filled:before{content:"\\ebda"}.glyph-rhomb:before{content:"\\ebdb"}.glyph-road-filled:before{content:"\\ebdc"}.glyph-road:before{content:"\\ebdd"}.glyph-rocket-filled:before{content:"\\ebde"}.glyph-rocket:before{content:"\\ebdf"}.glyph-route-target:before{content:"\\ebe0"}.glyph-route:before{content:"\\ebe1"}.glyph-scatterplot:before{content:"\\ebe2"}.glyph-scheduler-filled:before{content:"\\ebe3"}.glyph-scheduler:before{content:"\\ebe4"}.glyph-screen-filled:before{content:"\\ebe5"}.glyph-screen:before{content:"\\ebe6"}.glyph-screenshot-filled:before{content:"\\ebe7"}.glyph-screenshot:before{content:"\\ebe8"}.glyph-script-add:before{content:"\\ebe9"}.glyph-script:before{content:"\\ebea"}.glyph-scripts:before{content:"\\ebeb"}.glyph-search:before{content:"\\ebec"}.glyph-share-filled:before{content:"\\ebed"}.glyph-share:before{content:"\\ebee"}.glyph-shopping-cart-filled:before{content:"\\ebef"}.glyph-shopping-cart:before{content:"\\ebf0"}.glyph-shout-filled:before{content:"\\ebf1"}.glyph-shout:before{content:"\\ebf2"}.glyph-sign-language:before{content:"\\ebf3"}.glyph-signal-strength-0:before{content:"\\ebf4"}.glyph-signal-strength-1:before{content:"\\ebf5"}.glyph-signal-strength-2:before{content:"\\ebf6"}.glyph-signal-strength-3:before{content:"\\ebf7"}.glyph-signal-strength-4:before{content:"\\ebf8"}.glyph-signal-strength-5:before{content:"\\ebf9"}.glyph-signal-strength-6:before{content:"\\ebfa"}.glyph-signal-strength-7:before{content:"\\ebfb"}.glyph-signal-strength-8:before{content:"\\ebfc"}.glyph-simit-component:before{content:"\\ebfd"}.glyph-simit-macro-component-editor:before{content:"\\ebfe"}.glyph-simit-macro:before{content:"\\ebff"}.glyph-single-check:before{content:"\\ec00"}.glyph-skip-back-filled:before{content:"\\ec01"}.glyph-skip-back:before{content:"\\ec02"}.glyph-skip-filled:before{content:"\\ec03"}.glyph-skip:before{content:"\\ec04"}.glyph-snowflake:before{content:"\\ec05"}.glyph-sort-ascending:before{content:"\\ec06"}.glyph-sort-descending:before{content:"\\ec07"}.glyph-sort:before{content:"\\ec08"}.glyph-sound-loud-filled:before{content:"\\ec09"}.glyph-sound-loud:before{content:"\\ec0a"}.glyph-sound-mute-filled:before{content:"\\ec0b"}.glyph-sound-mute:before{content:"\\ec0c"}.glyph-sound-off-filled:before{content:"\\ec0d"}.glyph-sound-off:before{content:"\\ec0e"}.glyph-sound-quiet-filled:before{content:"\\ec0f"}.glyph-sound-quiet:before{content:"\\ec10"}.glyph-spatial:before{content:"\\ec11"}.glyph-split-horizontally:before{content:"\\ec12"}.glyph-split-vertically:before{content:"\\ec13"}.glyph-standby:before{content:"\\ec14"}.glyph-star-add-filled:before{content:"\\ec15"}.glyph-star-add:before{content:"\\ec16"}.glyph-star-cancelled-filled:before{content:"\\ec17"}.glyph-star-cancelled:before{content:"\\ec18"}.glyph-star-filled:before{content:"\\ec19"}.glyph-star-list-filled:before{content:"\\ec1a"}.glyph-star-list:before{content:"\\ec1b"}.glyph-star:before{content:"\\ec1c"}.glyph-start-data-analysis:before{content:"\\ec1d"}.glyph-steering-user-filled:before{content:"\\ec1e"}.glyph-steering-user:before{content:"\\ec1f"}.glyph-steering:before{content:"\\ec20"}.glyph-stethoscope:before{content:"\\ec21"}.glyph-stop-filled:before{content:"\\ec22"}.glyph-stop:before{content:"\\ec23"}.glyph-success-filled:before{content:"\\ec24"}.glyph-success:before{content:"\\ec25"}.glyph-sun-filled:before{content:"\\ec26"}.glyph-sun:before{content:"\\ec27"}.glyph-support:before{content:"\\ec28"}.glyph-surveillance-filled:before{content:"\\ec29"}.glyph-surveillance:before{content:"\\ec2a"}.glyph-svg-document:before{content:"\\ec2b"}.glyph-swap-left-right:before{content:"\\ec2c"}.glyph-switch-slider:before{content:"\\ec2d"}.glyph-table-columns:before{content:"\\ec2e"}.glyph-table-rows:before{content:"\\ec2f"}.glyph-table-settings:before{content:"\\ec30"}.glyph-table:before{content:"\\ec31"}.glyph-tag-filled:before{content:"\\ec32"}.glyph-tag-plus-filled:before{content:"\\ec33"}.glyph-tag-plus:before{content:"\\ec34"}.glyph-tag:before{content:"\\ec35"}.glyph-tasks-all:before{content:"\\ec36"}.glyph-tasks-done:before{content:"\\ec37"}.glyph-tasks-open:before{content:"\\ec38"}.glyph-text-circle-rectangle-filled:before{content:"\\ec39"}.glyph-text-circle-rectangle:before{content:"\\ec3a"}.glyph-text-document:before{content:"\\ec3b"}.glyph-text:before{content:"\\ec3c"}.glyph-threshold-cancelled:before{content:"\\ec3d"}.glyph-threshold-off:before{content:"\\ec3e"}.glyph-threshold-on:before{content:"\\ec3f"}.glyph-to-be-published:before{content:"\\ec40"}.glyph-to-search:before{content:"\\ec41"}.glyph-topic-filled:before{content:"\\ec42"}.glyph-topic:before{content:"\\ec43"}.glyph-touch-filled:before{content:"\\ec44"}.glyph-touch:before{content:"\\ec45"}.glyph-trashcan-filled:before{content:"\\ec46"}.glyph-trashcan:before{content:"\\ec47"}.glyph-tree:before{content:"\\ec48"}.glyph-trend:before{content:"\\ec49"}.glyph-triangle-filled:before{content:"\\ec4a"}.glyph-triangle:before{content:"\\ec4b"}.glyph-truck-filled:before{content:"\\ec4c"}.glyph-truck:before{content:"\\ec4d"}.glyph-tulip-filled:before{content:"\\ec4e"}.glyph-tulip:before{content:"\\ec4f"}.glyph-txt-document:before{content:"\\ec50"}.glyph-undo:before{content:"\\ec51"}.glyph-ungroup:before{content:"\\ec52"}.glyph-unlock-filled:before{content:"\\ec53"}.glyph-unlock-plant-filled:before{content:"\\ec54"}.glyph-unlock-plant:before{content:"\\ec55"}.glyph-unlock:before{content:"\\ec56"}.glyph-upload-document-note:before{content:"\\ec57"}.glyph-upload-success:before{content:"\\ec58"}.glyph-upload:before{content:"\\ec59"}.glyph-upper-limit:before{content:"\\ec5a"}.glyph-user-check-filled:before{content:"\\ec5b"}.glyph-user-check:before{content:"\\ec5c"}.glyph-user-filled:before{content:"\\ec5d"}.glyph-user-management-filled:before{content:"\\ec5e"}.glyph-user-management:before{content:"\\ec5f"}.glyph-user-profile-filled:before{content:"\\ec60"}.glyph-user-profile:before{content:"\\ec61"}.glyph-user-settings-filled:before{content:"\\ec62"}.glyph-user-settings:before{content:"\\ec63"}.glyph-user:before{content:"\\ec64"}.glyph-validate:before{content:"\\ec65"}.glyph-vdi-folder:before{content:"\\ec66"}.glyph-version-history:before{content:"\\ec67"}.glyph-video-file-filled:before{content:"\\ec68"}.glyph-video-file:before{content:"\\ec69"}.glyph-warning-filled:before{content:"\\ec6a"}.glyph-warning-rhomb-filled:before{content:"\\ec6b"}.glyph-warning-rhomb:before{content:"\\ec6c"}.glyph-warning:before{content:"\\ec6d"}.glyph-water-bathing:before{content:"\\ec6e"}.glyph-water-fish:before{content:"\\ec6f"}.glyph-water-sunbathing:before{content:"\\ec70"}.glyph-waveform:before{content:"\\ec71"}.glyph-webcam-filled:before{content:"\\ec72"}.glyph-webcam:before{content:"\\ec73"}.glyph-wlan-off:before{content:"\\ec74"}.glyph-wlan-strength-0:before{content:"\\ec75"}.glyph-wlan-strength-1:before{content:"\\ec76"}.glyph-wlan-strength-2:before{content:"\\ec77"}.glyph-wlan-strength-3:before{content:"\\ec78"}.glyph-work-case-filled:before{content:"\\ec79"}.glyph-work-case:before{content:"\\ec7a"}.glyph-x-axis-settings:before{content:"\\ec7b"}.glyph-xls-document:before{content:"\\ec7c"}.glyph-xml-document:before{content:"\\ec7d"}.glyph-y-axis-settings:before{content:"\\ec7e"}.glyph-youtube-filled:before{content:"\\ec7f"}.glyph-youtube:before{content:"\\ec80"}.glyph-zoom-in:before{content:"\\ec81"}.glyph-zoom-out:before{content:"\\ec82"}.glyph-zoom-selection:before{content:"\\ec83"}:host{display:inline-flex;height:1.5rem;width:1.5rem}:host i{color:inherit;transition:color 150ms}:host .svg-container{display:block;position:relative;width:100%;height:100%}:host .svg-container>svg{height:1.5rem;width:1.5rem}:host .svg-container>svg [fill]{fill:var(--theme-color-std-text)}:host .skeleton-box{display:inline-block;height:1em;position:relative;overflow:hidden;background-color:#dddbdd}:host .skeleton-box::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));animation:shimmer 2s infinite;content:""}@keyframes shimmer{100%{transform:translateX(100%)}}:host(.size-12){height:0.75rem;width:0.75rem}:host(.size-12) .svg-container>svg{height:0.75rem;width:0.75rem}:host(.size-16){height:1rem;width:1rem}:host(.size-16) .svg-container>svg{height:1rem;width:1rem}:host(.size-32){height:2rem;width:2rem}:host(.size-32) .svg-container>svg{height:2rem;width:2rem}';const h=class{constructor(t){e(this,t);this.size=undefined;this.color=undefined;this.name=undefined;this.src=undefined;this.svgContent=undefined}connectedCallback(){this.loadIconContent()}async loadIconContent(){this.svgContent=await b(this)}render(){const e={};if(this.color){e["color"]=`var(--theme-${this.color})`}if(this.name&&!this.svgContent){const n=this.name;return t(o,{style:e,class:{["size-12"]:this.size==="12",["size-16"]:this.size==="16",["size-24"]:this.size==="24",["size-32"]:this.size==="32"}},t("i",{class:{glyph:true,[`glyph-${n}`]:true,"glyph-12":this.size==="12","glyph-16":this.size==="16","glyph-24":this.size==="24","glyph-32":this.size==="32"}}))}return t(o,{style:e,class:{["size-12"]:this.size==="12",["size-16"]:this.size==="16",["size-24"]:this.size==="24",["size-32"]:this.size==="32"}},this.svgContent?t("div",{class:"svg-container",innerHTML:this.svgContent}):t("span",{class:"skeleton-box",style:{width:"100%",height:"100%"}}))}static get watchers(){return{src:["loadIconContent"],name:["loadIconContent"]}}};h.style=f;export{h as I};
+//# sourceMappingURL=p-37738e42.js.map

package/dist/ix-icons/p-37738e42.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isSvgDataUrl","url","startsWith","parser","parseSVGDataContent","content","window","console","warn","svgDocument","parseFromString","svgElement","querySelector","Error","outerHTML","async","fetchSVG","response","fetch","responseText","text","ok","error","resolveIcon","icon","src","name","iconCss","Icon","connectedCallback","this","loadIconContent","svgContent","render","style","color","iconName","h","Host","class","size","glyph","innerHTML","width","height"],"sources":["./src/components/icon/resolveIcon.ts","./src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["/*\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 { Icon } from './icon';\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\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('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    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return parseSVGDataContent(responseText);\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (!src) {\n    return '';\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\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@import './generated/ix-icons';\n\n:host {\n  display: inline-flex;\n  height: 1.5rem;\n  width: 1.5rem;\n\n  i {\n    color: inherit;\n    transition: color 150ms;\n  }\n\n  .svg-container {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .svg-container > svg {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .svg-container > svg [fill] {\n    fill: var(--theme-color-std-text);\n  }\n\n  .skeleton-box {\n    display: inline-block;\n    height: 1em;\n    position: relative;\n    overflow: hidden;\n    background-color: #dddbdd;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transform: translateX(-100%);\n      background-image: linear-gradient(90deg, rgba(#fff, 0) 0, rgba(#fff, 0.2) 20%, rgba(#fff, 0.5) 60%, rgba(#fff, 0));\n      animation: shimmer 2s infinite;\n      content: '';\n    }\n\n    @keyframes shimmer {\n      100% {\n        transform: translateX(100%);\n      }\n    }\n  }\n}\n\n:host(.size-12) {\n  height: 0.75rem;\n  width: 0.75rem;\n\n  .svg-container > svg {\n    height: 0.75rem;\n    width: 0.75rem;\n  }\n}\n\n:host(.size-16) {\n  height: 1rem;\n  width: 1rem;\n\n  .svg-container > svg {\n    height: 1rem;\n    width: 1rem;\n  }\n}\n\n:host(.size-32) {\n  height: 2rem;\n  width: 2rem;\n\n  .svg-container > svg {\n    height: 2rem;\n    width: 2rem;\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\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\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({ reflect: true }) name: string;\n\n  /**\n   * Path to load external SVG. All color properties\n   * will be overwritten by `--theme-color-std-text`\n   *\n   * https://ix.siemens.io/docs/theming/colors\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAUO,MAAMA,EAAgBC,IAC3B,IAAKA,EAAK,CACR,OAAO,K,CAGT,UAAWA,IAAQ,SAAU,CAC3B,OAAO,K,CAGT,OAAOA,EAAIC,WAAW,qBAAqB,EAG7C,IAAIC,EAAS,KAEb,SAASC,EAAoBC,GAC3B,UAAWC,OAAO,eAAiB,YAAa,CAC9CC,QAAQC,KAAK,4CACb,M,CAGF,GAAIL,IAAW,KAAM,CACnBA,EAAS,IAAIG,OAAO,Y,CAGtB,MAAMG,EAAcN,EAAOO,gBAAgBL,EAAS,aACpD,MAAMM,EAAaF,EAAYG,cAAc,OAE7C,IAAKD,EAAY,CACf,MAAME,MAAM,6B,CAGd,OAAOF,EAAWG,SACpB,CAEAC,eAAeC,EAASf,GACtB,MAAMgB,QAAiBC,MAAMjB,GAC7B,MAAMkB,QAAqBF,EAASG,OAEpC,IAAKH,EAASI,GAAI,CAChBd,QAAQe,MAAMH,GACd,MAAO,E,CAGT,OAAOf,EAAoBe,EAC7B,CAEOJ,eAAeQ,EAAYC,GAChC,MAAMC,IAAEA,EAAGC,KAAEA,GAASF,EAEtB,GAAIE,EAAM,CACR,GAAI1B,EAAa0B,GAAO,CACtB,OAAOtB,EAAoBsB,E,CAI7B,M,CAGF,IAAKD,EAAK,CACR,MAAO,E,CAGT,GAAIzB,EAAayB,GAAM,CACrB,OAAOrB,EAAoBqB,E,CAG7B,OAAOT,EAASS,EAClB,CC7EA,MAAME,EAAU,s36B,MCiBHC,EAAI,M,mIAsCfC,oBACEC,KAAKC,iB,CAKPhB,wBACEe,KAAKE,iBAAmBT,EAAYO,K,CAGtCG,SACE,MAAMC,EAEF,GAEJ,GAAIJ,KAAKK,MAAO,CACdD,EAAM,SAAW,eAAeJ,KAAKK,Q,CAGvC,GAAIL,KAAKJ,OAASI,KAAKE,WAAY,CACjC,MAAMI,EAAWN,KAAKJ,KACtB,OACEW,EAACC,EAAI,CACHJ,MAAOA,EACPK,MAAO,CACL,CAAC,WAAYT,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,OAG7BH,EAAA,KACEE,MAAO,CACLE,MAAS,KACT,CAAC,SAASL,KAAa,KACvB,WAAYN,KAAKU,OAAS,KAC1B,WAAYV,KAAKU,OAAS,KAC1B,WAAYV,KAAKU,OAAS,KAC1B,WAAYV,KAAKU,OAAS,Q,CAOpC,OACEH,EAACC,EAAI,CACHJ,MAAOA,EACPK,MAAO,CACL,CAAC,WAAYT,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,OAG5BV,KAAKE,WACJK,EAAA,OAAKE,MAAO,gBAAiBG,UAAWZ,KAAKE,aAE7CK,EAAA,QACEE,MAAM,eACNL,MAAO,CACLS,MAAO,OACPC,OAAQ,U"}

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

@@ -8,11 +8,24 @@ export declare class Icon {
    */
   color: string;
   /**
-   * Use one of our defined icon names e.g. `copy`.
+   * 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;
   /**
-   * Path to the svg
+   * Path to load external SVG. All color properties
+   * will be overwritten by `--theme-color-std-text`
+   *
+   * https://ix.siemens.io/docs/theming/colors
    *
    * @internal
    */

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

@@ -1,3 +1,3 @@
 import { Icon } from './icon';
 export declare const isSvgDataUrl: (url: string) => boolean;
-export declare function resolveIcon(icon: Icon): Promise<any>;
+export declare function resolveIcon(icon: Icon): Promise<string>;

package/dist/types/components.d.ts

@@ -12,7 +12,7 @@ export namespace Components {
          */
         "color": string;
         /**
-          * Use one of our defined icon names e.g. `copy`.
+          * 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;
         /**
@@ -20,7 +20,7 @@ export namespace Components {
          */
         "size": '12' | '16' | '24' | '32';
         /**
-          * Path to the svg
+          * Path to load external SVG. All color properties will be overwritten by `--theme-color-std-text`  https://ix.siemens.io/docs/theming/colors
          */
         "src"?: string;
     }
@@ -43,7 +43,7 @@ declare namespace LocalJSX {
          */
         "color"?: string;
         /**
-          * Use one of our defined icon names e.g. `copy`.
+          * 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;
         /**

package/icons/index.d.ts

@@ -1,4 +1,4 @@
-/* Siemens iX Icons (1.1.0) */
+/* Siemens iX Icons (1.1.2) */
 
 export declare var aboutFilled: string;
 export declare var about: string;
@@ -219,6 +219,7 @@ export declare var errorFilled: string;
 export declare var error: string;
 export declare var exploreFilled: string;
 export declare var explore: string;
+export declare var _export: string;
 export declare var eyeCancelledFilled: string;
 export declare var eyeCancelled: string;
 export declare var eyeFilled: string;
@@ -279,6 +280,7 @@ export declare var home: string;
 export declare var hourglass: string;
 export declare var imageFilled: string;
 export declare var image: string;
+export declare var _import: string;
 export declare var infoFeed: string;
 export declare var infoFilled: string;
 export declare var info: string;

package/icons/index.js

@@ -1,4 +1,4 @@
-/* Siemens iX Icons (1.1.0) */
+/* Siemens iX Icons (1.1.2) */
 
 exports.aboutFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>about-filled</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='drop' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C331.154987,3.55271368e-14 426.666667,95.51168 426.666667,213.333333 C426.666667,331.153707 331.154987,426.666667 213.333333,426.666667 C95.51296,426.666667 3.55271368e-14,331.153707 3.55271368e-14,213.333333 C3.55271368e-14,95.51168 95.51296,3.55271368e-14 213.333333,3.55271368e-14 Z M234.713387,192 L192.04672,192 L192.04672,320 L234.713387,320 L234.713387,192 Z M213.55008,101.333333 C197.99616,101.333333 186.713387,112.5536 186.713387,127.704107 C186.713387,143.46752 197.698773,154.666667 213.55008,154.666667 C228.785067,154.666667 240.04672,143.46752 240.04672,128 C240.04672,112.5536 228.785067,101.333333 213.55008,101.333333 Z' id='Shape'/></g></g></svg>"
 exports.about = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>about</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='about-white' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51168 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.154987,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51168 331.154987,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.44,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.44,384 213.333333,384 Z M240.04672,128 C240.04672,143.46752 228.785067,154.666667 213.55008,154.666667 C197.698773,154.666667 186.713387,143.46752 186.713387,127.704107 C186.713387,112.5536 197.99616,101.333333 213.55008,101.333333 C228.785067,101.333333 240.04672,112.5536 240.04672,128 Z M192.04672,192 L234.713387,192 L234.713387,320 L192.04672,320 L192.04672,192 Z' id='Shape'/></g></g></svg>"
@@ -219,6 +219,7 @@ exports.errorFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF
 exports.error = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>error</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C331.136,3.55271368e-14 426.666667,95.5306667 426.666667,213.333333 C426.666667,331.136 331.136,426.666667 213.333333,426.666667 C95.5306667,426.666667 3.55271368e-14,331.136 3.55271368e-14,213.333333 C3.55271368e-14,95.5306667 95.5306667,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,42.6666667 C119.232,42.6666667 42.6666667,119.232 42.6666667,213.333333 C42.6666667,307.434667 119.232,384 213.333333,384 C307.434667,384 384,307.434667 384,213.333333 C384,119.232 307.434667,42.6666667 213.333333,42.6666667 Z M262.250667,134.250667 L292.416,164.416 L243.498667,213.333333 L292.416,262.250667 L262.250667,292.416 L213.333333,243.498667 L164.416,292.416 L134.250667,262.250667 L183.168,213.333333 L134.250667,164.416 L164.416,134.250667 L213.333333,183.168 L262.250667,134.250667 Z' id='error'/></g></g></svg>"
 exports.exploreFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>explore-filled</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='icon' transform='translate(42.666667, 42.666667)'><path d='M250.929,70.72 L314.314,232.128 L283.413333,241.216 L346.66944,409.38432 L306.71936,424.365653 L242.368,253.290667 L213.44,261.781333 L153.778347,424.38016 L114.561493,407.572907 L162.56,276.757333 L37.7361067,313.4784 L-7.10542736e-15,238.005973 L250.929,70.72 Z M357.009067,0 L440.57856,194.9952 L355.407,220.043 L287.257,46.501 L357.009067,0 Z' id='Combined-Shape'/></g></g></svg>"
 exports.explore = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>explore</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='icon' transform='translate(42.666667, 42.666667)'><path d='M337.988693,63.9552 L302.978347,87.29856 L340.096,180.032 L382.404693,167.613867 L337.988693,63.9552 Z M266.709333,111.445333 L55.0020267,252.605867 L59.9300267,262.461867 L298.965333,192.128 L266.709333,111.445333 Z M357.009067,0 L440.57856,194.9952 L283.413333,241.216 L346.66944,409.38432 L306.71936,424.365653 L242.368,253.290667 L213.44,261.781333 L153.778347,424.38016 L114.561493,407.572907 L162.56,276.757333 L37.7361067,313.4784 L-2.13162821e-14,238.005973 L357.009067,0 Z' id='Shape'/></g></g></svg>"
+exports._export = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>export</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='Combined-Shape' transform='translate(64.000000, 48.915055)'><path d='M170.666667,36.418278 L170.666667,79.0849447 L42.6666667,79.0849447 L42.6666667,356.418278 L341.333333,356.418278 L341.333333,228.418278 L384,228.418278 L384,399.084945 L0,399.084945 L0,36.418278 L170.666667,36.418278 Z M313.751611,0 L414.169889,100.418278 L313.751611,200.836556 L283.581722,170.666667 L332.485,121.751 L277.333333,121.751611 C243.249474,121.751611 215.388568,148.395237 213.441977,181.991125 L213.333333,185.751611 L213.333333,292.418278 L170.666667,292.418278 L170.666667,185.751611 C170.666667,128.391511 215.942543,81.6061582 272.706355,79.1834943 L277.333333,79.0849447 L332.484,79.084 L283.581722,30.1698893 L313.751611,0 Z'/></g></g></svg>"
 exports.eyeCancelledFilled = "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='M47.0849493,2.84217094e-14 L409.751616,362.666662 L379.581717,392.836561 L320.374817,333.628896 C291.246618,353.329494 255.728838,367.084945 213.333333,367.084945 C64,367.084945 7.10542736e-15,196.418278 7.10542736e-15,196.418278 C7.10542736e-15,196.418278 22.8621027,135.452671 73.141042,86.3971998 L16.9150553,30.169894 L47.0849493,2.84217094e-14 Z M213.333333,25.7516113 C362.666667,25.7516113 426.666667,196.418278 426.666667,196.418278 C426.666667,196.418278 412.428071,234.387867 381.712212,274.508373 L285.871605,178.644581 C279.289844,151.690235 258.075932,130.47205 231.123994,123.884151 L145.662385,38.4000762 C165.913597,30.494948 188.437631,25.7516113 213.333333,25.7516113 Z M138.666667,196.418278 C138.666667,237.655539 172.096072,271.084945 213.333333,271.084945 C226.192194,271.084945 238.291853,267.834416 248.85545,262.110219 L215.113754,228.369585 C214.524387,228.401906 213.930772,228.418278 213.333333,228.418278 C195.660221,228.418278 181.333333,214.09139 181.333333,196.418278 C181.333333,195.820501 181.349724,195.226552 181.382081,194.636857 L147.641392,160.896162 C141.917195,171.459758 138.666667,183.559417 138.666667,196.418278 Z' transform='translate(42.667 59.582)'/></svg>"
 exports.eyeCancelled = "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='M47.0849493,2.84217094e-14 L185.740632,138.655563 C194.095501,134.657276 203.45297,132.418278 213.333333,132.418278 C248.679253,132.418278 277.333333,161.072358 277.333333,196.418278 C277.333333,206.299034 275.094157,215.656855 271.095572,224.011976 L409.751616,362.666662 L379.581717,392.836561 L320.374817,333.628896 C291.246618,353.329494 255.728838,367.084945 213.333333,367.084945 C64,367.084945 7.10542736e-15,196.418278 7.10542736e-15,196.418278 C7.10542736e-15,196.418278 22.862032,135.452859 73.1408088,86.3974274 L16.9150553,30.169894 L47.0849493,2.84217094e-14 Z M103.440016,116.694904 C74.7091717,144.512844 55.9626236,177.598744 46.7136,196.424891 C64.7370667,233.114811 119.071573,324.418278 213.333333,324.418278 C242.440012,324.418278 267.739844,315.712374 289.339919,302.595012 L240.926035,254.180993 C232.571166,258.17928 223.213696,260.418278 213.333333,260.418278 C177.987413,260.418278 149.333333,231.764198 149.333333,196.418278 C149.333333,186.537915 151.572331,177.180445 155.570618,168.825577 Z M213.333333,25.7516113 C362.666667,25.7516113 426.666667,196.418278 426.666667,196.418278 C426.666667,196.418278 412.428071,234.387867 381.712212,274.508373 L351.151213,243.941206 C364.581948,225.697449 374.142733,208.239347 379.954347,196.410385 C361.9296,159.721745 307.595093,68.418278 213.333333,68.418278 C201.495833,68.418278 190.287983,69.858232 179.702584,72.449263 L145.662385,38.4000762 C165.913597,30.494948 188.437631,25.7516113 213.333333,25.7516113 Z' transform='translate(42.667 59.582)'/></svg>"
 exports.eyeFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>eye-filled</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='eye' transform='translate(42.666667, 85.333333)'><path d='M213.333333,1.42108547e-14 C362.666667,1.42108547e-14 426.666667,170.666667 426.666667,170.666667 C426.666667,170.666667 362.666667,341.333333 213.333333,341.333333 C64,341.333333 7.10542736e-15,170.666667 7.10542736e-15,170.666667 C7.10542736e-15,170.666667 64,1.42108547e-14 213.333333,1.42108547e-14 Z M213.333333,96 C172.096427,96 138.666667,129.42976 138.666667,170.666667 C138.666667,211.903573 172.096427,245.333333 213.333333,245.333333 C254.57024,245.333333 288,211.903573 288,170.666667 C288,129.42976 254.57024,96 213.333333,96 Z M213.333333,202.666667 C195.688747,202.666667 181.333333,188.311253 181.333333,170.666667 C181.333333,153.02208 195.688747,138.666667 213.333333,138.666667 C230.97792,138.666667 245.333333,153.02208 245.333333,170.666667 C245.333333,188.311253 230.97792,202.666667 213.333333,202.666667 Z' id='Shape'/></g></g></svg>"
@@ -279,6 +280,7 @@ exports.home = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
 exports.hourglass = "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='M256,7.10542736e-15 L256,115.477333 L158.165333,213.333333 L256,311.146667 L256,426.666667 L-2.84217094e-14,426.666667 L-2.84217094e-14,311.146667 L97.8133333,213.333333 L-2.84217094e-14,115.477333 L-2.84217094e-14,7.10542736e-15 L256,7.10542736e-15 Z M128,243.498667 L42.6666667,328.832 L42.6666667,373.333333 L128,320 L213.333333,373.333333 L213.333333,328.832 L128,243.498667 Z M213.333333,42.6666667 L42.6666667,42.6666667 L42.6666667,97.8133333 L72.9030755,128.057301 L183.356249,127.797912 L213.333333,97.8133333 L213.333333,42.6666667 Z' transform='translate(128 42.667)'/></svg>"
 exports.imageFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>image-filled</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='icon' transform='translate(64.000000, 64.000000)'><path d='M384,1.42108547e-14 L384,384 L1.42108547e-14,384 L1.42108547e-14,1.42108547e-14 L384,1.42108547e-14 Z M109.226667,142.933333 L42.666,249.881 L42.666,341.333 L341.333,341.333 L341.333,264.746 L277.333333,200.746667 L211.84,266.24 L109.226667,142.933333 Z M245.333333,85.3333333 C227.660221,85.3333333 213.333333,99.6602213 213.333333,117.333333 C213.333333,135.006445 227.660221,149.333333 245.333333,149.333333 C263.006445,149.333333 277.333333,135.006445 277.333333,117.333333 C277.333333,99.6602213 263.006445,85.3333333 245.333333,85.3333333 Z' id='Combined-Shape'/></g></g></svg>"
 exports.image = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>image</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='icon' transform='translate(64.000000, 64.000000)'><path d='M1.42108547e-14,384 L1.42108547e-14,1.45661261e-11 L384,1.45661261e-11 L384,384 L1.42108547e-14,384 Z M109.226667,185.6 L42.666,292.548 L42.666,341.333 L341.333,341.333 L341.333,307.413 L277.333333,243.413333 L211.84,308.906667 L109.226667,185.6 Z M341.333,42.666 L42.666,42.666 L42.666,211.877 L104.106667,113.066667 L214.826667,245.76 L277.333333,183.253333 L341.333,247.253 L341.333,42.666 Z M245.333333,85.3333333 C263.006445,85.3333333 277.333333,99.6602213 277.333333,117.333333 C277.333333,135.006445 263.006445,149.333333 245.333333,149.333333 C227.660221,149.333333 213.333333,135.006445 213.333333,117.333333 C213.333333,99.6602213 227.660221,85.3333333 245.333333,85.3333333 Z' id='Combined-Shape'/></g></g></svg>"
+exports._import = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>import</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='Combined-Shape' transform='translate(42.666667, 85.333333)'><path d='M405.333333,-1.42108547e-14 L405.333333,362.666667 L21.3333333,362.666667 L21.3333333,85.3333333 L64,85.3333333 L64,320 L362.666667,320 L362.666667,42.6666667 L277.333333,42.6666667 L277.333333,-1.42108547e-14 L405.333333,-1.42108547e-14 Z M128,-1.42108547e-14 C185.3601,-1.42108547e-14 232.145453,45.2758765 234.568117,102.039688 L234.666667,106.666667 L234.666,183.152 L283.581722,134.248389 L313.751611,164.418278 L213.333333,264.836556 L112.915055,164.418278 L143.084945,134.248389 L192,183.152 L192,106.666667 C192,72.5828078 165.356374,44.7219012 131.760486,42.7753108 L128,42.6666667 L7.10542736e-15,42.6666667 L7.10542736e-15,-1.42108547e-14 L128,-1.42108547e-14 Z'/></g></g></svg>"
 exports.infoFeed = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>info-feed</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='drop' transform='translate(64.000000, 85.333333)'><path d='M128.021333,42.688 L384.042667,42.688 L384.042667,0.0213333333 L128.021333,0.0213333333 L128.021333,42.688 Z M0.0426666667,85.3546667 L85.376,85.3546667 L85.376,1.42108547e-14 L0.0426666667,1.42108547e-14 L0.0426666667,85.3546667 Z M128.021333,128.021333 L384.042667,128.021333 L384.042667,85.3546667 L128.021333,85.3546667 L128.021333,128.021333 Z M298.688,298.688 L384.042667,298.688 L384.042667,213.333333 L298.688,213.333333 L298.688,298.688 Z M-1.42108547e-14,256.021333 L256,256.021333 L256,213.333333 L-1.42108547e-14,213.333333 L-1.42108547e-14,256.021333 Z M0.0426666667,341.354667 L256.042667,341.354667 L256.042667,298.688 L0.0426666667,298.688 L0.0426666667,341.354667 Z' id='Combined-Shape'/></g></g></svg>"
 exports.infoFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>info-filled</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51168 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.154987,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51168 331.154987,3.55271368e-14 213.333333,3.55271368e-14 Z M240.04672,128 C240.04672,143.46752 228.785067,154.666667 213.55008,154.666667 C197.698773,154.666667 186.713387,143.46752 186.713387,127.704107 C186.713387,112.5536 197.99616,101.333333 213.55008,101.333333 C228.785067,101.333333 240.04672,112.5536 240.04672,128 Z M192.04672,192 L234.713387,192 L234.713387,320 L192.04672,320 L192.04672,192 Z' id='Shape'/></g></g></svg>"
 exports.info = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>info</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51168 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.154987,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51168 331.154987,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.44,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.44,384 213.333333,384 Z M240.04672,128 C240.04672,143.46752 228.785067,154.666667 213.55008,154.666667 C197.698773,154.666667 186.713387,143.46752 186.713387,127.704107 C186.713387,112.5536 197.99616,101.333333 213.55008,101.333333 C228.785067,101.333333 240.04672,112.5536 240.04672,128 Z M192.04672,192 L234.713387,192 L234.713387,320 L192.04672,320 L192.04672,192 Z' id='Shape'/></g></g></svg>"

package/icons/index.mjs

@@ -1,4 +1,4 @@
-/* Siemens iX Icons (1.1.0) */
+/* Siemens iX Icons (1.1.2) */
 
 export const aboutFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>about-filled</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='drop' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C331.154987,3.55271368e-14 426.666667,95.51168 426.666667,213.333333 C426.666667,331.153707 331.154987,426.666667 213.333333,426.666667 C95.51296,426.666667 3.55271368e-14,331.153707 3.55271368e-14,213.333333 C3.55271368e-14,95.51168 95.51296,3.55271368e-14 213.333333,3.55271368e-14 Z M234.713387,192 L192.04672,192 L192.04672,320 L234.713387,320 L234.713387,192 Z M213.55008,101.333333 C197.99616,101.333333 186.713387,112.5536 186.713387,127.704107 C186.713387,143.46752 197.698773,154.666667 213.55008,154.666667 C228.785067,154.666667 240.04672,143.46752 240.04672,128 C240.04672,112.5536 228.785067,101.333333 213.55008,101.333333 Z' id='Shape'/></g></g></svg>"
 export const about = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>about</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='about-white' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51168 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.154987,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51168 331.154987,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.44,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.44,384 213.333333,384 Z M240.04672,128 C240.04672,143.46752 228.785067,154.666667 213.55008,154.666667 C197.698773,154.666667 186.713387,143.46752 186.713387,127.704107 C186.713387,112.5536 197.99616,101.333333 213.55008,101.333333 C228.785067,101.333333 240.04672,112.5536 240.04672,128 Z M192.04672,192 L234.713387,192 L234.713387,320 L192.04672,320 L192.04672,192 Z' id='Shape'/></g></g></svg>"
@@ -219,6 +219,7 @@ export const errorFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding
 export const error = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>error</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C331.136,3.55271368e-14 426.666667,95.5306667 426.666667,213.333333 C426.666667,331.136 331.136,426.666667 213.333333,426.666667 C95.5306667,426.666667 3.55271368e-14,331.136 3.55271368e-14,213.333333 C3.55271368e-14,95.5306667 95.5306667,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,42.6666667 C119.232,42.6666667 42.6666667,119.232 42.6666667,213.333333 C42.6666667,307.434667 119.232,384 213.333333,384 C307.434667,384 384,307.434667 384,213.333333 C384,119.232 307.434667,42.6666667 213.333333,42.6666667 Z M262.250667,134.250667 L292.416,164.416 L243.498667,213.333333 L292.416,262.250667 L262.250667,292.416 L213.333333,243.498667 L164.416,292.416 L134.250667,262.250667 L183.168,213.333333 L134.250667,164.416 L164.416,134.250667 L213.333333,183.168 L262.250667,134.250667 Z' id='error'/></g></g></svg>"
 export const exploreFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>explore-filled</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='icon' transform='translate(42.666667, 42.666667)'><path d='M250.929,70.72 L314.314,232.128 L283.413333,241.216 L346.66944,409.38432 L306.71936,424.365653 L242.368,253.290667 L213.44,261.781333 L153.778347,424.38016 L114.561493,407.572907 L162.56,276.757333 L37.7361067,313.4784 L-7.10542736e-15,238.005973 L250.929,70.72 Z M357.009067,0 L440.57856,194.9952 L355.407,220.043 L287.257,46.501 L357.009067,0 Z' id='Combined-Shape'/></g></g></svg>"
 export const explore = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>explore</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='icon' transform='translate(42.666667, 42.666667)'><path d='M337.988693,63.9552 L302.978347,87.29856 L340.096,180.032 L382.404693,167.613867 L337.988693,63.9552 Z M266.709333,111.445333 L55.0020267,252.605867 L59.9300267,262.461867 L298.965333,192.128 L266.709333,111.445333 Z M357.009067,0 L440.57856,194.9952 L283.413333,241.216 L346.66944,409.38432 L306.71936,424.365653 L242.368,253.290667 L213.44,261.781333 L153.778347,424.38016 L114.561493,407.572907 L162.56,276.757333 L37.7361067,313.4784 L-2.13162821e-14,238.005973 L357.009067,0 Z' id='Shape'/></g></g></svg>"
+export const _export = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>export</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='Combined-Shape' transform='translate(64.000000, 48.915055)'><path d='M170.666667,36.418278 L170.666667,79.0849447 L42.6666667,79.0849447 L42.6666667,356.418278 L341.333333,356.418278 L341.333333,228.418278 L384,228.418278 L384,399.084945 L0,399.084945 L0,36.418278 L170.666667,36.418278 Z M313.751611,0 L414.169889,100.418278 L313.751611,200.836556 L283.581722,170.666667 L332.485,121.751 L277.333333,121.751611 C243.249474,121.751611 215.388568,148.395237 213.441977,181.991125 L213.333333,185.751611 L213.333333,292.418278 L170.666667,292.418278 L170.666667,185.751611 C170.666667,128.391511 215.942543,81.6061582 272.706355,79.1834943 L277.333333,79.0849447 L332.484,79.084 L283.581722,30.1698893 L313.751611,0 Z'/></g></g></svg>"
 export const eyeCancelledFilled = "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='M47.0849493,2.84217094e-14 L409.751616,362.666662 L379.581717,392.836561 L320.374817,333.628896 C291.246618,353.329494 255.728838,367.084945 213.333333,367.084945 C64,367.084945 7.10542736e-15,196.418278 7.10542736e-15,196.418278 C7.10542736e-15,196.418278 22.8621027,135.452671 73.141042,86.3971998 L16.9150553,30.169894 L47.0849493,2.84217094e-14 Z M213.333333,25.7516113 C362.666667,25.7516113 426.666667,196.418278 426.666667,196.418278 C426.666667,196.418278 412.428071,234.387867 381.712212,274.508373 L285.871605,178.644581 C279.289844,151.690235 258.075932,130.47205 231.123994,123.884151 L145.662385,38.4000762 C165.913597,30.494948 188.437631,25.7516113 213.333333,25.7516113 Z M138.666667,196.418278 C138.666667,237.655539 172.096072,271.084945 213.333333,271.084945 C226.192194,271.084945 238.291853,267.834416 248.85545,262.110219 L215.113754,228.369585 C214.524387,228.401906 213.930772,228.418278 213.333333,228.418278 C195.660221,228.418278 181.333333,214.09139 181.333333,196.418278 C181.333333,195.820501 181.349724,195.226552 181.382081,194.636857 L147.641392,160.896162 C141.917195,171.459758 138.666667,183.559417 138.666667,196.418278 Z' transform='translate(42.667 59.582)'/></svg>"
 export const eyeCancelled = "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='M47.0849493,2.84217094e-14 L185.740632,138.655563 C194.095501,134.657276 203.45297,132.418278 213.333333,132.418278 C248.679253,132.418278 277.333333,161.072358 277.333333,196.418278 C277.333333,206.299034 275.094157,215.656855 271.095572,224.011976 L409.751616,362.666662 L379.581717,392.836561 L320.374817,333.628896 C291.246618,353.329494 255.728838,367.084945 213.333333,367.084945 C64,367.084945 7.10542736e-15,196.418278 7.10542736e-15,196.418278 C7.10542736e-15,196.418278 22.862032,135.452859 73.1408088,86.3974274 L16.9150553,30.169894 L47.0849493,2.84217094e-14 Z M103.440016,116.694904 C74.7091717,144.512844 55.9626236,177.598744 46.7136,196.424891 C64.7370667,233.114811 119.071573,324.418278 213.333333,324.418278 C242.440012,324.418278 267.739844,315.712374 289.339919,302.595012 L240.926035,254.180993 C232.571166,258.17928 223.213696,260.418278 213.333333,260.418278 C177.987413,260.418278 149.333333,231.764198 149.333333,196.418278 C149.333333,186.537915 151.572331,177.180445 155.570618,168.825577 Z M213.333333,25.7516113 C362.666667,25.7516113 426.666667,196.418278 426.666667,196.418278 C426.666667,196.418278 412.428071,234.387867 381.712212,274.508373 L351.151213,243.941206 C364.581948,225.697449 374.142733,208.239347 379.954347,196.410385 C361.9296,159.721745 307.595093,68.418278 213.333333,68.418278 C201.495833,68.418278 190.287983,69.858232 179.702584,72.449263 L145.662385,38.4000762 C165.913597,30.494948 188.437631,25.7516113 213.333333,25.7516113 Z' transform='translate(42.667 59.582)'/></svg>"
 export const eyeFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>eye-filled</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='eye' transform='translate(42.666667, 85.333333)'><path d='M213.333333,1.42108547e-14 C362.666667,1.42108547e-14 426.666667,170.666667 426.666667,170.666667 C426.666667,170.666667 362.666667,341.333333 213.333333,341.333333 C64,341.333333 7.10542736e-15,170.666667 7.10542736e-15,170.666667 C7.10542736e-15,170.666667 64,1.42108547e-14 213.333333,1.42108547e-14 Z M213.333333,96 C172.096427,96 138.666667,129.42976 138.666667,170.666667 C138.666667,211.903573 172.096427,245.333333 213.333333,245.333333 C254.57024,245.333333 288,211.903573 288,170.666667 C288,129.42976 254.57024,96 213.333333,96 Z M213.333333,202.666667 C195.688747,202.666667 181.333333,188.311253 181.333333,170.666667 C181.333333,153.02208 195.688747,138.666667 213.333333,138.666667 C230.97792,138.666667 245.333333,153.02208 245.333333,170.666667 C245.333333,188.311253 230.97792,202.666667 213.333333,202.666667 Z' id='Shape'/></g></g></svg>"
@@ -279,6 +280,7 @@ export const home = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/
 export const hourglass = "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='M256,7.10542736e-15 L256,115.477333 L158.165333,213.333333 L256,311.146667 L256,426.666667 L-2.84217094e-14,426.666667 L-2.84217094e-14,311.146667 L97.8133333,213.333333 L-2.84217094e-14,115.477333 L-2.84217094e-14,7.10542736e-15 L256,7.10542736e-15 Z M128,243.498667 L42.6666667,328.832 L42.6666667,373.333333 L128,320 L213.333333,373.333333 L213.333333,328.832 L128,243.498667 Z M213.333333,42.6666667 L42.6666667,42.6666667 L42.6666667,97.8133333 L72.9030755,128.057301 L183.356249,127.797912 L213.333333,97.8133333 L213.333333,42.6666667 Z' transform='translate(128 42.667)'/></svg>"
 export const imageFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>image-filled</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='icon' transform='translate(64.000000, 64.000000)'><path d='M384,1.42108547e-14 L384,384 L1.42108547e-14,384 L1.42108547e-14,1.42108547e-14 L384,1.42108547e-14 Z M109.226667,142.933333 L42.666,249.881 L42.666,341.333 L341.333,341.333 L341.333,264.746 L277.333333,200.746667 L211.84,266.24 L109.226667,142.933333 Z M245.333333,85.3333333 C227.660221,85.3333333 213.333333,99.6602213 213.333333,117.333333 C213.333333,135.006445 227.660221,149.333333 245.333333,149.333333 C263.006445,149.333333 277.333333,135.006445 277.333333,117.333333 C277.333333,99.6602213 263.006445,85.3333333 245.333333,85.3333333 Z' id='Combined-Shape'/></g></g></svg>"
 export const image = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>image</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='icon' transform='translate(64.000000, 64.000000)'><path d='M1.42108547e-14,384 L1.42108547e-14,1.45661261e-11 L384,1.45661261e-11 L384,384 L1.42108547e-14,384 Z M109.226667,185.6 L42.666,292.548 L42.666,341.333 L341.333,341.333 L341.333,307.413 L277.333333,243.413333 L211.84,308.906667 L109.226667,185.6 Z M341.333,42.666 L42.666,42.666 L42.666,211.877 L104.106667,113.066667 L214.826667,245.76 L277.333333,183.253333 L341.333,247.253 L341.333,42.666 Z M245.333333,85.3333333 C263.006445,85.3333333 277.333333,99.6602213 277.333333,117.333333 C277.333333,135.006445 263.006445,149.333333 245.333333,149.333333 C227.660221,149.333333 213.333333,135.006445 213.333333,117.333333 C213.333333,99.6602213 227.660221,85.3333333 245.333333,85.3333333 Z' id='Combined-Shape'/></g></g></svg>"
+export const _import = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>import</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='Combined-Shape' transform='translate(42.666667, 85.333333)'><path d='M405.333333,-1.42108547e-14 L405.333333,362.666667 L21.3333333,362.666667 L21.3333333,85.3333333 L64,85.3333333 L64,320 L362.666667,320 L362.666667,42.6666667 L277.333333,42.6666667 L277.333333,-1.42108547e-14 L405.333333,-1.42108547e-14 Z M128,-1.42108547e-14 C185.3601,-1.42108547e-14 232.145453,45.2758765 234.568117,102.039688 L234.666667,106.666667 L234.666,183.152 L283.581722,134.248389 L313.751611,164.418278 L213.333333,264.836556 L112.915055,164.418278 L143.084945,134.248389 L192,183.152 L192,106.666667 C192,72.5828078 165.356374,44.7219012 131.760486,42.7753108 L128,42.6666667 L7.10542736e-15,42.6666667 L7.10542736e-15,-1.42108547e-14 L128,-1.42108547e-14 Z'/></g></g></svg>"
 export const infoFeed = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>info-feed</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='drop' transform='translate(64.000000, 85.333333)'><path d='M128.021333,42.688 L384.042667,42.688 L384.042667,0.0213333333 L128.021333,0.0213333333 L128.021333,42.688 Z M0.0426666667,85.3546667 L85.376,85.3546667 L85.376,1.42108547e-14 L0.0426666667,1.42108547e-14 L0.0426666667,85.3546667 Z M128.021333,128.021333 L384.042667,128.021333 L384.042667,85.3546667 L128.021333,85.3546667 L128.021333,128.021333 Z M298.688,298.688 L384.042667,298.688 L384.042667,213.333333 L298.688,213.333333 L298.688,298.688 Z M-1.42108547e-14,256.021333 L256,256.021333 L256,213.333333 L-1.42108547e-14,213.333333 L-1.42108547e-14,256.021333 Z M0.0426666667,341.354667 L256.042667,341.354667 L256.042667,298.688 L0.0426666667,298.688 L0.0426666667,341.354667 Z' id='Combined-Shape'/></g></g></svg>"
 export const infoFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>info-filled</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51168 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.154987,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51168 331.154987,3.55271368e-14 213.333333,3.55271368e-14 Z M240.04672,128 C240.04672,143.46752 228.785067,154.666667 213.55008,154.666667 C197.698773,154.666667 186.713387,143.46752 186.713387,127.704107 C186.713387,112.5536 197.99616,101.333333 213.55008,101.333333 C228.785067,101.333333 240.04672,112.5536 240.04672,128 Z M192.04672,192 L234.713387,192 L234.713387,320 L192.04672,320 L192.04672,192 Z' id='Shape'/></g></g></svg>"
 export const info = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>info</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51168 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.154987,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51168 331.154987,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.44,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.44,384 213.333333,384 Z M240.04672,128 C240.04672,143.46752 228.785067,154.666667 213.55008,154.666667 C197.698773,154.666667 186.713387,143.46752 186.713387,127.704107 C186.713387,112.5536 197.99616,101.333333 213.55008,101.333333 C228.785067,101.333333 240.04672,112.5536 240.04672,128 Z M192.04672,192 L234.713387,192 L234.713387,320 L192.04672,320 L192.04672,192 Z' id='Shape'/></g></g></svg>"

package/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/ix/icons",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "module": "index.mjs",
   "main": "index.js",
   "typings": "index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siemens/ix-icons",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "license": "MIT",
   "description": "Siemens ix icon library",
   "author": "Siemens AG",
@@ -35,17 +35,17 @@
     "build": "rimraf dist-css  && yarn build:js-icons && yarn build:icons && stencil build",
     "start": "rimraf dist-css  && yarn build:js-icons && yarn build:icons && stencil build --dev --watch --serve",
     "test": "stencil test --spec",
-    "test.watch": "stencil test --spec --watchAll",
+    "test:watch": "stencil test --spec --watchAll",
+    "test:e2e": "playwright test --reporter html",
     "generate": "stencil generate",
     "build:icons": "gulp symbols",
-    "test:icons": "node ./tests/is-icon-generated.mjs",
-    "host": "http-server -a 127.0.0.1 -p 8080 ./dist"
+    "host:root": "http-server -a 127.0.0.1 -p 8080 ./"
   },
   "dependencies": {
     "@stencil/core": "^3.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.26.1",
+    "@playwright/test": "^1.34.3",
     "@stencil/sass": "^3.0.0",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.5.2",

package/dist/cjs/icon-a769c6ea.js.map

@@ -1 +0,0 @@
-{"file":"icon-a769c6ea.js","mappings":";;;;AAAA;;;AAMO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAK,GAAG,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAElF,IAAI,MAAM,GAAG,IAAI,CAAC;AAElB,SAAS,mBAAmB,CAAC,OAAe;EAC1C,IAAI,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;IAC9C,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;IACzD,OAAO;GACR;EAED,IAAI,MAAM,KAAK,IAAI,EAAE;IACnB,MAAM,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;GACpC;EAED,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;EACjE,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAEpD,IAAI,CAAC,UAAU,EAAE;IACf,MAAM,KAAK,CAAC,4BAA4B,CAAC,CAAC;GAC3C;EAED,OAAO,UAAU,CAAC,SAAS,CAAC;AAC9B,CAAC;AAED,eAAe,QAAQ,CAAC,GAAW;EACjC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;EAClC,MAAM,YAAY,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;EAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;IAChB,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC5B,OAAO,EAAE,CAAC;GACX;EAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAEM,eAAe,WAAW,CAAC,IAAU;EAC1C,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;EAE3B,IAAI,IAAI,EAAE;IACR,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE;MACtB,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;KAClC;;IAGD,OAAO;GACR;EAED,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE;IACrB,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC;GACjC;EAED,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;AACvB;;AC3DA,MAAM,OAAO,GAAG,+n9BAA+n9B;;MCiBlo9B,IAAI;;;;;;;;;EAyBf,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAID,MAAM,eAAe;IACnB,IAAI,CAAC,UAAU,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;GAC3C;EAED,MAAM;IACJ,MAAM,KAAK,GAEP,EAAE,CAAC;IAEP,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,KAAK,CAAC,OAAO,CAAC,GAAG,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;KAC/C;IAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;MAC3B,QACEA,QAACC,UAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;UACL,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;SAChC,IAEDD,eACE,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,CAAC,SAAS,QAAQ,EAAE,GAAG,IAAI;UAC3B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC/B,GACE,CACA,EACP;KACH;IAED,QACEA,QAACC,UAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;QACL,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;OAChC,IAEA,IAAI,CAAC,UAAU,IACdD,iBAAK,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,KAE/DA,kBACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;OACf,GACK,CACT,CACI,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/icon/resolveIcon.ts","./src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.\n */\n\nimport { Icon } from './icon';\n\nexport const isSvgDataUrl = (url: string) => url.startsWith('data:image/svg+xml');\n\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('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');\n\n  if (!svgElement) {\n    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return responseText;\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\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@import './generated/ix-icons';\n\n:host {\n  display: inline-flex;\n  height: 1.5rem;\n  width: 1.5rem;\n\n  i {\n    color: inherit;\n    transition: color 150ms;\n  }\n\n  .svg-container {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .svg-container > svg {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .svg-container > svg [fill] {\n    fill: var(--theme-color-std-text);\n  }\n\n  .skeleton-box {\n    display: inline-block;\n    height: 1em;\n    position: relative;\n    overflow: hidden;\n    background-color: #dddbdd;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transform: translateX(-100%);\n      background-image: linear-gradient(90deg, rgba(#fff, 0) 0, rgba(#fff, 0.2) 20%, rgba(#fff, 0.5) 60%, rgba(#fff, 0));\n      animation: shimmer 2s infinite;\n      content: '';\n    }\n\n    @keyframes shimmer {\n      100% {\n        transform: translateX(100%);\n      }\n    }\n  }\n}\n\n:host(.size-12) {\n  height: 0.75rem;\n  width: 0.75rem;\n\n  .svg-container > svg {\n    height: 0.75rem;\n    width: 0.75rem;\n  }\n}\n\n:host(.size-16) {\n  height: 1rem;\n  width: 1rem;\n\n  .svg-container > svg {\n    height: 1rem;\n    width: 1rem;\n  }\n}\n\n:host(.size-32) {\n  height: 2rem;\n  width: 2rem;\n\n  .svg-container > svg {\n    height: 2rem;\n    width: 2rem;\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\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\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  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Path to the svg\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"icon-adfc87aa.js","mappings":";;AAAA;;;AAMO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAK,GAAG,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAElF,IAAI,MAAM,GAAG,IAAI,CAAC;AAElB,SAAS,mBAAmB,CAAC,OAAe;EAC1C,IAAI,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;IAC9C,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;IACzD,OAAO;GACR;EAED,IAAI,MAAM,KAAK,IAAI,EAAE;IACnB,MAAM,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;GACpC;EAED,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;EACjE,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAEpD,IAAI,CAAC,UAAU,EAAE;IACf,MAAM,KAAK,CAAC,4BAA4B,CAAC,CAAC;GAC3C;EAED,OAAO,UAAU,CAAC,SAAS,CAAC;AAC9B,CAAC;AAED,eAAe,QAAQ,CAAC,GAAW;EACjC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;EAClC,MAAM,YAAY,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;EAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;IAChB,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC5B,OAAO,EAAE,CAAC;GACX;EAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAEM,eAAe,WAAW,CAAC,IAAU;EAC1C,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;EAE3B,IAAI,IAAI,EAAE;IACR,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE;MACtB,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;KAClC;;IAGD,OAAO;GACR;EAED,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE;IACrB,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC;GACjC;EAED,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;AACvB;;AC3DA,MAAM,OAAO,GAAG,+n9BAA+n9B;;MCiBlo9B,IAAI;;;;;;;;;EAyBf,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAID,MAAM,eAAe;IACnB,IAAI,CAAC,UAAU,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;GAC3C;EAED,MAAM;IACJ,MAAM,KAAK,GAEP,EAAE,CAAC;IAEP,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,KAAK,CAAC,OAAO,CAAC,GAAG,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;KAC/C;IAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;MAC3B,QACE,EAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;UACL,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;UAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;SAChC,IAED,SACE,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,CAAC,SAAS,QAAQ,EAAE,GAAG,IAAI;UAC3B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;UAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC/B,GACE,CACA,EACP;KACH;IAED,QACE,EAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;QACL,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;QAC/B,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI;OAChC,IAEA,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,KAE/D,YACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;OACf,GACK,CACT,CACI,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/icon/resolveIcon.ts","./src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.\n */\n\nimport { Icon } from './icon';\n\nexport const isSvgDataUrl = (url: string) => url.startsWith('data:image/svg+xml');\n\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('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');\n\n  if (!svgElement) {\n    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return responseText;\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\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@import './generated/ix-icons';\n\n:host {\n  display: inline-flex;\n  height: 1.5rem;\n  width: 1.5rem;\n\n  i {\n    color: inherit;\n    transition: color 150ms;\n  }\n\n  .svg-container {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .svg-container > svg {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .svg-container > svg [fill] {\n    fill: var(--theme-color-std-text);\n  }\n\n  .skeleton-box {\n    display: inline-block;\n    height: 1em;\n    position: relative;\n    overflow: hidden;\n    background-color: #dddbdd;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transform: translateX(-100%);\n      background-image: linear-gradient(90deg, rgba(#fff, 0) 0, rgba(#fff, 0.2) 20%, rgba(#fff, 0.5) 60%, rgba(#fff, 0));\n      animation: shimmer 2s infinite;\n      content: '';\n    }\n\n    @keyframes shimmer {\n      100% {\n        transform: translateX(100%);\n      }\n    }\n  }\n}\n\n:host(.size-12) {\n  height: 0.75rem;\n  width: 0.75rem;\n\n  .svg-container > svg {\n    height: 0.75rem;\n    width: 0.75rem;\n  }\n}\n\n:host(.size-16) {\n  height: 1rem;\n  width: 1rem;\n\n  .svg-container > svg {\n    height: 1rem;\n    width: 1rem;\n  }\n}\n\n:host(.size-32) {\n  height: 2rem;\n  width: 2rem;\n\n  .svg-container > svg {\n    height: 2rem;\n    width: 2rem;\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\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\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  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Path to the svg\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/ix-icons/p-14a21eef.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as o}from"./p-625c25c8.js";const n=e=>e.startsWith("data:image/svg+xml");let l=null;function c(e){if(typeof window["DOMParser"]==="undefined"){console.warn("DOMParser not supported by your browser.");return}if(l===null){l=new window["DOMParser"]}const t=l.parseFromString(e,"text/html");const o=t.querySelector("svg");if(!o){throw Error("No valid svg data provided")}return o.outerHTML}async function r(e){const t=await fetch(e);const o=await t.text();if(!t.ok){console.error(o);return""}return o}async function b(e){const{src:t,name:o}=e;if(o){if(n(o)){return c(o)}return}if(n(t)){return c(t)}return r(t)}const f='.glyph{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-family:"ix-icons";font-size:1.5rem;font-weight:500}.glyph-lg{font-size:1.3333333333em;line-height:0.75em;vertical-align:-15%}.glyph-2x{font-size:2em}.glyph-3x{font-size:3em}.glyph-4x{font-size:4em}.glyph-5x{font-size:5em}.glyph-fw{width:1.2857142857em;text-align:center}.glyph-12{font-size:0.75rem}.glyph-16{font-size:1rem}.glyph-24{font-size:1.5rem}.glyph-32{font-size:2rem}.glyph-about-filled:before{content:"\\ea01"}.glyph-about:before{content:"\\ea02"}.glyph-add-circle-filled:before{content:"\\ea03"}.glyph-add-circle:before{content:"\\ea04"}.glyph-add-document-note:before{content:"\\ea05"}.glyph-add-eye-filled:before{content:"\\ea06"}.glyph-add-eye:before{content:"\\ea07"}.glyph-add-task-list:before{content:"\\ea08"}.glyph-add-task:before{content:"\\ea09"}.glyph-add:before{content:"\\ea0a"}.glyph-ai:before{content:"\\ea0b"}.glyph-alarm-bell-cancelled-filled:before{content:"\\ea0c"}.glyph-alarm-bell-cancelled:before{content:"\\ea0d"}.glyph-alarm-bell-filled:before{content:"\\ea0e"}.glyph-alarm-bell:before{content:"\\ea0f"}.glyph-alarm-clock-filled:before{content:"\\ea10"}.glyph-alarm-clock:before{content:"\\ea11"}.glyph-alarm-filled:before{content:"\\ea12"}.glyph-alarm:before{content:"\\ea13"}.glyph-analyze:before{content:"\\ea14"}.glyph-anomaly-found:before{content:"\\ea15"}.glyph-anomaly:before{content:"\\ea16"}.glyph-app-menu:before{content:"\\ea17"}.glyph-apps:before{content:"\\ea18"}.glyph-arrow-down-right:before{content:"\\ea19"}.glyph-arrow-down:before{content:"\\ea1a"}.glyph-arrow-left:before{content:"\\ea1b"}.glyph-arrow-right-down:before{content:"\\ea1c"}.glyph-arrow-right:before{content:"\\ea1d"}.glyph-arrow-up:before{content:"\\ea1e"}.glyph-attach:before{content:"\\ea1f"}.glyph-attachment-upload:before{content:"\\ea20"}.glyph-audio-description1:before{content:"\\ea21"}.glyph-audio-description2:before{content:"\\ea22"}.glyph-audit-report:before{content:"\\ea23"}.glyph-average:before{content:"\\ea24"}.glyph-backup-filled:before{content:"\\ea25"}.glyph-backup:before{content:"\\ea26"}.glyph-bar-code:before{content:"\\ea27"}.glyph-barchart:before{content:"\\ea28"}.glyph-battery-check:before{content:"\\ea29"}.glyph-battery-empty-question:before{content:"\\ea2a"}.glyph-battery-empty:before{content:"\\ea2b"}.glyph-battery-exclamation:before{content:"\\ea2c"}.glyph-battery-full-check:before{content:"\\ea2d"}.glyph-battery-full:before{content:"\\ea2e"}.glyph-battery-half:before{content:"\\ea2f"}.glyph-battery-low:before{content:"\\ea30"}.glyph-battery-quarter:before{content:"\\ea31"}.glyph-battery-slash:before{content:"\\ea32"}.glyph-battery-three-quarter:before{content:"\\ea33"}.glyph-battery-xmark:before{content:"\\ea34"}.glyph-bezier-curve:before{content:"\\ea35"}.glyph-binoculars-filled:before{content:"\\ea36"}.glyph-binoculars:before{content:"\\ea37"}.glyph-blazor:before{content:"\\ea38"}.glyph-book:before{content:"\\ea39"}.glyph-bookmark-filled:before{content:"\\ea3a"}.glyph-bookmark:before{content:"\\ea3b"}.glyph-boundary-signals:before{content:"\\ea3c"}.glyph-building1-filled:before{content:"\\ea3d"}.glyph-building1:before{content:"\\ea3e"}.glyph-building2-filled:before{content:"\\ea3f"}.glyph-building2:before{content:"\\ea40"}.glyph-bulb-filled:before{content:"\\ea41"}.glyph-bulb:before{content:"\\ea42"}.glyph-calendar-filled:before{content:"\\ea43"}.glyph-calendar-settings:before{content:"\\ea44"}.glyph-calendar:before{content:"\\ea45"}.glyph-cancel:before{content:"\\ea46"}.glyph-cancelled:before{content:"\\ea47"}.glyph-capacity-filled:before{content:"\\ea48"}.glyph-capacity:before{content:"\\ea49"}.glyph-capture:before{content:"\\ea4a"}.glyph-car-filled:before{content:"\\ea4b"}.glyph-car:before{content:"\\ea4c"}.glyph-card-layout-filled:before{content:"\\ea4d"}.glyph-card-layout:before{content:"\\ea4e"}.glyph-chart-cursor:before{content:"\\ea4f"}.glyph-chart-curve-linear:before{content:"\\ea50"}.glyph-chart-curve-spline:before{content:"\\ea51"}.glyph-chart-curve-stepped:before{content:"\\ea52"}.glyph-chart-diagram-add:before{content:"\\ea53"}.glyph-chart-diagram:before{content:"\\ea54"}.glyph-chart-diagrams:before{content:"\\ea55"}.glyph-chart-labels-filled:before{content:"\\ea56"}.glyph-chart-labels:before{content:"\\ea57"}.glyph-check-in:before{content:"\\ea58"}.glyph-check-out:before{content:"\\ea59"}.glyph-checkbox-component-checked:before{content:"\\ea5a"}.glyph-checkbox-component-mixed:before{content:"\\ea5b"}.glyph-checkbox-component-unchecked:before{content:"\\ea5c"}.glyph-checkbox-filled:before{content:"\\ea5d"}.glyph-checkbox:before{content:"\\ea5e"}.glyph-checkboxes-filled:before{content:"\\ea5f"}.glyph-checkboxes:before{content:"\\ea60"}.glyph-chevron-down-small:before{content:"\\ea61"}.glyph-chevron-down:before{content:"\\ea62"}.glyph-chevron-left-small:before{content:"\\ea63"}.glyph-chevron-left:before{content:"\\ea64"}.glyph-chevron-right-small:before{content:"\\ea65"}.glyph-chevron-right:before{content:"\\ea66"}.glyph-chevron-up-small:before{content:"\\ea67"}.glyph-chevron-up:before{content:"\\ea68"}.glyph-circle-dot-filled:before{content:"\\ea69"}.glyph-circle-dot:before{content:"\\ea6a"}.glyph-circle-filled:before{content:"\\ea6b"}.glyph-circle-pause-filled:before{content:"\\ea6c"}.glyph-circle-pause:before{content:"\\ea6d"}.glyph-circle-play-filled:before{content:"\\ea6e"}.glyph-circle-play:before{content:"\\ea6f"}.glyph-circle-stop-filled:before{content:"\\ea70"}.glyph-circle-stop:before{content:"\\ea71"}.glyph-circle:before{content:"\\ea72"}.glyph-clear-filter-filled:before{content:"\\ea73"}.glyph-clear-filter:before{content:"\\ea74"}.glyph-clear:before{content:"\\ea75"}.glyph-clock-filled:before{content:"\\ea76"}.glyph-clock:before{content:"\\ea77"}.glyph-close-small:before{content:"\\ea78"}.glyph-close:before{content:"\\ea79"}.glyph-cloud-download-add-filled:before{content:"\\ea7a"}.glyph-cloud-download-add:before{content:"\\ea7b"}.glyph-cloud-download-filled:before{content:"\\ea7c"}.glyph-cloud-download-list-filled:before{content:"\\ea7d"}.glyph-cloud-download-list:before{content:"\\ea7e"}.glyph-cloud-download:before{content:"\\ea7f"}.glyph-cloud-filled:before{content:"\\ea80"}.glyph-cloud-new-filled:before{content:"\\ea81"}.glyph-cloud-new:before{content:"\\ea82"}.glyph-cloud-success-filled:before{content:"\\ea83"}.glyph-cloud-success:before{content:"\\ea84"}.glyph-cloud-upload-filled:before{content:"\\ea85"}.glyph-cloud-upload:before{content:"\\ea86"}.glyph-cloud:before{content:"\\ea87"}.glyph-code:before{content:"\\ea88"}.glyph-cogwheel-filled:before{content:"\\ea89"}.glyph-cogwheel:before{content:"\\ea8a"}.glyph-combine:before{content:"\\ea8b"}.glyph-compact-disc-filled:before{content:"\\ea8c"}.glyph-compact-disc:before{content:"\\ea8d"}.glyph-compound-block:before{content:"\\ea8e"}.glyph-configuration:before{content:"\\ea8f"}.glyph-configure-filled:before{content:"\\ea90"}.glyph-configure:before{content:"\\ea91"}.glyph-connected:before{content:"\\ea92"}.glyph-connector-chart-filled:before{content:"\\ea93"}.glyph-connector-chart:before{content:"\\ea94"}.glyph-connector-filled:before{content:"\\ea95"}.glyph-connector-hex-filled:before{content:"\\ea96"}.glyph-connector-hex:before{content:"\\ea97"}.glyph-connector-rect-filled:before{content:"\\ea98"}.glyph-connector-rect:before{content:"\\ea99"}.glyph-connector-rhomb-filled:before{content:"\\ea9a"}.glyph-connector-rhomb:before{content:"\\ea9b"}.glyph-connector:before{content:"\\ea9c"}.glyph-consistency-check:before{content:"\\ea9d"}.glyph-contact-details-filled:before{content:"\\ea9e"}.glyph-contact-details:before{content:"\\ea9f"}.glyph-context-menu:before{content:"\\eaa0"}.glyph-controlled-device:before{content:"\\eaa1"}.glyph-controller-device:before{content:"\\eaa2"}.glyph-copy:before{content:"\\eaa3"}.glyph-corner-arrow-up-left:before{content:"\\eaa4"}.glyph-couch-filled:before{content:"\\eaa5"}.glyph-couch:before{content:"\\eaa6"}.glyph-create-plant-filled:before{content:"\\eaa7"}.glyph-create-plant:before{content:"\\eaa8"}.glyph-cut:before{content:"\\eaa9"}.glyph-cycle:before{content:"\\eaaa"}.glyph-data-egress:before{content:"\\eaab"}.glyph-data-ingress-egress:before{content:"\\eaac"}.glyph-data-ingress:before{content:"\\eaad"}.glyph-database-filled:before{content:"\\eaae"}.glyph-database:before{content:"\\eaaf"}.glyph-details:before{content:"\\eab0"}.glyph-diagram-module-library:before{content:"\\eab1"}.glyph-diagram-module-new:before{content:"\\eab2"}.glyph-diagram-module:before{content:"\\eab3"}.glyph-diamond:before{content:"\\eab4"}.glyph-disconnected:before{content:"\\eab5"}.glyph-disk-filled:before{content:"\\eab6"}.glyph-disk-pen:before{content:"\\eab7"}.glyph-disk:before{content:"\\eab8"}.glyph-distribution:before{content:"\\eab9"}.glyph-doc-document:before{content:"\\eaba"}.glyph-document-bulk:before{content:"\\eabb"}.glyph-document-info:before{content:"\\eabc"}.glyph-document-link:before{content:"\\eabd"}.glyph-document-management:before{content:"\\eabe"}.glyph-document-reference:before{content:"\\eabf"}.glyph-document-settings:before{content:"\\eac0"}.glyph-document-success:before{content:"\\eac1"}.glyph-document:before{content:"\\eac2"}.glyph-double-check:before{content:"\\eac3"}.glyph-double-chevron-down:before{content:"\\eac4"}.glyph-double-chevron-left:before{content:"\\eac5"}.glyph-double-chevron-right:before{content:"\\eac6"}.glyph-double-chevron-up:before{content:"\\eac7"}.glyph-doublet-filled:before{content:"\\eac8"}.glyph-doublet:before{content:"\\eac9"}.glyph-download-add:before{content:"\\eaca"}.glyph-download-list:before{content:"\\eacb"}.glyph-download:before{content:"\\eacc"}.glyph-drop:before{content:"\\eacd"}.glyph-duplicate-document:before{content:"\\eace"}.glyph-duplicate:before{content:"\\eacf"}.glyph-e-mail-filled:before{content:"\\ead0"}.glyph-e-mail:before{content:"\\ead1"}.glyph-earth-filled:before{content:"\\ead2"}.glyph-earth:before{content:"\\ead3"}.glyph-edit-plant:before{content:"\\ead4"}.glyph-ellipse-arc:before{content:"\\ead5"}.glyph-ellipse-filled:before{content:"\\ead6"}.glyph-ellipse:before{content:"\\ead7"}.glyph-error-filled:before{content:"\\ead8"}.glyph-error:before{content:"\\ead9"}.glyph-explore-filled:before{content:"\\eada"}.glyph-explore:before{content:"\\eadb"}.glyph-export:before{content:"\\eadc"}.glyph-eye-cancelled-filled:before{content:"\\eadd"}.glyph-eye-cancelled:before{content:"\\eade"}.glyph-eye-filled:before{content:"\\eadf"}.glyph-eye:before{content:"\\eae0"}.glyph-factory-reset-filled:before{content:"\\eae1"}.glyph-factory-reset:before{content:"\\eae2"}.glyph-filter-filled:before{content:"\\eae3"}.glyph-filter-outline:before{content:"\\eae4"}.glyph-filter:before{content:"\\eae5"}.glyph-flag-filled:before{content:"\\eae6"}.glyph-flag:before{content:"\\eae7"}.glyph-folder-down-filled:before{content:"\\eae8"}.glyph-folder-down:before{content:"\\eae9"}.glyph-folder-filled:before{content:"\\eaea"}.glyph-folder-new-filled:before{content:"\\eaeb"}.glyph-folder-new-outline:before{content:"\\eaec"}.glyph-folder-new:before{content:"\\eaed"}.glyph-folder-open-filled:before{content:"\\eaee"}.glyph-folder-open-outline:before{content:"\\eaef"}.glyph-folder-open:before{content:"\\eaf0"}.glyph-folder-outline:before{content:"\\eaf1"}.glyph-folder-up-filled:before{content:"\\eaf2"}.glyph-folder-up:before{content:"\\eaf3"}.glyph-folder:before{content:"\\eaf4"}.glyph-full-screeen-exit:before{content:"\\eaf5"}.glyph-full-screeen:before{content:"\\eaf6"}.glyph-function-block-library:before{content:"\\eaf7"}.glyph-function-block-new:before{content:"\\eaf8"}.glyph-function-block:before{content:"\\eaf9"}.glyph-function-diagram-new:before{content:"\\eafa"}.glyph-function-diagram:before{content:"\\eafb"}.glyph-gauge-filled:before{content:"\\eafc"}.glyph-gauge:before{content:"\\eafd"}.glyph-gaugechart:before{content:"\\eafe"}.glyph-global-plant-filled:before{content:"\\eaff"}.glyph-global-plant:before{content:"\\eb00"}.glyph-globe-filled:before{content:"\\eb01"}.glyph-globe:before{content:"\\eb02"}.glyph-goto:before{content:"\\eb03"}.glyph-group:before{content:"\\eb04"}.glyph-hard-reset:before{content:"\\eb05"}.glyph-hardware-cabinet:before{content:"\\eb06"}.glyph-health-filled:before{content:"\\eb07"}.glyph-health:before{content:"\\eb08"}.glyph-heart-filled:before{content:"\\eb09"}.glyph-heart:before{content:"\\eb0a"}.glyph-hexagon-vertical-bars-database-filled:before{content:"\\eb0b"}.glyph-hexagon-vertical-bars-database:before{content:"\\eb0c"}.glyph-hexagon-vertical-bars-filled:before{content:"\\eb0d"}.glyph-hexagon-vertical-bars:before{content:"\\eb0e"}.glyph-hierarchy:before{content:"\\eb0f"}.glyph-highlight-filled:before{content:"\\eb10"}.glyph-highlight:before{content:"\\eb11"}.glyph-history-list:before{content:"\\eb12"}.glyph-history:before{content:"\\eb13"}.glyph-home-filled:before{content:"\\eb14"}.glyph-home:before{content:"\\eb15"}.glyph-hourglass:before{content:"\\eb16"}.glyph-image-filled:before{content:"\\eb17"}.glyph-image:before{content:"\\eb18"}.glyph-import:before{content:"\\eb19"}.glyph-info-feed:before{content:"\\eb1a"}.glyph-info-filled:before{content:"\\eb1b"}.glyph-info:before{content:"\\eb1c"}.glyph-ingestion-report:before{content:"\\eb1d"}.glyph-ingestion:before{content:"\\eb1e"}.glyph-ink-pen:before{content:"\\eb1f"}.glyph-inquiry-filled:before{content:"\\eb20"}.glyph-inquiry-mail:before{content:"\\eb21"}.glyph-inquiry:before{content:"\\eb22"}.glyph-item-details-filled:before{content:"\\eb23"}.glyph-item-details:before{content:"\\eb24"}.glyph-label-filled:before{content:"\\eb25"}.glyph-label:before{content:"\\eb26"}.glyph-language-filled:before{content:"\\eb27"}.glyph-language:before{content:"\\eb28"}.glyph-layers-filled:before{content:"\\eb29"}.glyph-layers:before{content:"\\eb2a"}.glyph-leaf:before{content:"\\eb2b"}.glyph-legal:before{content:"\\eb2c"}.glyph-library-new:before{content:"\\eb2d"}.glyph-library:before{content:"\\eb2e"}.glyph-license:before{content:"\\eb2f"}.glyph-light-dark:before{content:"\\eb30"}.glyph-line-diagonal:before{content:"\\eb31"}.glyph-link:before{content:"\\eb32"}.glyph-list:before{content:"\\eb33"}.glyph-live-schedule:before{content:"\\eb34"}.glyph-location-filled:before{content:"\\eb35"}.glyph-location-outline:before{content:"\\eb36"}.glyph-location:before{content:"\\eb37"}.glyph-lock-filled:before{content:"\\eb38"}.glyph-lock-key-filled:before{content:"\\eb39"}.glyph-lock-key:before{content:"\\eb3a"}.glyph-lock:before{content:"\\eb3b"}.glyph-log-in:before{content:"\\eb3c"}.glyph-log-out:before{content:"\\eb3d"}.glyph-log:before{content:"\\eb3e"}.glyph-logic-diagram:before{content:"\\eb3f"}.glyph-lower-limit:before{content:"\\eb40"}.glyph-mail-filled:before{content:"\\eb41"}.glyph-mail:before{content:"\\eb42"}.glyph-maintenance-documents:before{content:"\\eb43"}.glyph-maintenance-info:before{content:"\\eb44"}.glyph-maintenance-warning-filled:before{content:"\\eb45"}.glyph-maintenance-warning:before{content:"\\eb46"}.glyph-maintenance:before{content:"\\eb47"}.glyph-mandatory-done:before{content:"\\eb48"}.glyph-mandatory:before{content:"\\eb49"}.glyph-map:before{content:"\\eb4a"}.glyph-maximize:before{content:"\\eb4b"}.glyph-microphone-filled:before{content:"\\eb4c"}.glyph-microphone:before{content:"\\eb4d"}.glyph-minimize:before{content:"\\eb4e"}.glyph-minus:before{content:"\\eb4f"}.glyph-mix:before{content:"\\eb50"}.glyph-monitor-filled:before{content:"\\eb51"}.glyph-monitor-trend:before{content:"\\eb52"}.glyph-monitor:before{content:"\\eb53"}.glyph-monitoring-add:before{content:"\\eb54"}.glyph-monitoring:before{content:"\\eb55"}.glyph-monitorings:before{content:"\\eb56"}.glyph-moon-filled:before{content:"\\eb57"}.glyph-moon:before{content:"\\eb58"}.glyph-more-menu:before{content:"\\eb59"}.glyph-mouse-click-filled:before{content:"\\eb5a"}.glyph-mouse-click:before{content:"\\eb5b"}.glyph-mouse-select-filled:before{content:"\\eb5c"}.glyph-mouse-select:before{content:"\\eb5d"}.glyph-mp4-document:before{content:"\\eb5e"}.glyph-namur-check-function-filled:before{content:"\\eb5f"}.glyph-namur-check-function:before{content:"\\eb60"}.glyph-namur-failure-filled:before{content:"\\eb61"}.glyph-namur-failure:before{content:"\\eb62"}.glyph-namur-maintenance-required-filled:before{content:"\\eb63"}.glyph-namur-maintenance-required:before{content:"\\eb64"}.glyph-namur-ok-filled:before{content:"\\eb65"}.glyph-namur-ok:before{content:"\\eb66"}.glyph-namur-out-of-spec-filled:before{content:"\\eb67"}.glyph-namur-out-of-spec:before{content:"\\eb68"}.glyph-navigation-filled:before{content:"\\eb69"}.glyph-navigation-left:before{content:"\\eb6a"}.glyph-navigation-right:before{content:"\\eb6b"}.glyph-navigation:before{content:"\\eb6c"}.glyph-new-indicator-filled:before{content:"\\eb6d"}.glyph-new-indicator:before{content:"\\eb6e"}.glyph-no-filter-filled:before{content:"\\eb6f"}.glyph-no-filter:before{content:"\\eb70"}.glyph-no-image:before{content:"\\eb71"}.glyph-note-filled:before{content:"\\eb72"}.glyph-note:before{content:"\\eb73"}.glyph-notification-filled:before{content:"\\eb74"}.glyph-notification:before{content:"\\eb75"}.glyph-notifications-filled:before{content:"\\eb76"}.glyph-notifications:before{content:"\\eb77"}.glyph-ontology-filled:before{content:"\\eb78"}.glyph-ontology:before{content:"\\eb79"}.glyph-open-external:before{content:"\\eb7a"}.glyph-open-file-filled:before{content:"\\eb7b"}.glyph-open-file:before{content:"\\eb7c"}.glyph-operate-plant-filled:before{content:"\\eb7d"}.glyph-operate-plant:before{content:"\\eb7e"}.glyph-optimize:before{content:"\\eb7f"}.glyph-p-and-i-symbols:before{content:"\\eb80"}.glyph-p-i-diagram:before{content:"\\eb81"}.glyph-pan:before{content:"\\eb82"}.glyph-paste:before{content:"\\eb83"}.glyph-pause:before{content:"\\eb84"}.glyph-pc-tower-filled:before{content:"\\eb85"}.glyph-pc-tower:before{content:"\\eb86"}.glyph-pdf-document:before{content:"\\eb87"}.glyph-pen-filled:before{content:"\\eb88"}.glyph-pen:before{content:"\\eb89"}.glyph-phone-filled:before{content:"\\eb8a"}.glyph-phone:before{content:"\\eb8b"}.glyph-photo-camera-add:before{content:"\\eb8c"}.glyph-photo-camera-filled:before{content:"\\eb8d"}.glyph-photo-camera:before{content:"\\eb8e"}.glyph-photo-cameras:before{content:"\\eb8f"}.glyph-piechart-filled:before{content:"\\eb90"}.glyph-piechart:before{content:"\\eb91"}.glyph-pin-filled:before{content:"\\eb92"}.glyph-pin:before{content:"\\eb93"}.glyph-plant-filled:before{content:"\\eb94"}.glyph-plant-handbook-filled:before{content:"\\eb95"}.glyph-plant-handbook:before{content:"\\eb96"}.glyph-plant-outline:before{content:"\\eb97"}.glyph-plant-security:before{content:"\\eb98"}.glyph-plant-settings-filled:before{content:"\\eb99"}.glyph-plant-settings:before{content:"\\eb9a"}.glyph-plant-user-filled:before{content:"\\eb9b"}.glyph-plant-user:before{content:"\\eb9c"}.glyph-plant:before{content:"\\eb9d"}.glyph-plants-filled:before{content:"\\eb9e"}.glyph-plants:before{content:"\\eb9f"}.glyph-play-filled:before{content:"\\eba0"}.glyph-play-pause-filled:before{content:"\\eba1"}.glyph-play-pause:before{content:"\\eba2"}.glyph-play-stepwise-filled:before{content:"\\eba3"}.glyph-play-stepwise:before{content:"\\eba4"}.glyph-play:before{content:"\\eba5"}.glyph-plus-minus-times-divide:before{content:"\\eba6"}.glyph-plus:before{content:"\\eba7"}.glyph-point-up-filled:before{content:"\\eba8"}.glyph-point-up:before{content:"\\eba9"}.glyph-polar-plot:before{content:"\\ebaa"}.glyph-polygon-filled:before{content:"\\ebab"}.glyph-polygon-line:before{content:"\\ebac"}.glyph-polygon:before{content:"\\ebad"}.glyph-ppt-document:before{content:"\\ebae"}.glyph-print-filled:before{content:"\\ebaf"}.glyph-print:before{content:"\\ebb0"}.glyph-prio-high:before{content:"\\ebb1"}.glyph-prio-low:before{content:"\\ebb2"}.glyph-prio-middle:before{content:"\\ebb3"}.glyph-product-catalog:before{content:"\\ebb4"}.glyph-product-management:before{content:"\\ebb5"}.glyph-product:before{content:"\\ebb6"}.glyph-project-configuration:before{content:"\\ebb7"}.glyph-project-new:before{content:"\\ebb8"}.glyph-project-scenarios:before{content:"\\ebb9"}.glyph-project:before{content:"\\ebba"}.glyph-protocol:before{content:"\\ebbb"}.glyph-publish-document:before{content:"\\ebbc"}.glyph-publish:before{content:"\\ebbd"}.glyph-qr-code:before{content:"\\ebbe"}.glyph-quality-report:before{content:"\\ebbf"}.glyph-question-filled:before{content:"\\ebc0"}.glyph-question:before{content:"\\ebc1"}.glyph-radarchart:before{content:"\\ebc2"}.glyph-radio-waves-off:before{content:"\\ebc3"}.glyph-radio-waves:before{content:"\\ebc4"}.glyph-random-filled:before{content:"\\ebc5"}.glyph-random:before{content:"\\ebc6"}.glyph-reboot:before{content:"\\ebc7"}.glyph-rectangle-filled:before{content:"\\ebc8"}.glyph-rectangle:before{content:"\\ebc9"}.glyph-redo:before{content:"\\ebca"}.glyph-reference:before{content:"\\ebcb"}.glyph-refresh-cancelled:before{content:"\\ebcc"}.glyph-refresh:before{content:"\\ebcd"}.glyph-reload:before{content:"\\ebce"}.glyph-remove-eye-filled:before{content:"\\ebcf"}.glyph-remove-eye:before{content:"\\ebd0"}.glyph-rename:before{content:"\\ebd1"}.glyph-replace:before{content:"\\ebd2"}.glyph-report-barchart:before{content:"\\ebd3"}.glyph-report-linechart:before{content:"\\ebd4"}.glyph-report-text:before{content:"\\ebd5"}.glyph-reset:before{content:"\\ebd6"}.glyph-restore-backup-filled:before{content:"\\ebd7"}.glyph-restore-backup-pc:before{content:"\\ebd8"}.glyph-restore-backup:before{content:"\\ebd9"}.glyph-rhomb-filled:before{content:"\\ebda"}.glyph-rhomb:before{content:"\\ebdb"}.glyph-road-filled:before{content:"\\ebdc"}.glyph-road:before{content:"\\ebdd"}.glyph-rocket-filled:before{content:"\\ebde"}.glyph-rocket:before{content:"\\ebdf"}.glyph-route-target:before{content:"\\ebe0"}.glyph-route:before{content:"\\ebe1"}.glyph-scatterplot:before{content:"\\ebe2"}.glyph-scheduler-filled:before{content:"\\ebe3"}.glyph-scheduler:before{content:"\\ebe4"}.glyph-screen-filled:before{content:"\\ebe5"}.glyph-screen:before{content:"\\ebe6"}.glyph-screenshot-filled:before{content:"\\ebe7"}.glyph-screenshot:before{content:"\\ebe8"}.glyph-script-add:before{content:"\\ebe9"}.glyph-script:before{content:"\\ebea"}.glyph-scripts:before{content:"\\ebeb"}.glyph-search:before{content:"\\ebec"}.glyph-share-filled:before{content:"\\ebed"}.glyph-share:before{content:"\\ebee"}.glyph-shopping-cart-filled:before{content:"\\ebef"}.glyph-shopping-cart:before{content:"\\ebf0"}.glyph-shout-filled:before{content:"\\ebf1"}.glyph-shout:before{content:"\\ebf2"}.glyph-sign-language:before{content:"\\ebf3"}.glyph-signal-strength-0:before{content:"\\ebf4"}.glyph-signal-strength-1:before{content:"\\ebf5"}.glyph-signal-strength-2:before{content:"\\ebf6"}.glyph-signal-strength-3:before{content:"\\ebf7"}.glyph-signal-strength-4:before{content:"\\ebf8"}.glyph-signal-strength-5:before{content:"\\ebf9"}.glyph-signal-strength-6:before{content:"\\ebfa"}.glyph-signal-strength-7:before{content:"\\ebfb"}.glyph-signal-strength-8:before{content:"\\ebfc"}.glyph-simit-component:before{content:"\\ebfd"}.glyph-simit-macro-component-editor:before{content:"\\ebfe"}.glyph-simit-macro:before{content:"\\ebff"}.glyph-single-check:before{content:"\\ec00"}.glyph-skip-back-filled:before{content:"\\ec01"}.glyph-skip-back:before{content:"\\ec02"}.glyph-skip-filled:before{content:"\\ec03"}.glyph-skip:before{content:"\\ec04"}.glyph-snowflake:before{content:"\\ec05"}.glyph-sort-ascending:before{content:"\\ec06"}.glyph-sort-descending:before{content:"\\ec07"}.glyph-sort:before{content:"\\ec08"}.glyph-sound-loud-filled:before{content:"\\ec09"}.glyph-sound-loud:before{content:"\\ec0a"}.glyph-sound-mute-filled:before{content:"\\ec0b"}.glyph-sound-mute:before{content:"\\ec0c"}.glyph-sound-off-filled:before{content:"\\ec0d"}.glyph-sound-off:before{content:"\\ec0e"}.glyph-sound-quiet-filled:before{content:"\\ec0f"}.glyph-sound-quiet:before{content:"\\ec10"}.glyph-spatial:before{content:"\\ec11"}.glyph-split-horizontally:before{content:"\\ec12"}.glyph-split-vertically:before{content:"\\ec13"}.glyph-standby:before{content:"\\ec14"}.glyph-star-add-filled:before{content:"\\ec15"}.glyph-star-add:before{content:"\\ec16"}.glyph-star-cancelled-filled:before{content:"\\ec17"}.glyph-star-cancelled:before{content:"\\ec18"}.glyph-star-filled:before{content:"\\ec19"}.glyph-star-list-filled:before{content:"\\ec1a"}.glyph-star-list:before{content:"\\ec1b"}.glyph-star:before{content:"\\ec1c"}.glyph-start-data-analysis:before{content:"\\ec1d"}.glyph-steering-user-filled:before{content:"\\ec1e"}.glyph-steering-user:before{content:"\\ec1f"}.glyph-steering:before{content:"\\ec20"}.glyph-stethoscope:before{content:"\\ec21"}.glyph-stop-filled:before{content:"\\ec22"}.glyph-stop:before{content:"\\ec23"}.glyph-success-filled:before{content:"\\ec24"}.glyph-success:before{content:"\\ec25"}.glyph-sun-filled:before{content:"\\ec26"}.glyph-sun:before{content:"\\ec27"}.glyph-support:before{content:"\\ec28"}.glyph-surveillance-filled:before{content:"\\ec29"}.glyph-surveillance:before{content:"\\ec2a"}.glyph-svg-document:before{content:"\\ec2b"}.glyph-swap-left-right:before{content:"\\ec2c"}.glyph-switch-slider:before{content:"\\ec2d"}.glyph-table-columns:before{content:"\\ec2e"}.glyph-table-rows:before{content:"\\ec2f"}.glyph-table-settings:before{content:"\\ec30"}.glyph-table:before{content:"\\ec31"}.glyph-tag-filled:before{content:"\\ec32"}.glyph-tag-plus-filled:before{content:"\\ec33"}.glyph-tag-plus:before{content:"\\ec34"}.glyph-tag:before{content:"\\ec35"}.glyph-tasks-all:before{content:"\\ec36"}.glyph-tasks-done:before{content:"\\ec37"}.glyph-tasks-open:before{content:"\\ec38"}.glyph-text-circle-rectangle-filled:before{content:"\\ec39"}.glyph-text-circle-rectangle:before{content:"\\ec3a"}.glyph-text-document:before{content:"\\ec3b"}.glyph-text:before{content:"\\ec3c"}.glyph-threshold-cancelled:before{content:"\\ec3d"}.glyph-threshold-off:before{content:"\\ec3e"}.glyph-threshold-on:before{content:"\\ec3f"}.glyph-to-be-published:before{content:"\\ec40"}.glyph-to-search:before{content:"\\ec41"}.glyph-topic-filled:before{content:"\\ec42"}.glyph-topic:before{content:"\\ec43"}.glyph-touch-filled:before{content:"\\ec44"}.glyph-touch:before{content:"\\ec45"}.glyph-trashcan-filled:before{content:"\\ec46"}.glyph-trashcan:before{content:"\\ec47"}.glyph-tree:before{content:"\\ec48"}.glyph-trend:before{content:"\\ec49"}.glyph-triangle-filled:before{content:"\\ec4a"}.glyph-triangle:before{content:"\\ec4b"}.glyph-truck-filled:before{content:"\\ec4c"}.glyph-truck:before{content:"\\ec4d"}.glyph-tulip-filled:before{content:"\\ec4e"}.glyph-tulip:before{content:"\\ec4f"}.glyph-txt-document:before{content:"\\ec50"}.glyph-undo:before{content:"\\ec51"}.glyph-ungroup:before{content:"\\ec52"}.glyph-unlock-filled:before{content:"\\ec53"}.glyph-unlock-plant-filled:before{content:"\\ec54"}.glyph-unlock-plant:before{content:"\\ec55"}.glyph-unlock:before{content:"\\ec56"}.glyph-upload-document-note:before{content:"\\ec57"}.glyph-upload-success:before{content:"\\ec58"}.glyph-upload:before{content:"\\ec59"}.glyph-upper-limit:before{content:"\\ec5a"}.glyph-user-check-filled:before{content:"\\ec5b"}.glyph-user-check:before{content:"\\ec5c"}.glyph-user-filled:before{content:"\\ec5d"}.glyph-user-management-filled:before{content:"\\ec5e"}.glyph-user-management:before{content:"\\ec5f"}.glyph-user-profile-filled:before{content:"\\ec60"}.glyph-user-profile:before{content:"\\ec61"}.glyph-user-settings-filled:before{content:"\\ec62"}.glyph-user-settings:before{content:"\\ec63"}.glyph-user:before{content:"\\ec64"}.glyph-validate:before{content:"\\ec65"}.glyph-vdi-folder:before{content:"\\ec66"}.glyph-version-history:before{content:"\\ec67"}.glyph-video-file-filled:before{content:"\\ec68"}.glyph-video-file:before{content:"\\ec69"}.glyph-warning-filled:before{content:"\\ec6a"}.glyph-warning-rhomb-filled:before{content:"\\ec6b"}.glyph-warning-rhomb:before{content:"\\ec6c"}.glyph-warning:before{content:"\\ec6d"}.glyph-water-bathing:before{content:"\\ec6e"}.glyph-water-fish:before{content:"\\ec6f"}.glyph-water-sunbathing:before{content:"\\ec70"}.glyph-waveform:before{content:"\\ec71"}.glyph-webcam-filled:before{content:"\\ec72"}.glyph-webcam:before{content:"\\ec73"}.glyph-wlan-off:before{content:"\\ec74"}.glyph-wlan-strength-0:before{content:"\\ec75"}.glyph-wlan-strength-1:before{content:"\\ec76"}.glyph-wlan-strength-2:before{content:"\\ec77"}.glyph-wlan-strength-3:before{content:"\\ec78"}.glyph-work-case-filled:before{content:"\\ec79"}.glyph-work-case:before{content:"\\ec7a"}.glyph-x-axis-settings:before{content:"\\ec7b"}.glyph-xls-document:before{content:"\\ec7c"}.glyph-xml-document:before{content:"\\ec7d"}.glyph-y-axis-settings:before{content:"\\ec7e"}.glyph-youtube-filled:before{content:"\\ec7f"}.glyph-youtube:before{content:"\\ec80"}.glyph-zoom-in:before{content:"\\ec81"}.glyph-zoom-out:before{content:"\\ec82"}.glyph-zoom-selection:before{content:"\\ec83"}:host{display:inline-flex;height:1.5rem;width:1.5rem}:host i{color:inherit;transition:color 150ms}:host .svg-container{display:block;position:relative;width:100%;height:100%}:host .svg-container>svg{height:1.5rem;width:1.5rem}:host .svg-container>svg [fill]{fill:var(--theme-color-std-text)}:host .skeleton-box{display:inline-block;height:1em;position:relative;overflow:hidden;background-color:#dddbdd}:host .skeleton-box::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));animation:shimmer 2s infinite;content:""}@keyframes shimmer{100%{transform:translateX(100%)}}:host(.size-12){height:0.75rem;width:0.75rem}:host(.size-12) .svg-container>svg{height:0.75rem;width:0.75rem}:host(.size-16){height:1rem;width:1rem}:host(.size-16) .svg-container>svg{height:1rem;width:1rem}:host(.size-32){height:2rem;width:2rem}:host(.size-32) .svg-container>svg{height:2rem;width:2rem}';const h=class{constructor(t){e(this,t);this.size=undefined;this.color=undefined;this.name=undefined;this.src=undefined;this.svgContent=undefined}connectedCallback(){this.loadIconContent()}async loadIconContent(){this.svgContent=await b(this)}render(){const e={};if(this.color){e["color"]=`var(--theme-${this.color})`}if(this.name&&!this.svgContent){const n=this.name;return t(o,{style:e,class:{["size-12"]:this.size==="12",["size-16"]:this.size==="16",["size-24"]:this.size==="24",["size-32"]:this.size==="32"}},t("i",{class:{glyph:true,[`glyph-${n}`]:true,"glyph-12":this.size==="12","glyph-16":this.size==="16","glyph-24":this.size==="24","glyph-32":this.size==="32"}}))}return t(o,{style:e,class:{["size-12"]:this.size==="12",["size-16"]:this.size==="16",["size-24"]:this.size==="24",["size-32"]:this.size==="32"}},this.svgContent?t("div",{class:"svg-container",innerHTML:this.svgContent}):t("span",{class:"skeleton-box",style:{width:"100%",height:"100%"}}))}static get watchers(){return{src:["loadIconContent"],name:["loadIconContent"]}}};h.style=f;export{h as I};
-//# sourceMappingURL=p-14a21eef.js.map

package/dist/ix-icons/p-14a21eef.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isSvgDataUrl","url","startsWith","parser","parseSVGDataContent","content","window","console","warn","svgDocument","parseFromString","svgElement","querySelector","Error","outerHTML","async","fetchSVG","response","fetch","responseText","text","ok","error","resolveIcon","icon","src","name","iconCss","Icon","connectedCallback","this","loadIconContent","svgContent","render","style","color","iconName","h","Host","class","size","glyph","innerHTML","width","height"],"sources":["./src/components/icon/resolveIcon.ts","./src/components/icon/icon.scss?tag=ix-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["/*\n * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.\n */\n\nimport { Icon } from './icon';\n\nexport const isSvgDataUrl = (url: string) => url.startsWith('data:image/svg+xml');\n\nlet parser = null;\n\nfunction parseSVGDataContent(content: string) {\n  if (typeof window['DOMParser'] === 'undefined') {\n    console.warn('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');\n\n  if (!svgElement) {\n    throw Error('No valid svg data provided');\n  }\n\n  return svgElement.outerHTML;\n}\n\nasync function fetchSVG(url: string) {\n  const response = await fetch(url);\n  const responseText = await response.text();\n\n  if (!response.ok) {\n    console.error(responseText);\n    return '';\n  }\n\n  return responseText;\n}\n\nexport async function resolveIcon(icon: Icon) {\n  const { src, name } = icon;\n\n  if (name) {\n    if (isSvgDataUrl(name)) {\n      return parseSVGDataContent(name);\n    }\n\n    //Fallback return undefined to render web font icon\n    return;\n  }\n\n  if (isSvgDataUrl(src)) {\n    return parseSVGDataContent(src);\n  }\n\n  return fetchSVG(src);\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@import './generated/ix-icons';\n\n:host {\n  display: inline-flex;\n  height: 1.5rem;\n  width: 1.5rem;\n\n  i {\n    color: inherit;\n    transition: color 150ms;\n  }\n\n  .svg-container {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .svg-container > svg {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .svg-container > svg [fill] {\n    fill: var(--theme-color-std-text);\n  }\n\n  .skeleton-box {\n    display: inline-block;\n    height: 1em;\n    position: relative;\n    overflow: hidden;\n    background-color: #dddbdd;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transform: translateX(-100%);\n      background-image: linear-gradient(90deg, rgba(#fff, 0) 0, rgba(#fff, 0.2) 20%, rgba(#fff, 0.5) 60%, rgba(#fff, 0));\n      animation: shimmer 2s infinite;\n      content: '';\n    }\n\n    @keyframes shimmer {\n      100% {\n        transform: translateX(100%);\n      }\n    }\n  }\n}\n\n:host(.size-12) {\n  height: 0.75rem;\n  width: 0.75rem;\n\n  .svg-container > svg {\n    height: 0.75rem;\n    width: 0.75rem;\n  }\n}\n\n:host(.size-16) {\n  height: 1rem;\n  width: 1rem;\n\n  .svg-container > svg {\n    height: 1rem;\n    width: 1rem;\n  }\n}\n\n:host(.size-32) {\n  height: 2rem;\n  width: 2rem;\n\n  .svg-container > svg {\n    height: 2rem;\n    width: 2rem;\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\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveIcon } from './resolveIcon';\n\n@Component({\n  tag: 'ix-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Size of the icon\n   */\n  @Prop() size: '12' | '16' | '24' | '32';\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  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Path to the svg\n   *\n   * @internal\n   */\n  @Prop() src?: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('src')\n  @Watch('name')\n  async loadIconContent() {\n    this.svgContent = await resolveIcon(this);\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    if (this.name && !this.svgContent) {\n      const iconName = this.name;\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          <i\n            class={{\n              'glyph': true,\n              [`glyph-${iconName}`]: true,\n              'glyph-12': this.size === '12',\n              'glyph-16': this.size === '16',\n              'glyph-24': this.size === '24',\n              'glyph-32': this.size === '32',\n            }}\n          ></i>\n        </Host>\n      );\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        {this.svgContent ? (\n          <div class={'svg-container'} innerHTML={this.svgContent}></div>\n        ) : (\n          <span\n            class=\"skeleton-box\"\n            style={{\n              width: '100%',\n              height: '100%',\n            }}\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAMO,MAAMA,EAAgBC,GAAgBA,EAAIC,WAAW,sBAE5D,IAAIC,EAAS,KAEb,SAASC,EAAoBC,GAC3B,UAAWC,OAAO,eAAiB,YAAa,CAC9CC,QAAQC,KAAK,4CACb,M,CAGF,GAAIL,IAAW,KAAM,CACnBA,EAAS,IAAIG,OAAO,Y,CAGtB,MAAMG,EAAcN,EAAOO,gBAAgBL,EAAS,aACpD,MAAMM,EAAaF,EAAYG,cAAc,OAE7C,IAAKD,EAAY,CACf,MAAME,MAAM,6B,CAGd,OAAOF,EAAWG,SACpB,CAEAC,eAAeC,EAASf,GACtB,MAAMgB,QAAiBC,MAAMjB,GAC7B,MAAMkB,QAAqBF,EAASG,OAEpC,IAAKH,EAASI,GAAI,CAChBd,QAAQe,MAAMH,GACd,MAAO,E,CAGT,OAAOA,CACT,CAEOJ,eAAeQ,EAAYC,GAChC,MAAMC,IAAEA,EAAGC,KAAEA,GAASF,EAEtB,GAAIE,EAAM,CACR,GAAI1B,EAAa0B,GAAO,CACtB,OAAOtB,EAAoBsB,E,CAI7B,M,CAGF,GAAI1B,EAAayB,GAAM,CACrB,OAAOrB,EAAoBqB,E,CAG7B,OAAOT,EAASS,EAClB,CC3DA,MAAME,EAAU,s36B,MCiBHC,EAAI,M,mIAyBfC,oBACEC,KAAKC,iB,CAKPhB,wBACEe,KAAKE,iBAAmBT,EAAYO,K,CAGtCG,SACE,MAAMC,EAEF,GAEJ,GAAIJ,KAAKK,MAAO,CACdD,EAAM,SAAW,eAAeJ,KAAKK,Q,CAGvC,GAAIL,KAAKJ,OAASI,KAAKE,WAAY,CACjC,MAAMI,EAAWN,KAAKJ,KACtB,OACEW,EAACC,EAAI,CACHJ,MAAOA,EACPK,MAAO,CACL,CAAC,WAAYT,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,OAG7BH,EAAA,KACEE,MAAO,CACLE,MAAS,KACT,CAAC,SAASL,KAAa,KACvB,WAAYN,KAAKU,OAAS,KAC1B,WAAYV,KAAKU,OAAS,KAC1B,WAAYV,KAAKU,OAAS,KAC1B,WAAYV,KAAKU,OAAS,Q,CAOpC,OACEH,EAACC,EAAI,CACHJ,MAAOA,EACPK,MAAO,CACL,CAAC,WAAYT,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,KAC3B,CAAC,WAAYV,KAAKU,OAAS,OAG5BV,KAAKE,WACJK,EAAA,OAAKE,MAAO,gBAAiBG,UAAWZ,KAAKE,aAE7CK,EAAA,QACEE,MAAM,eACNL,MAAO,CACLS,MAAO,OACPC,OAAQ,U"}

package/dist/ix-icons/p-24f58d37.entry.js

@@ -1,2 +0,0 @@
-export{I as ix_icon}from"./p-14a21eef.js";import"./p-625c25c8.js";
-//# sourceMappingURL=p-24f58d37.entry.js.map