From 6c73a0612b659339d239f3050639f045f1f08650 Mon Sep 17 00:00:00 2001
From: ray_wuhao <443547225@qq.com>
Date: Fri, 17 Feb 2023 15:13:01 +0800
Subject: [PATCH] =?UTF-8?q?RayIcon=E6=96=B0=E5=A2=9Edepth=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RayIcon/index.scss | 3 ++-
 src/components/RayIcon/index.tsx  | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/RayIcon/index.scss b/src/components/RayIcon/index.scss
index 2a4729bb..a98fd81e 100644
--- a/src/components/RayIcon/index.scss
+++ b/src/components/RayIcon/index.scss
@@ -1,13 +1,14 @@
 .ray-icon {
+  position: relative;
   width: var(--ray-icon-width);
   height: var(--ray-icon-height);
   border: none;
   outline: none;
   text-align: center;
   display: inline-block;
-  position: relative;
   fill: currentColor;
   transform: translateZ(0);
+  opacity: var(--ray-icon-depth);
 
   & svg[rayIconAttribute="ray-icon"] {
     width: var(--ray-icon-width);
diff --git a/src/components/RayIcon/index.tsx b/src/components/RayIcon/index.tsx
index 5cf43690..fbfe31b4 100644
--- a/src/components/RayIcon/index.tsx
+++ b/src/components/RayIcon/index.tsx
@@ -39,9 +39,15 @@ const RayIcon = defineComponent({
       default: 0,
     },
     customClassName: {
+      /** 自定义 class name */
       type: String,
       default: '',
     },
+    depth: {
+      /** 图标深度 */
+      type: Number,
+      default: 1,
+    },
   },
   setup(props) {
     const modelColor = computed(() => props.color)
@@ -51,9 +57,10 @@ const RayIcon = defineComponent({
         '--ray-icon-width': props.width
           ? props.width + 'px'
           : props.size + 'px',
-        '--ray-icon-height': props.width
+        '--ray-icon-height': props.height
           ? props.height + 'px'
           : props.size + 'px',
+        '--ray-icon-depth': props.depth,
       }
 
       return cssVar