From 39e98f92b61cfbdd5d70f8837abdf82049da3112 Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Thu, 27 Feb 2025 10:17:03 +0100
Subject: [PATCH] docs: refactor remaining icons to use import syntax

---
 .../src/components/Tags/index.tsx             |  3 ++-
 .../src/preview-examples/card.tsx             |  3 ++-
 .../date-input-with-slots.tsx                 |  3 ++-
 .../src/preview-examples/flip-tile.tsx        | 11 +++++-----
 .../preview-examples/input-legacy-search.tsx  |  5 +++--
 .../input-legacy-with-icon.tsx                |  3 ++-
 .../src/preview-examples/input-with-slots.tsx |  3 ++-
 .../number-input-with-slots.tsx               |  3 ++-
 .../src/preview-examples/tabs-rounded.tsx     | 20 +++++++++++++------
 .../src/preview-examples/tile.tsx             | 13 ++++--------
 10 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/packages/documentation/src/components/Tags/index.tsx b/packages/documentation/src/components/Tags/index.tsx
index 6a3f1b6a703..18f508cf5c0 100644
--- a/packages/documentation/src/components/Tags/index.tsx
+++ b/packages/documentation/src/components/Tags/index.tsx
@@ -1,5 +1,6 @@
 import './LegacyTag.css';
 import { IxIcon } from '@siemens/ix-react';
+import { iconOpenExternal } from '@siemens/ix-icons/icons';
 
 export default function LegacyTag(
   props: Readonly<{
@@ -17,7 +18,7 @@ export default function LegacyTag(
         </span>
       )}
       <a href={props.url} target="_blank" className="TagContainer">
-        <IxIcon name="open-external" color="color-primary" size="16"></IxIcon>
+        <IxIcon name={iconOpenExternal} color="color-primary" size="16"></IxIcon>
         {props.hasDeprecatedAncestor
           ? 'Show deprecated ' + (props.ancestorName || 'version')
           : 'Show latest version'}
diff --git a/packages/react-test-app/src/preview-examples/card.tsx b/packages/react-test-app/src/preview-examples/card.tsx
index 146fbeec0e7..8ceef662bf4 100644
--- a/packages/react-test-app/src/preview-examples/card.tsx
+++ b/packages/react-test-app/src/preview-examples/card.tsx
@@ -10,12 +10,13 @@
 import './card.scoped.css';
 
 import { IxCard, IxCardContent, IxIcon, IxTypography } from '@siemens/ix-react';
+import { iconCapacity } from '@siemens/ix-icons/icons';
 
 export default () => {
   return (
     <IxCard variant="outline" onClick={console.log}>
       <IxCardContent>
-        <IxIcon name="capacity"></IxIcon>
+        <IxIcon name={iconCapacity}></IxIcon>
         <IxTypography bold>Number of components</IxTypography>
         <IxTypography>
           Vanilla JavaScript
diff --git a/packages/react-test-app/src/preview-examples/date-input-with-slots.tsx b/packages/react-test-app/src/preview-examples/date-input-with-slots.tsx
index 61d878a91b2..82e9b406ccf 100644
--- a/packages/react-test-app/src/preview-examples/date-input-with-slots.tsx
+++ b/packages/react-test-app/src/preview-examples/date-input-with-slots.tsx
@@ -8,11 +8,12 @@
  */
 
 import { IxDateInput, IxIcon, IxTypography } from '@siemens/ix-react';
+import { iconBulb } from '@siemens/ix-icons/icons';
 
 export default () => {
   return (
     <IxDateInput value="1970/01/01">
-      <IxIcon name="bulb" slot="start" size="16"></IxIcon>
+      <IxIcon name={iconBulb} slot="start" size="16"></IxIcon>
       <IxTypography slot="end">Slot</IxTypography>
     </IxDateInput>
   );
diff --git a/packages/react-test-app/src/preview-examples/flip-tile.tsx b/packages/react-test-app/src/preview-examples/flip-tile.tsx
index fa9e55ed673..cc10ed7baaa 100644
--- a/packages/react-test-app/src/preview-examples/flip-tile.tsx
+++ b/packages/react-test-app/src/preview-examples/flip-tile.tsx
@@ -11,6 +11,7 @@ import './flip-tile.scoped.css';
 
 import { FlipTileState } from '@siemens/ix';
 import { IxFlipTile, IxFlipTileContent, IxIcon } from '@siemens/ix-react';
+import { iconInfo } from '@siemens/ix-icons/icons';
 
 export default () => {
   return (
@@ -21,7 +22,7 @@ export default () => {
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div className="footer-date">
-            <IxIcon name="info" size="16"></IxIcon>2021-06-22
+            <IxIcon name={iconInfo} size="16"></IxIcon>2021-06-22
           </div>
         </div>
 
@@ -34,7 +35,7 @@ export default () => {
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div className="footer-date">
-            <IxIcon name="info" size="16"></IxIcon>2021-06-22
+            <IxIcon name={iconInfo} size="16"></IxIcon>2021-06-22
           </div>
         </div>
         <IxFlipTileContent> Example 1 </IxFlipTileContent>
@@ -46,7 +47,7 @@ export default () => {
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div className="footer-date">
-            <IxIcon name="info" size="16"></IxIcon>2021-06-22
+            <IxIcon name={iconInfo} size="16"></IxIcon>2021-06-22
           </div>
         </div>
         <IxFlipTileContent> Example 1 </IxFlipTileContent>
@@ -58,7 +59,7 @@ export default () => {
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div className="footer-date">
-            <IxIcon name="info" size="16"></IxIcon>2021-06-22
+            <IxIcon name={iconInfo} size="16"></IxIcon>2021-06-22
           </div>
         </div>
         <IxFlipTileContent> Example 1 </IxFlipTileContent>
@@ -70,7 +71,7 @@ export default () => {
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div className="footer-date">
-            <IxIcon name="info" size="16"></IxIcon>2021-06-22
+            <IxIcon name={iconInfo} size="16"></IxIcon>2021-06-22
           </div>
         </div>
         <IxFlipTileContent> Example 1 </IxFlipTileContent>
diff --git a/packages/react-test-app/src/preview-examples/input-legacy-search.tsx b/packages/react-test-app/src/preview-examples/input-legacy-search.tsx
index 947fbb6ddb5..feb56c30958 100644
--- a/packages/react-test-app/src/preview-examples/input-legacy-search.tsx
+++ b/packages/react-test-app/src/preview-examples/input-legacy-search.tsx
@@ -7,8 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { IxIcon, IxIconButton, IxInputGroup } from '@siemens/ix-react';
 import { useState } from 'react';
+import { IxIcon, IxIconButton, IxInputGroup } from '@siemens/ix-react';
+import { iconSearch } from '@siemens/ix-icons/icons';
 
 export default () => {
   const [message, setMessage] = useState('');
@@ -29,7 +30,7 @@ export default () => {
     <form className="needs-validation">
       <IxInputGroup>
         <span slot="input-start">
-          <IxIcon name="search" size="16"></IxIcon>
+          <IxIcon name={iconSearch} size="16"></IxIcon>
         </span>
         <input
           id="input-string"
diff --git a/packages/react-test-app/src/preview-examples/input-legacy-with-icon.tsx b/packages/react-test-app/src/preview-examples/input-legacy-with-icon.tsx
index bd94118576e..f74bef232ce 100644
--- a/packages/react-test-app/src/preview-examples/input-legacy-with-icon.tsx
+++ b/packages/react-test-app/src/preview-examples/input-legacy-with-icon.tsx
@@ -8,6 +8,7 @@
  */
 
 import { IxIcon, IxInputGroup } from '@siemens/ix-react';
+import { iconAbout } from '@siemens/ix-icons/icons';
 
 export default () => {
   return (
@@ -15,7 +16,7 @@ export default () => {
       <IxInputGroup>
         <input type="text" />
         <span slot="input-end">
-          <IxIcon name="about" size="16"></IxIcon>
+          <IxIcon name={iconAbout} size="16"></IxIcon>
         </span>
       </IxInputGroup>
     </form>
diff --git a/packages/react-test-app/src/preview-examples/input-with-slots.tsx b/packages/react-test-app/src/preview-examples/input-with-slots.tsx
index 29f9f002445..ed636145704 100644
--- a/packages/react-test-app/src/preview-examples/input-with-slots.tsx
+++ b/packages/react-test-app/src/preview-examples/input-with-slots.tsx
@@ -8,11 +8,12 @@
  */
 
 import { IxIcon, IxInput, IxTypography } from '@siemens/ix-react';
+import { iconBulb } from '@siemens/ix-icons/icons';
 
 export default () => {
   return (
     <IxInput>
-      <IxIcon name="bulb" slot="start" size="16"></IxIcon>
+      <IxIcon name={iconBulb} slot="start" size="16"></IxIcon>
       <IxTypography slot="end">unit</IxTypography>
     </IxInput>
   );
diff --git a/packages/react-test-app/src/preview-examples/number-input-with-slots.tsx b/packages/react-test-app/src/preview-examples/number-input-with-slots.tsx
index dc63253fdd2..05db5e0cbf1 100644
--- a/packages/react-test-app/src/preview-examples/number-input-with-slots.tsx
+++ b/packages/react-test-app/src/preview-examples/number-input-with-slots.tsx
@@ -8,11 +8,12 @@
  */
 
 import { IxIcon, IxNumberInput, IxTypography } from '@siemens/ix-react';
+import { iconBulb } from '@siemens/ix-icons/icons';
 
 export default () => {
   return (
     <IxNumberInput>
-      <IxIcon name="bulb" slot="start" size="16"></IxIcon>
+      <IxIcon name={iconBulb} slot="start" size="16"></IxIcon>
       <IxTypography slot="end">unit</IxTypography>
     </IxNumberInput>
   );
diff --git a/packages/react-test-app/src/preview-examples/tabs-rounded.tsx b/packages/react-test-app/src/preview-examples/tabs-rounded.tsx
index 8135b93aa7b..bcfcca4a7cd 100644
--- a/packages/react-test-app/src/preview-examples/tabs-rounded.tsx
+++ b/packages/react-test-app/src/preview-examples/tabs-rounded.tsx
@@ -8,27 +8,35 @@
  */
 
 import { IxIcon, IxTabItem, IxTabs } from '@siemens/ix-react';
+import {
+  iconCalendarSettings,
+  iconHierarchy,
+  iconMaintenance,
+  iconSoundLoud,
+  iconSuccess,
+  iconTree,
+} from '@siemens/ix-icons/icons';
 
 export default () => {
   return (
     <IxTabs rounded>
       <IxTabItem>
-        <IxIcon name="success"></IxIcon>
+        <IxIcon name={iconSuccess}></IxIcon>
       </IxTabItem>
       <IxTabItem counter={200}>
-        <IxIcon name="tree"></IxIcon>
+        <IxIcon name={iconTree}></IxIcon>
       </IxTabItem>
       <IxTabItem>
-        <IxIcon name="maintenance"></IxIcon>
+        <IxIcon name={iconMaintenance}></IxIcon>
       </IxTabItem>
       <IxTabItem disabled counter={24}>
-        <IxIcon name="sound-loud"></IxIcon>
+        <IxIcon name={iconSoundLoud}></IxIcon>
       </IxTabItem>
       <IxTabItem>
-        <IxIcon name="hierarchy"></IxIcon>
+        <IxIcon name={iconHierarchy}></IxIcon>
       </IxTabItem>
       <IxTabItem disabled>
-        <IxIcon name="calendar-settings"></IxIcon>
+        <IxIcon name={iconCalendarSettings}></IxIcon>
       </IxTabItem>
     </IxTabs>
   );
diff --git a/packages/react-test-app/src/preview-examples/tile.tsx b/packages/react-test-app/src/preview-examples/tile.tsx
index f15fd0a924e..8069bd4caeb 100644
--- a/packages/react-test-app/src/preview-examples/tile.tsx
+++ b/packages/react-test-app/src/preview-examples/tile.tsx
@@ -10,6 +10,7 @@
 import './tile.scoped.css';
 
 import { IxButton, IxIcon, IxIconButton, IxTile } from '@siemens/ix-react';
+import { iconChevronRightSmall } from '@siemens/ix-icons/icons';
 
 export default () => {
   return (
@@ -22,10 +23,7 @@ export default () => {
       </IxTile>
 
       <IxTile size="big">
-        <div
-          className="tile-header"
-          slot="header"
-        >
+        <div className="tile-header" slot="header">
           Tile header
           <IxIconButton ghost icon="context-menu"></IxIconButton>
         </div>
@@ -41,12 +39,9 @@ export default () => {
         >
           <span>92.8 °C</span>
         </div>
-        <div
-          className="tile-footer"
-          slot="footer"
-        >
+        <div className="tile-footer" slot="footer">
           <IxButton ghost slot="footer">
-            <IxIcon name="chevron-right-small"></IxIcon>Details
+            <IxIcon name={iconChevronRightSmall}></IxIcon>Details
           </IxButton>
         </div>
       </IxTile>