From ebd53e8173ddb2d32507dd97731d82ef4670f65a Mon Sep 17 00:00:00 2001
From: nikec <43032218+niikeec@users.noreply.github.com>
Date: Fri, 13 Oct 2023 01:05:43 +0200
Subject: [PATCH] [ENG-1262] Icon component for sd icons (#1550)

icon component for sd icons
---
 interface/components/Icon.tsx | 13 +++++++++++++
 interface/components/index.ts |  5 +++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 interface/components/Icon.tsx

diff --git a/interface/components/Icon.tsx b/interface/components/Icon.tsx
new file mode 100644
index 000000000..8f87f90db
--- /dev/null
+++ b/interface/components/Icon.tsx
@@ -0,0 +1,13 @@
+import { getIcon, iconNames } from '@sd/assets/util';
+import { HTMLAttributes } from 'react';
+import { useIsDark } from '~/hooks';
+
+interface Props extends HTMLAttributes<HTMLImageElement> {
+	name: keyof typeof iconNames;
+	size?: number;
+}
+
+export const Icon = ({ name, size, ...props }: Props) => {
+	const isDark = useIsDark();
+	return <img src={getIcon(name, isDark)} width={size} height={size} {...props} />;
+};
diff --git a/interface/components/index.ts b/interface/components/index.ts
index 69be0ff7b..fa9e8ce8a 100644
--- a/interface/components/index.ts
+++ b/interface/components/index.ts
@@ -5,9 +5,10 @@ export * from './DismissibleNotice';
 export * from './DragRegion';
 export * from './Folder';
 export * from './GridList';
+export * from './Icon';
+export * from './Loader';
 export * from './PDFViewer';
-export * from './TextViewer';
 export * from './PasswordMeter';
 export * from './SubtleButton';
+export * from './TextViewer';
 export * from './TrafficLights';
-export * from './Loader';