Merge pull request #22 from Commencis/feature/icons

feat: add icon component and implementations

Author: ymehmetcan

.changeset/five-keys-rush.md

@@ -0,0 +1,5 @@
+---
+'@commencis/starter-react-vite': minor
+---
+
+feature: `<Icon />` component and implementations

.changeset/olive-kings-fold.md

@@ -0,0 +1,5 @@
+---
+'@commencis/starter-react-vite': patch
+---
+
+fix: ImportMeta types

src/assets/icons/chevron-down.svg

@@ -0,0 +1,29 @@
+import { ReactElement, Suspense, useMemo } from 'react';
+
+import { SVGComponentProps } from '@/types';
+
+import { IconName } from './Icon.types';
+import { lazyLoadIcon } from './Icon.utils';
+
+export type IconProps = {
+  name: IconName;
+  color?: string;
+} & Omit<SVGComponentProps, 'fill'>;
+
+export function Icon({
+  name,
+  color,
+  width = '32px',
+  height = '32px',
+  ...props
+}: IconProps): ReactElement {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { ref: _, ...svgProps } = props;
+  const IconComponent = useMemo(() => lazyLoadIcon(name), [name]);
+
+  return (
+    <Suspense fallback={null}>
+      <IconComponent width={width} height={height} fill={color} {...svgProps} />
+    </Suspense>
+  );
+}

src/assets/icons/chevron-left.svg

@@ -0,0 +1,5 @@
+export type IconName =
+  | 'chevron-right'
+  | 'chevron-left'
+  | 'chevron-up'
+  | 'chevron-down';

src/assets/icons/chevron-right.svg

@@ -0,0 +1,13 @@
+import { type FunctionComponent, lazy, type LazyExoticComponent } from 'react';
+
+import { SVGComponentProps } from '@/types';
+
+import { IconName } from './Icon.types';
+
+export type LazyLoadIconReturnType = LazyExoticComponent<
+  FunctionComponent<SVGComponentProps>
+>;
+
+export function lazyLoadIcon(name: IconName): LazyLoadIconReturnType {
+  return lazy(() => import(`@/assets/icons/${name}.svg`));
+}

src/assets/icons/chevron-up.svg

@@ -0,0 +1,2 @@
+export * from './Icon/Icon';
+export * from './Icon/Icon.types';