feat(components): add Icon component that loads icon from svg sprite

Callenowy · Jan 21, 2024 · 4b8eca5 · 4b8eca5
2 parents 3f647eb + 485830c
commit 4b8eca5
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+
+import { cn } from '@/utils/cn';
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  id: string;
+  sprite?: string;
+}
+
+const Icon = forwardRef<SVGSVGElement, IconProps>(
+  ({ className, id, sprite, ...props }, ref) => {
+    return (
+      <svg viewBox="0 0 64 48" className={cn(className)} ref={ref} {...props}>
+        <use href={`${sprite}#${id}`} />
+      </svg>
+    );
+  }
+);
+
+Icon.displayName = 'Icon';
+
+export { Icon };