style(sidebar): update voice package icon

src/app/sidebar/components/voice-package-card.module.css

@@ -33,23 +33,18 @@
 
 .micIcon {
   flex: 0 0 auto;
-  width: 60px;
+  width: 100px;
-  height: 60px;
+  height: 100px;
-  border-radius: 50%;
-  background: linear-gradient(
-    135deg,
-    var(--color-voice-gradient-start, #ff6fa3),
-    var(--color-voice-gradient-end, #ff9a5a)
-  );
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #ffffff;
-  box-shadow: 0 4px 12px rgba(255, 111, 163, 0.25);
 }
 
-.micGlyph {
+.micImage {
-  color: inherit;
+  display: block;
+  width: 100px;
+  height: 100px;
+  object-fit: contain;
 }
 
 .usage {

src/app/sidebar/components/voice-package-card.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "next/image";
+
 import styles from "./voice-package-card.module.css";
 
 export interface VoicePackageCardProps {
@@ -31,22 +33,13 @@ export function VoicePackageCard({
       <header className={styles.header}>
         <h2 className={styles.title}>Voice Message Package</h2>
         <div className={styles.micIcon} aria-hidden="true">
-          <svg
+          <Image
-            width="28"
+            src="/images/sidebar/ic_user_voicemessage.png"
-            height="28"
+            alt=""
-            viewBox="0 0 24 24"
+            width={100}
-            fill="none"
+            height={100}
-            className={styles.micGlyph}
+            className={styles.micImage}
-          >
+          />
-            <path
-              d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3Z"
-              fill="currentColor"
-            />
-            <path
-              d="M19 11a1 1 0 1 0-2 0 5 5 0 0 1-10 0 1 1 0 1 0-2 0 7 7 0 0 0 6 6.92V21a1 1 0 1 0 2 0v-3.08A7 7 0 0 0 19 11Z"
-              fill="currentColor"
-            />
-          </svg>
         </div>
       </header>