Merge pull request #38 from yamada-ui/issue36

Replace the icon with @yamada-ui/lucide

Author: hirotomoyamada

components/form/palette-menu.tsx

@@ -1,3 +1,4 @@
+import { Palette, Plus } from "@yamada-ui/lucide"
 import type { IconButtonProps, PopoverProps } from "@yamada-ui/react"
 import {
   Popover,
@@ -26,7 +27,6 @@ import {
 } from "@yamada-ui/react"
 import type { FC, MutableRefObject, RefObject } from "react"
 import { memo, useCallback, useRef, useState } from "react"
-import { ColorPalette, Plus } from "components/media-and-icons"
 import { RemoveScroll } from "components/other"
 import { useApp } from "contexts/app-context"
 import { useI18n } from "contexts/i18n-context"
@@ -78,7 +78,7 @@ export const PaletteMenu = memo(
               >
                 <IconButton
                   ref={ref}
-                  icon={<ColorPalette color="muted" />}
+                  icon={<Palette color="muted" fontSize="2xl" />}
                   bg={["blackAlpha.100", "whiteAlpha.100"]}
                   borderColor="transparent"
                   colorScheme="neutral"
@@ -285,7 +285,7 @@ const CreatePalette: FC<CreatePaletteProps> = memo(
           colorScheme="neutral"
           bg={["blackAlpha.200", "whiteAlpha.100"]}
           borderColor="transparent"
-          leftIcon={<Plus />}
+          leftIcon={<Plus fontSize="lg" />}
           disabled={isOpen && !value.length}
           onClick={!isOpen ? onOpen : onCreate}
           _hover={{ _disabled: {} }}

components/form/search-color.tsx

@@ -102,7 +102,7 @@ export const SearchColor = memo(
               borderColor="transparent"
               icon={
                 <ChevronIcon
-                  fontSize="1.3em"
+                  fontSize="lg"
                   color="muted"
                   transform="rotate(-90deg)"
                 />

components/layouts/header.tsx

@@ -1,3 +1,11 @@
+import {
+  Menu as MenuIcon,
+  Moon,
+  Sun,
+  Languages,
+  Search as SearchIcon,
+  Box as BoxIcon,
+} from "@yamada-ui/lucide"
 import type {
   CenterProps,
   ColorMode,
@@ -40,16 +48,7 @@ import { useRouter } from "next/router"
 import type { FC } from "react"
 import { memo, useEffect, useRef, useState } from "react"
 import { SearchColor } from "components/form"
-import {
-  Color,
-  Discord,
-  Github,
-  Hamburger,
-  MagnifyingGlass,
-  Moon,
-  Sun,
-  Translate,
-} from "components/media-and-icons"
+import { Discord, Github } from "components/media-and-icons"
 import { NextLinkIconButton, Tree } from "components/navigation"
 import { CONSTANT } from "constant"
 import { useApp } from "contexts/app-context"
@@ -141,7 +140,7 @@ export const Header = memo(
                     display={{ base: "none", sm: "inline-flex" }}
                     color="muted"
                     onClick={searchControls.onToggle}
-                    icon={<MagnifyingGlass />}
+                    icon={<SearchIcon fontSize="2xl" />}
                   />
                 </>
 
@@ -292,7 +291,7 @@ const ButtonGroup: FC<ButtonGroupProps> = memo(
             display={{ base: "none", lg: "inline-flex" }}
             color="muted"
             onClick={onOpen}
-            icon={<Hamburger />}
+            icon={<MenuIcon fontSize="2xl" />}
             _hover={{ bg: [`blackAlpha.100`, `whiteAlpha.50`] }}
           />
         ) : (
@@ -346,7 +345,7 @@ const I18nButton: FC<I18nButtonProps> = memo(({ menuProps, ...rest }) => {
         isRounded
         variant="ghost"
         color="muted"
-        icon={<Translate />}
+        icon={<Languages fontSize="2xl" />}
         _hover={{ bg: [`blackAlpha.100`, `whiteAlpha.50`] }}
         {...rest}
       />
@@ -404,7 +403,13 @@ const ColorModeButton: FC<ColorModeButtonProps> = memo(
           isRounded
           variant="ghost"
           color="muted"
-          icon={colorMode === "dark" ? <Sun /> : <Moon />}
+          icon={
+            colorMode === "dark" ? (
+              <Sun fontSize="2xl" />
+            ) : (
+              <Moon fontSize="2xl" />
+            )
+          }
           _hover={{ bg: [`blackAlpha.100`, `whiteAlpha.50`] }}
           {...rest}
         />
@@ -466,7 +471,7 @@ const FormatButton: FC<FormatButtonProps> = memo(({ menuProps, ...rest }) => {
         isRounded
         variant="ghost"
         color="muted"
-        icon={<Color />}
+        icon={<BoxIcon fontSize="2xl" />}
         _hover={{ bg: [`blackAlpha.100`, `whiteAlpha.50`] }}
         {...rest}
       />

components/media-and-icons/arrow.tsx

@@ -3,7 +3,7 @@ import { Icon } from "@yamada-ui/react"
 import { forwardRef } from "react"
 
 export const Discord = forwardRef<SVGSVGElement, IconProps>(
-  ({ boxSize = "1.35em", ...rest }, ref) => {
+  ({ boxSize = "1.5em", ...rest }, ref) => {
     return (
       <Icon
         ref={ref}