Adjust icons usage

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.importModuleSpecifier": "non-relative"
+}

src/app/auth/page.tsx

@@ -1,7 +1,7 @@
 import FormAuth from '@/components/pages/auth/form-auth'
 import ImageCard from '@/components/pages/auth/image-card'
 import Content from '@/components/ui/content'
-import IconGolub from '@/components/ui/icons/IconGolub'
+import { Icons } from '@/components/ui/icons'
 import ThemeToggler from '@/components/ui/index/theme-toggler'
 
 export default function Auth() {
@@ -10,7 +10,7 @@ export default function Auth() {
       <Content className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8">
         <div className="p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] rounded-3xl bg-base-white dark:bg-base-black">
           <ImageCard className="-my-[4.375rem] flex-shrink-0 hidden sm:flex items-center justify-center">
-            <IconGolub />
+            <Icons.golub />
           </ImageCard>
           <div>
             <h1 className="title-lg">Authentication</h1>

src/app/page.tsx

@@ -1,29 +1,7 @@
-import IconChange from '@/components/ui/icons/IconChange'
-import Image from 'next/image'
-
 export default function Home() {
   return (
-    <div className="flex items-baseline gap-5">
-      <div className="flex flex-col items-center">
-        This is Image:{' '}
-        <Image
-          alt="change"
-          className="fill-blue-500"
-          height={24}
-          src="/icons/change.svg"
-          width={24}
-        />
-      </div>
-      <div className="flex flex-col items-center">
-        This is an IconChange component:{' '}
-        <IconChange
-          className="text-base-gray-1 hover:text-bright-orange transition-colors"
-          size="lg"
-        />
-        <p>Hover me!</p>
-      </div>
-      <div>GOLUB</div>
-      <div>🚀</div>
+    <div className="w-full h-screen flex items-center justify-center text-3xl">
+      GOLUB 🚀
     </div>
   )
 }

src/components/ui/checkbox.tsx

@@ -1,11 +1,10 @@
 'use client'
 
+import { Icons } from '@/components/ui/icons'
 import { cn } from '@/lib/utils'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import * as React from 'react'
 
-import IconCheck from './icons/IconCheck'
-
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
@@ -21,7 +20,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn('flex items-center justify-center text-current')}
     >
-      <IconCheck size="sm" />
+      <Icons.check size="sm" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

src/components/ui/icons.tsx

@@ -0,0 +1,42 @@
+import IconProps from '@/types/interfaces/IconProps'
+import { getIconDimension } from '@/utils'
+
+export const Icons = {
+  check: ({ size, ...props }: IconProps) => {
+    const dimension = getIconDimension(size)
+    return (
+      <svg
+        fill="none"
+        height={dimension}
+        viewBox="0 0 20 20"
+        width={dimension}
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M16.6829 6.97652C16.8881 6.76125 17 6.48728 17 6.16438C17 5.51859 16.515 5 15.8995 5C15.5917 5 15.3119 5.13699 15.0974 5.36204L8.71795 12.2114L5.90263 9.11204C5.68812 8.88699 5.399 8.75 5.10054 8.75C4.48498 8.75 4 9.26859 4 9.91438C4 10.2373 4.11192 10.5113 4.31711 10.7265L7.8599 14.589C8.10239 14.863 8.40084 14.9902 8.72727 15C9.0537 15 9.3335 14.863 9.58532 14.589L16.6829 6.97652Z"
+          fill="white"
+        />
+      </svg>
+    )
+  },
+  golub: (props: IconProps) => (
+    <svg
+      fill="none"
+      height="161"
+      viewBox="0 0 196 161"
+      width="196"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M142.835 91.4259C99.0216 106.204 61.9886 52.6329 48.9489 24C44.892 30.7734 38.1693 50.9704 43.733 77.5713C50.6875 110.822 84.5909 106.204 85.4602 121.906C86.3295 137.608 38.517 132.99 22 131.143C101.108 173.63 134.142 132.99 142.835 119.135C151.528 105.281 161.091 104.357 175 106.204C167.176 93.2732 156.744 85.8841 142.835 91.4259Z"
+        fill="currentColor"
+      />
+      <path
+        d="M121 86C140.504 78 157.84 46.6667 164.071 32C167.971 57.6 158.653 77.3333 153.506 84C149.443 84 137.253 84.4 121 86Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+}

src/types/interfaces/IconProps.ts

@@ -0,0 +1,8 @@
+import IconSize from '@/types/enums/IconSize'
+import { HTMLAttributes } from 'react'
+
+interface IconProps extends HTMLAttributes<SVGElement> {
+  size?: IconSize
+}
+
+export default IconProps