From 11981297fa5cdb7182bb77ab106d12163925b984 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Fri, 10 Nov 2023 11:10:00 +1300
Subject: [PATCH] update Tokens > Icons to latest iconset

---
 public/global.css                |  7 ++++++-
 stories/src/utils/Icon.tsx       |  8 ++++++++
 stories/tokens/Icons.stories.mdx | 15 +++------------
 3 files changed, 17 insertions(+), 13 deletions(-)
 create mode 100644 stories/src/utils/Icon.tsx

diff --git a/public/global.css b/public/global.css
index 7263941..0f749eb 100644
--- a/public/global.css
+++ b/public/global.css
@@ -100,10 +100,15 @@ h4 {
   }
 }
 
-.cpdIcon {
+.cpdIconItem {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 16px;
   padding: 8px;
 }
+
+.cpdIcon {
+  height: 32px;
+  width: 32px;
+}
diff --git a/stories/src/utils/Icon.tsx b/stories/src/utils/Icon.tsx
new file mode 100644
index 0000000..c671a8a
--- /dev/null
+++ b/stories/src/utils/Icon.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+
+export const Icon: React.FC<{iconName: string}> = ({ iconName }) => {
+    return <div className="cpdIconItem">
+        <img className="cpdIcon" alt={iconName} src={require(`@vector-im/compound-design-tokens/icons/${iconName}.svg`)}/>
+        <p>{iconName}</p>
+    </div>
+}
\ No newline at end of file
diff --git a/stories/tokens/Icons.stories.mdx b/stories/tokens/Icons.stories.mdx
index 7ae3d9e..edc067f 100644
--- a/stories/tokens/Icons.stories.mdx
+++ b/stories/tokens/Icons.stories.mdx
@@ -2,23 +2,14 @@ import { Meta } from "@storybook/addon-docs";
 
 import icons from "@vector-im/compound-design-tokens/icons/$icons.json";
 
+import { Icon } from "../src/utils/Icon";
+
 <Meta title="Tokens/Icons" />
 
 # Icons
 
 <div className="cpdIconPreview">
   {Object.keys(icons.icon).map((iconName) => (
-    <div className="cpdIcon" key={iconName}>
-      <span
-        style={{
-          width: "24px",
-          height: "24px",
-          display: "block",
-          background: `var(--cpd-icon-${iconName})`,
-          backgroundSize: "contain",
-        }}
-      />
-      {iconName}
-    </div>
+    <Icon iconName={iconName} key={iconName}/>
   ))}
 </div>