@siemens/ix-icons 1.2.0 → 2.0.0

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

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from '@stencil/core';
-import { question } from './question';
+import { iconMissingSymbol } from './icons';
 import { parseSVGDataContent, resolveIcon } from './resolveIcon';
 export class Icon {
   constructor() {
@@ -24,7 +24,7 @@ export class Icon {
       this.svgContent = await resolveIcon(this);
     }
     catch (error) {
-      this.svgContent = parseSVGDataContent(question);
+      this.svgContent = parseSVGDataContent(iconMissingSymbol);
     }
   }
   render() {
@@ -32,22 +32,6 @@ export class Icon {
     if (this.color) {
       style['color'] = `var(--theme-${this.color})`;
     }
-    if (this.name && !this.svgContent) {
-      const iconName = this.name;
-      return (h(Host, { style: style, class: {
-          ['size-12']: this.size === '12',
-          ['size-16']: this.size === '16',
-          ['size-24']: this.size === '24',
-          ['size-32']: this.size === '32',
-        } }, h("i", { class: {
-          'glyph': true,
-          [`glyph-${iconName}`]: true,
-          'glyph-12': this.size === '12',
-          'glyph-16': this.size === '16',
-          'glyph-24': this.size === '24',
-          'glyph-32': this.size === '32',
-        } })));
-    }
     return (h(Host, { style: style, class: {
         ['size-12']: this.size === '12',
         ['size-16']: this.size === '16',
@@ -107,9 +91,14 @@ export class Icon {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IxIcons",
+          "resolved": "\"log\" | \"screenshot\" | \"filter\" | \"map\" | \"info\" | \"error\" | \"success\" | \"copy\" | \"document\" | \"code\" | \"details\" | \"label\" | \"link\" | \"script\" | \"table\" | \"circle\" | \"ellipse\" | \"image\" | \"polygon\" | \"stop\" | \"text\" | \"download\" | \"about\" | \"replace\" | \"import\" | \"history\" | \"location\" | \"screen\" | \"close\" | \"print\" | (string & {}) | \"about-filled\" | \"add-application\" | \"add-circle-filled\" | \"add-circle\" | \"add-document-note\" | \"add-eye-filled\" | \"add-eye\" | \"add-task-list\" | \"add-task\" | \"add-user-filled\" | \"add-user\" | \"add\" | \"ai\" | \"alarm-bell-cancelled-filled\" | \"alarm-bell-cancelled\" | \"alarm-bell-filled\" | \"alarm-bell\" | \"alarm-clock-filled\" | \"alarm-clock\" | \"alarm-filled\" | \"alarm\" | \"analyze\" | \"anomaly-found\" | \"anomaly\" | \"app-menu\" | \"application-screen\" | \"applications\" | \"apps\" | \"arrow-down-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right-down\" | \"arrow-right\" | \"arrow-up\" | \"attach\" | \"attachment-upload\" | \"audio-description1\" | \"audio-description2\" | \"audit-report\" | \"average\" | \"backup-filled\" | \"backup\" | \"bar-code\" | \"barchart\" | \"battery-check\" | \"battery-empty-question\" | \"battery-empty\" | \"battery-exclamation\" | \"battery-full-check\" | \"battery-full\" | \"battery-half\" | \"battery-low\" | \"battery-quarter\" | \"battery-slash\" | \"battery-three-quarter\" | \"battery-xmark\" | \"bezier-curve\" | \"binoculars-filled\" | \"binoculars\" | \"blazor\" | \"book\" | \"bookmark-filled\" | \"bookmark\" | \"boundary-signals\" | \"building1-filled\" | \"building1\" | \"building2-filled\" | \"building2\" | \"bulb-filled\" | \"bulb\" | \"calendar-filled\" | \"calendar-settings\" | \"calendar\" | \"cancel\" | \"cancelled\" | \"capacity-filled\" | \"capacity\" | \"capture\" | \"car-filled\" | \"car\" | \"card-layout-filled\" | \"card-layout\" | \"certificate-error-filled\" | \"certificate-error\" | \"certificate-exclamation-filled\" | \"certificate-exclamation\" | \"certificate-success-filled\" | \"certificate-success\" | \"chart-cursor\" | \"chart-curve-linear\" | \"chart-curve-spline\" | \"chart-curve-stepped\" | \"chart-diagram-add\" | \"chart-diagram\" | \"chart-diagrams\" | \"chart-labels-filled\" | \"chart-labels\" | \"check-in\" | \"check-out\" | \"checkbox-component-checked\" | \"checkbox-component-mixed\" | \"checkbox-component-unchecked\" | \"checkbox-filled\" | \"checkbox\" | \"checkboxes-filled\" | \"checkboxes\" | \"chevron-down-small\" | \"chevron-down\" | \"chevron-left-small\" | \"chevron-left\" | \"chevron-right-small\" | \"chevron-right\" | \"chevron-up-small\" | \"chevron-up\" | \"circle-dot-filled\" | \"circle-dot\" | \"circle-filled\" | \"circle-pause-filled\" | \"circle-pause\" | \"circle-play-filled\" | \"circle-play\" | \"circle-stop-filled\" | \"circle-stop\" | \"clear-filter-filled\" | \"clear-filter\" | \"clear\" | \"clock-filled\" | \"clock\" | \"close-small\" | \"cloud-download-add-filled\" | \"cloud-download-add\" | \"cloud-download-filled\" | \"cloud-download-list-filled\" | \"cloud-download-list\" | \"cloud-download\" | \"cloud-filled\" | \"cloud-new-filled\" | \"cloud-new\" | \"cloud-success-filled\" | \"cloud-success\" | \"cloud-upload-filled\" | \"cloud-upload\" | \"cloud\" | \"coffee-empty-filled\" | \"coffee-empty\" | \"coffee-filled\" | \"coffee\" | \"cogwheel-filled\" | \"cogwheel\" | \"combine\" | \"compact-disc-filled\" | \"compact-disc\" | \"compound-block\" | \"configuration\" | \"configure-filled\" | \"configure\" | \"connected\" | \"connector-chart-filled\" | \"connector-chart\" | \"connector-filled\" | \"connector-hex-filled\" | \"connector-hex\" | \"connector-rect-filled\" | \"connector-rect\" | \"connector-rhomb-filled\" | \"connector-rhomb\" | \"connector\" | \"consistency-check\" | \"contact-details-filled\" | \"contact-details\" | \"context-menu\" | \"controlled-device\" | \"controller-device\" | \"corner-arrow-up-left\" | \"couch-filled\" | \"couch\" | \"create-plant-filled\" | \"create-plant\" | \"cut\" | \"cycle\" | \"data-egress\" | \"data-ingress-egress\" | \"data-ingress\" | \"database-filled\" | \"database\" | \"diagram-module-library\" | \"diagram-module-new\" | \"diagram-module\" | \"diamond\" | \"disconnected\" | \"disk-filled\" | \"disk-pen\" | \"disk\" | \"distribution\" | \"doc-document\" | \"document-bulk\" | \"document-info\" | \"document-link\" | \"document-management\" | \"document-reference\" | \"document-settings\" | \"document-success\" | \"double-check\" | \"double-chevron-down\" | \"double-chevron-left\" | \"double-chevron-right\" | \"double-chevron-up\" | \"doublet-filled\" | \"doublet\" | \"download-add\" | \"download-list\" | \"drop\" | \"duplicate-document\" | \"duplicate\" | \"e-mail-filled\" | \"e-mail\" | \"earth-filled\" | \"earth\" | \"edit-plant\" | \"electrical-energy-filled\" | \"electrical-energy\" | \"ellipse-arc\" | \"ellipse-filled\" | \"error-filled\" | \"explore-filled\" | \"explore\" | \"export\" | \"eye-cancelled-filled\" | \"eye-cancelled\" | \"eye-filled\" | \"eye\" | \"factory-reset-filled\" | \"factory-reset\" | \"filter-filled\" | \"filter-outline\" | \"flag-filled\" | \"flag\" | \"folder-down-filled\" | \"folder-down\" | \"folder-filled\" | \"folder-new-filled\" | \"folder-new-outline\" | \"folder-new\" | \"folder-open-filled\" | \"folder-open-outline\" | \"folder-open\" | \"folder-outline\" | \"folder-up-filled\" | \"folder-up\" | \"folder\" | \"full-screeen-exit\" | \"full-screeen\" | \"function-block-library\" | \"function-block-new\" | \"function-block\" | \"function-diagram-new\" | \"function-diagram\" | \"gauge-filled\" | \"gauge\" | \"gaugechart\" | \"global-plant-filled\" | \"global-plant\" | \"globe-filled\" | \"globe\" | \"goto\" | \"group\" | \"hard-reset\" | \"hardware-cabinet\" | \"health-filled\" | \"health\" | \"heart-filled\" | \"heart\" | \"hexagon-vertical-bars-database-filled\" | \"hexagon-vertical-bars-database\" | \"hexagon-vertical-bars-filled\" | \"hexagon-vertical-bars\" | \"hierarchy\" | \"highlight-filled\" | \"highlight\" | \"history-list\" | \"home-filled\" | \"home\" | \"hourglass\" | \"image-filled\" | \"info-feed\" | \"info-filled\" | \"ingestion-report\" | \"ingestion\" | \"ink-pen\" | \"inquiry-filled\" | \"inquiry-mail\" | \"inquiry\" | \"item-details-filled\" | \"item-details\" | \"label-filled\" | \"language-filled\" | \"language\" | \"layers-filled\" | \"layers\" | \"leaf\" | \"legal\" | \"library-new\" | \"library\" | \"license\" | \"light-dark\" | \"line-diagonal\" | \"list\" | \"live-schedule\" | \"location-filled\" | \"location-outline\" | \"lock-filled\" | \"lock-key-filled\" | \"lock-key\" | \"lock\" | \"log-in\" | \"log-out\" | \"logic-diagram\" | \"lower-limit\" | \"mail-filled\" | \"mail\" | \"maintenance-documents\" | \"maintenance-info\" | \"maintenance-warning-filled\" | \"maintenance-warning\" | \"maintenance\" | \"mandatory-done\" | \"mandatory\" | \"maximize\" | \"microphone-filled\" | \"microphone\" | \"minimize\" | \"minus\" | \"missing-symbol\" | \"mix\" | \"monitor-filled\" | \"monitor-trend\" | \"monitor\" | \"monitoring-add\" | \"monitoring\" | \"monitorings\" | \"moon-filled\" | \"moon\" | \"more-menu\" | \"mouse-click-filled\" | \"mouse-click\" | \"mouse-select-filled\" | \"mouse-select\" | \"mp4-document\" | \"namur-check-function-filled\" | \"namur-check-function\" | \"namur-failure-filled\" | \"namur-failure\" | \"namur-maintenance-required-filled\" | \"namur-maintenance-required\" | \"namur-ok-filled\" | \"namur-ok\" | \"namur-out-of-spec-filled\" | \"namur-out-of-spec\" | \"navigation-filled\" | \"navigation-left\" | \"navigation-right\" | \"navigation\" | \"new-indicator-filled\" | \"new-indicator\" | \"no-filter-filled\" | \"no-filter\" | \"no-image\" | \"note-filled\" | \"note\" | \"notification-filled\" | \"notification\" | \"notifications-filled\" | \"notifications\" | \"ontology-filled\" | \"ontology\" | \"open-external\" | \"open-file-filled\" | \"open-file\" | \"operate-plant-filled\" | \"operate-plant\" | \"optimize\" | \"p-and-i-symbols\" | \"p-i-diagram\" | \"pan\" | \"paste\" | \"pause\" | \"pc-tower-filled\" | \"pc-tower\" | \"pdf-document\" | \"pen-filled\" | \"pen\" | \"phone-filled\" | \"phone\" | \"photo-camera-add\" | \"photo-camera-cancelled-filled\" | \"photo-camera-cancelled\" | \"photo-camera-filled\" | \"photo-camera\" | \"photo-cameras\" | \"piechart-filled\" | \"piechart\" | \"pin-filled\" | \"pin\" | \"plant-filled\" | \"plant-handbook-filled\" | \"plant-handbook\" | \"plant-outline\" | \"plant-security\" | \"plant-settings-filled\" | \"plant-settings\" | \"plant-user-filled\" | \"plant-user\" | \"plant\" | \"plants-filled\" | \"plants\" | \"play-filled\" | \"play-pause-filled\" | \"play-pause\" | \"play-stepwise-filled\" | \"play-stepwise\" | \"play\" | \"plus-minus-times-divide\" | \"plus\" | \"point-up-filled\" | \"point-up\" | \"polar-plot\" | \"polygon-filled\" | \"polygon-line\" | \"ppt-document\" | \"print-filled\" | \"prio-high\" | \"prio-low\" | \"prio-middle\" | \"product-catalog\" | \"product-management\" | \"product\" | \"project-configuration\" | \"project-new\" | \"project-scenarios\" | \"project-server-filled\" | \"project-server\" | \"project\" | \"protocol\" | \"publish-document\" | \"publish\" | \"qr-code\" | \"quality-report\" | \"question-filled\" | \"question\" | \"radarchart\" | \"radio-waves-off\" | \"radio-waves\" | \"random-filled\" | \"random\" | \"reboot\" | \"rectangle-filled\" | \"rectangle\" | \"redo\" | \"reference\" | \"refresh-cancelled\" | \"refresh\" | \"reload\" | \"remove-application\" | \"remove-eye-filled\" | \"remove-eye\" | \"rename\" | \"report-barchart\" | \"report-linechart\" | \"report-text\" | \"reset\" | \"restore-backup-filled\" | \"restore-backup-pc\" | \"restore-backup\" | \"rhomb-filled\" | \"rhomb\" | \"road-filled\" | \"road\" | \"rocket-filled\" | \"rocket\" | \"route-target\" | \"route\" | \"scatterplot\" | \"scheduler-filled\" | \"scheduler\" | \"screen-filled\" | \"screenshot-filled\" | \"script-add\" | \"scripts\" | \"search\" | \"share-filled\" | \"share\" | \"shopping-cart-filled\" | \"shopping-cart\" | \"shout-filled\" | \"shout\" | \"sign-language\" | \"signal-strength-0\" | \"signal-strength-1\" | \"signal-strength-2\" | \"signal-strength-3\" | \"signal-strength-4\" | \"signal-strength-5\" | \"signal-strength-6\" | \"signal-strength-7\" | \"signal-strength-8\" | \"simit-component\" | \"simit-macro-component-editor\" | \"simit-macro\" | \"single-check\" | \"skip-back-filled\" | \"skip-back\" | \"skip-filled\" | \"skip\" | \"snowflake\" | \"sort-ascending\" | \"sort-descending\" | \"sort\" | \"sound-loud-filled\" | \"sound-loud\" | \"sound-mute-filled\" | \"sound-mute\" | \"sound-off-filled\" | \"sound-off\" | \"sound-quiet-filled\" | \"sound-quiet\" | \"spatial\" | \"split-horizontally\" | \"split-vertically\" | \"stamp-filled\" | \"stamp\" | \"standby\" | \"star-add-filled\" | \"star-add\" | \"star-cancelled-filled\" | \"star-cancelled\" | \"star-filled\" | \"star-list-filled\" | \"star-list\" | \"star\" | \"start-data-analysis\" | \"steering-user-filled\" | \"steering-user\" | \"steering\" | \"stethoscope\" | \"stop-filled\" | \"success-filled\" | \"sun-filled\" | \"sun\" | \"support\" | \"surveillance-cancelled-filled\" | \"surveillance-cancelled\" | \"surveillance-filled\" | \"surveillance\" | \"svg-document\" | \"swap-left-right\" | \"switch-slider\" | \"table-columns\" | \"table-rows\" | \"table-settings\" | \"tag-filled\" | \"tag-plus-filled\" | \"tag-plus\" | \"tag\" | \"tasks-all\" | \"tasks-done\" | \"tasks-open\" | \"text-circle-rectangle-filled\" | \"text-circle-rectangle\" | \"text-document\" | \"threshold-cancelled\" | \"threshold-off\" | \"threshold-on\" | \"to-be-published\" | \"to-search\" | \"topic-filled\" | \"topic\" | \"touch-filled\" | \"touch\" | \"trashcan-filled\" | \"trashcan\" | \"tree\" | \"trend\" | \"triangle-filled\" | \"triangle\" | \"truck-filled\" | \"truck\" | \"tulip-filled\" | \"tulip\" | \"txt-document\" | \"undo\" | \"ungroup\" | \"unlock-filled\" | \"unlock-plant-filled\" | \"unlock-plant\" | \"unlock\" | \"upload-document-note\" | \"upload-success\" | \"upload\" | \"upper-limit\" | \"user-check-filled\" | \"user-check\" | \"user-filled\" | \"user-management-filled\" | \"user-management\" | \"user-profile-filled\" | \"user-profile\" | \"user-reading-reading\" | \"user-reading\" | \"user-settings-filled\" | \"user-settings\" | \"user\" | \"validate\" | \"vdi-folder\" | \"version-history\" | \"video-file-filled\" | \"video-file\" | \"warning-filled\" | \"warning-rhomb-filled\" | \"warning-rhomb\" | \"warning\" | \"water-bathing\" | \"water-fish\" | \"water-sunbathing\" | \"waveform\" | \"webcam-cancelled-filled\" | \"webcam-cancelled\" | \"webcam-filled\" | \"webcam\" | \"wlan-off\" | \"wlan-strength-0\" | \"wlan-strength-1\" | \"wlan-strength-2\" | \"wlan-strength-3\" | \"work-case-filled\" | \"work-case\" | \"workspace\" | \"workspaces\" | \"x-axis-settings\" | \"xls-document\" | \"xml-document\" | \"y-axis-settings\" | \"youtube-filled\" | \"youtube\" | \"zoom-in\" | \"zoom-out\" | \"zoom-selection\"",
+          "references": {
+            "IxIcons": {
+              "location": "import",
+              "path": "./icons"
+            }
+          }
         },
         "required": false,
         "optional": 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;AACH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,IAAI;;;;;;;EA4Bf,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAGD,KAAK,CAAC,eAAe;IACnB,IAAI;MACF,IAAI,CAAC,UAAU,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;KAC3C;IAAC,OAAO,KAAK,EAAE;MACd,IAAI,CAAC,UAAU,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;KACjD;EACH,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;MAED,WAAK,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,CAC1D,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 */\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { question } from './question';\nimport { parseSVGDataContent, 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() name: string;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('name')\n  async loadIconContent() {\n    try {\n      this.svgContent = await resolveIcon(this);\n    } catch (error) {\n      this.svgContent = parseSVGDataContent(question);\n    }\n  }\n\n  render() {\n    const style: {\n      [key: string]: string;\n    } = {};\n\n    if (this.color) {\n      style['color'] = `var(--theme-${this.color})`;\n    }\n\n    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        <div class={'svg-container'} innerHTML={this.svgContent}></div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,IAAI;;;;;;;EA4Bf,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAGD,KAAK,CAAC,eAAe;IACnB,IAAI;MACF,IAAI,CAAC,UAAU,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;KAC3C;IAAC,OAAO,KAAK,EAAE;MACd,IAAI,CAAC,UAAU,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;KAC1D;EACH,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,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;MAED,WAAK,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,CAC1D,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 */\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { IxIcons } from './icons';\nimport { iconMissingSymbol } from './icons';\nimport { parseSVGDataContent, 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() name: IxIcons;\n\n  @State() svgContent?: string;\n\n  connectedCallback() {\n    this.loadIconContent();\n  }\n\n  @Watch('name')\n  async loadIconContent() {\n    try {\n      this.svgContent = await resolveIcon(this);\n    } catch (error) {\n      this.svgContent = parseSVGDataContent(iconMissingSymbol);\n    }\n  }\n\n  render() {\n    const style: {\n      [key: string]: string;\n    } = {};\n\n    if (this.color) {\n      style['color'] = `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        style={style}\n        class={{\n          ['size-12']: this.size === '12',\n          ['size-16']: this.size === '16',\n          ['size-24']: this.size === '24',\n          ['size-32']: this.size === '32',\n        }}\n      >\n        <div class={'svg-container'} innerHTML={this.svgContent}></div>\n      </Host>\n    );\n  }\n}\n"]}