diff --git a/src/components/RayIcon/index.scss b/src/components/RayIcon/index.scss
index 519aed76..2a4729bb 100644
--- a/src/components/RayIcon/index.scss
+++ b/src/components/RayIcon/index.scss
@@ -1,5 +1,16 @@
 .ray-icon {
+  width: var(--ray-icon-width);
+  height: var(--ray-icon-height);
   border: none;
   outline: none;
-  @include flexCenter;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  fill: currentColor;
+  transform: translateZ(0);
+
+  & svg[rayIconAttribute="ray-icon"] {
+    width: var(--ray-icon-width);
+    height: var(--ray-icon-height);
+  }
 }
diff --git a/src/components/RayIcon/index.tsx b/src/components/RayIcon/index.tsx
index 7be4fcb1..5cf43690 100644
--- a/src/components/RayIcon/index.tsx
+++ b/src/components/RayIcon/index.tsx
@@ -16,7 +16,7 @@ const RayIcon = defineComponent({
   props: {
     color: {
       type: String,
-      default: '',
+      default: 'currentColor',
     },
     prefix: {
       type: String,
@@ -46,25 +46,32 @@ const RayIcon = defineComponent({
   setup(props) {
     const modelColor = computed(() => props.color)
     const symbolId = computed(() => `#${props.prefix}-${props.name}`)
+    const cssVars = computed(() => {
+      const cssVar = {
+        '--ray-icon-width': props.width
+          ? props.width + 'px'
+          : props.size + 'px',
+        '--ray-icon-height': props.width
+          ? props.height + 'px'
+          : props.size + 'px',
+      }
+
+      return cssVar
+    })
 
     return {
       modelColor,
       symbolId,
+      cssVars,
     }
   },
   render() {
     return (
-      <div class={`ray-icon ${this.customClassName}`}>
-        <svg
-          ariaHidden={true}
-          style={{
-            width: `${this.width ? this.width : this.size}px`,
-            height: `${this.height ? this.height : this.size}px`,
-          }}
-        >
+      <span class={['ray-icon', this.customClassName]} style={[this.cssVars]}>
+        <svg rayIconAttribute="ray-icon" ariaHidden={true}>
           <use xlink:href={this.symbolId} fill={this.modelColor} />
         </svg>
-      </div>
+      </span>
     )
   },
 })
diff --git a/src/components/RayLink/index.tsx b/src/components/RayLink/index.tsx
index 4d72b58c..3f413677 100644
--- a/src/components/RayLink/index.tsx
+++ b/src/components/RayLink/index.tsx
@@ -43,7 +43,7 @@ const RayLink = defineComponent({
       },
       {
         key: 'ray-template-doc-out',
-        src: 'https://ray.yunkuangao.com/ray-template-doc/',
+        src: 'https://ray-template.yunkuangao.com/',
         tooltip: 'Ray Template Doc (国内地址)',
         icon: 'https://yunkuangao.com/images/longmao.jpeg',
       },