fix(SW-360): Add eyeshow and eyehide icons

components/TempDesignSystem/Form/NewPassword/index.tsx

@@ -1,14 +1,18 @@
 "use client"
 
+import { useState } from "react"
 import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import {
+  CheckIcon,
+  CloseIcon,
+  EyeHideIcon,
+  EyeShowIcon,
+  InfoCircleIcon,
+} from "@/components/Icons"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
-import Image from "next/image"
-import { useState } from "react"
-
-import { CheckIcon, CloseIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import {
   PasswordValidatorKey,
@@ -85,12 +89,7 @@ export default function NewPassword({
                 intent="tertiary"
                 onClick={() => setPasswordVisible(!isPasswordVisible)}
               >
-                <Image
-                  src={`/_static/img/icons/${isPasswordVisible ? "eye-icon" : "eye-show"}.svg`}
-                  alt="eye"
-                  width={24}
-                  height={24}
-                />
+                {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
               </Button>
             </div>
             {field.value ? (

components/TempDesignSystem/Form/NewPassword/newPassword.module.css

@@ -81,8 +81,6 @@
   right: var(--Spacing-x2);
   top: 50%;
   transform: translateY(-50%);
-  width: 24px;
-  height: 24px;
 }
 
 .inputWrapper {