From 755f1fa26f0eabcac8ecf2f618f6d408ccca8f81 Mon Sep 17 00:00:00 2001
From: lerte smith <lerte@qq.com>
Date: Sat, 9 Nov 2024 01:49:07 +0800
Subject: [PATCH] select trailingIcon use icon

---
 .../src/components/Select/TrailingIcon.tsx    | 20 ++++---------------
 .../components/Select/trailingIcon.module.css | 17 ++++------------
 2 files changed, 8 insertions(+), 29 deletions(-)

diff --git a/packages/actify/src/components/Select/TrailingIcon.tsx b/packages/actify/src/components/Select/TrailingIcon.tsx
index 352e7fb..8fb8854 100644
--- a/packages/actify/src/components/Select/TrailingIcon.tsx
+++ b/packages/actify/src/components/Select/TrailingIcon.tsx
@@ -1,23 +1,11 @@
+import { Icon } from '../Icon'
 import clsx from 'clsx'
 import styles from './trailingIcon.module.css'
 
 export const TrailingIcon = ({ isOpen }: { isOpen: boolean }) => {
   return (
-    <span className={styles['trailing-icon']}>
-      <svg height="5" viewBox="7 10 10 5" focusable="false">
-        <polygon
-          className={clsx(styles['down'], isOpen && styles['open'])}
-          stroke="none"
-          fillRule="evenodd"
-          points="7 10 12 15 17 10"
-        />
-        <polygon
-          className={clsx(styles['up'], isOpen && styles['open'])}
-          stroke="none"
-          fillRule="evenodd"
-          points="7 15 12 10 17 15"
-        />
-      </svg>
-    </span>
+    <Icon className={clsx(styles['trailing-icon'], isOpen && styles['open'])}>
+      Arrow_Drop_Down
+    </Icon>
   )
 }
diff --git a/packages/actify/src/components/Select/trailingIcon.module.css b/packages/actify/src/components/Select/trailingIcon.module.css
index 0970a47..e7d5661 100644
--- a/packages/actify/src/components/Select/trailingIcon.module.css
+++ b/packages/actify/src/components/Select/trailingIcon.module.css
@@ -1,19 +1,10 @@
 .trailing-icon {
+  height: 100%;
   display: inline-flex;
+  align-items: center;
   margin-inline: var(--_content-space)
     var(--_with-trailing-content-trailing-space);
 }
-
-.trailing-icon svg {
-  fill: currentColor;
-}
-
-.up,
-.open.down {
-  opacity: 0;
-  transition: opacity 75ms linear 75ms;
-}
-
-.open.up {
-  opacity: 1;
+.open {
+  rotate: 180deg;
 }