docs: refactor remaining icons to use import syntax

siemens · Feb 27, 2025 · 39e98f9 · 39e98f9
1 parent 8f9a26b
commit 39e98f9
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -8,14 +8,15 @@
  */
 
 import { IxIcon, IxInputGroup } from '@siemens/ix-react';
+import { iconAbout } from '@siemens/ix-icons/icons';
 
 export default () => {
   return (
     <form className="needs-validation">
       <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
@@ -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
@@ -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
@@ -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
@@ -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>