feat: icon component TET-648

src/components/Icon/Icon.props.ts

@@ -0,0 +1,10 @@
+// import type { SVGAttributes } from 'react';
+import { IconName } from '@virtuslab/tetrisly-icons';
+
+import type { BaseProps } from '@/types/BaseProps';
+
+export type IconProps = {
+  name: IconName;
+  color?: BaseProps['color'];
+  custom?: BaseProps;
+};

src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { icons } from '@virtuslab/tetrisly-icons';
+
+import { Icon } from './Icon';
+
+import { TetDocs } from '@/docs-components/TetDocs';
+
+const meta = {
+  title: 'Foundations / Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  args: {
+    name: '20-tetrisly',
+    color: '$color-raspberry-0',
+  },
+  argTypes: {
+    name: {
+      options: Object.keys(icons),
+      defaultValue: undefined,
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A clean, consistent, and pixel-perfect icon library crafted especially for modern UI design.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/foundations/overview/icons" />
+      ),
+    },
+  },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/components/Icon/Icon.test.tsx

@@ -0,0 +1,22 @@
+import { Icon } from './Icon';
+import { render } from '../../tests/render';
+
+const getIcon = (jsx: JSX.Element) => {
+  const { getByTestId } = render(jsx);
+
+  return getByTestId('icon');
+};
+
+describe('Loader', () => {
+  it('should render the component', () => {
+    const icon = getIcon(<Icon name="20-tetrisly" />);
+
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('should render star with $color-raspberry-0 color', () => {
+    const icon = getIcon(<Icon name="20-star" color="$color-raspberry-0" />);
+
+    expect(icon).toHaveStyle('color: rgb(192, 48, 96);');
+  });
+});

src/components/Icon/Icon.tsx

@@ -0,0 +1,15 @@
+import { Icon as SVGIcon } from '@virtuslab/tetrisly-icons';
+import { styled, system } from '@xstyled/styled-components';
+import { FC } from 'react';
+
+import type { IconProps } from './Icon.props';
+
+import type { MarginProps } from '@/types/MarginProps';
+
+const SVG = styled(SVGIcon)`
+  ${system}
+`;
+
+export const Icon: FC<IconProps & MarginProps> = ({ custom, ...rest }) => (
+  <SVG data-testid="icon" {...rest} {...custom} />
+);

src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export type { IconProps } from './Icon.props';