[FEAT] Icon Component

src/modules/account/components/signin-button/index.tsx

@@ -5,6 +5,7 @@ import { signInWithGoogle } from '@/lib/auth/actions'
 import { Generic } from '@/types/global'
 import { tw } from '@/lib/utils/tw'
 import React from 'react'
+import Icon from '@/modules/common/templates/icon'
 
 const AccountSignInButton: React.FC<Generic> = ({ className }) =>
 {
@@ -17,13 +18,7 @@ const AccountSignInButton: React.FC<Generic> = ({ className }) =>
           className
         )}
       >
-        <UserCircleIcon
-          aria-hidden="true"
-          className={tw(
-            "size-6 flex-shrink-0",
-            "text-light-secondary dark:text-dark-secondary group-hover:text-light-text/60 dark:group-hover:text-dark-text/60"
-          )}
-        />
+        <Icon icon={<UserCircleIcon />} />
       </button>
     </form>
   )

src/modules/common/components/select-button/index.tsx

@@ -2,18 +2,13 @@
 
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { ComboboxButton } from '@headlessui/react'
-import { tw } from '@/lib/utils/tw'
+import Icon from '@/modules/common/templates/icon'
 
 const SelectButton = () =>
 {
   return (
     <ComboboxButton className="group absolute inset-y-0 right-0 px-2.5">
-      <ChevronDownIcon
-        className={tw(
-          "size-4",
-          "text-light-text dark:text-dark-text"
-        )}
-      />
+      <Icon icon={<ChevronDownIcon/>} />
     </ComboboxButton>
   )
 }

src/modules/common/templates/dropdown.tsx

@@ -6,6 +6,7 @@ import DropdownItem from '../components/dropdown-item'
 import { DropdownProps } from '@/types/templates'
 import React, { useState } from 'react'
 import { tw } from '@/lib/utils/tw'
+import Icon from './icon'
 
 const Dropdown: React.FC<DropdownProps> = ({ options, label, className, children, onSelect }) =>
 {
@@ -31,12 +32,7 @@ const Dropdown: React.FC<DropdownProps> = ({ options, label, className, children
       >
         {label}
         {children}
-        <ChevronRightIcon
-          className={tw(
-            "text-light-text dark:text-dark-text size-4 transition-transform duration-200",
-            { "rotate-90": isOpen }
-          )}
-        />
+        <Icon icon={ChevronRightIcon} className="w-4 h-4" />
       </MenuButton>
 
       <MenuItems

src/modules/common/templates/icon.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { tw } from "@/lib/utils/tw";
+import { IconProps } from "@/types/templates";
+import React from "react";
+
+const Icon: React.FC<IconProps> = ({ className, icon }) => 
+{
+    return (
+        <span
+         className={tw(
+            "font-bold size-4",
+            "text-light-text dark:text-dark-text",
+            className
+         )}>
+            {icon}
+        </span>
+    );
+}
+
+export default Icon;

src/modules/layout/components/header-side-menu-close-button/index.tsx

@@ -4,6 +4,7 @@ import { HeaderSideMenuCloseButtonProps } from '@/types/components'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { tw } from '@/lib/utils/tw'
 import React from 'react'
+import Icon from '@/modules/common/templates/icon'
 
 const HeaderSideMenuCloseButton: React.FC<HeaderSideMenuCloseButtonProps> = ({ onClose, className }) =>
 {
@@ -20,9 +21,7 @@ const HeaderSideMenuCloseButton: React.FC<HeaderSideMenuCloseButtonProps> = ({ o
         aria-label="Cerrar menú"
       >
         <span className="absolute -inset-0.5" />
-        <XMarkIcon
-          className="size-6"
-          aria-hidden="true"
+        <Icon icon={<XMarkIcon />}
         />
       </button>
     </div>

src/types/templates.ts

@@ -44,3 +44,8 @@ export interface SelectProps extends Generic
   onSelect?: (selected: SelectItem) => void
   label?: string
 }
+
+export interface IconProps extends Generic
+{
+  icon: JSX.Element
+}