update Tokens > Icons to latest iconset

element-hq · Nov 9, 2023 · 1198129 · 1198129
1 parent 806f9d6
commit 1198129
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git 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
@@ -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>
+}
diff --git 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>