docs: github icon support hover tips and optimized the background (#6899)

* docs: github icon support hover tips and optimized the background color under hover

* refactor: modify icon to `icon` export

* style: optimize githubIcon style

site/src/layouts/header/Github.vue

@@ -1,11 +1,39 @@
 <template>
-  <span id="github-btn" class="github-btn">
+  <a-tooltip placement="bottom">
+    <template #title>Github</template>
+    <span id="github-btn" class="github-btn" :style="githubIconStyles">
       <a class="gh-btn" href="https://github.com/vueComponent/ant-design-vue" target="_blank">
-      <span class="gh-ico" aria-hidden="true"></span>
+        <GithubOutlined class="github-icon" />
-      <span class="gh-text">Star</span>
       </a>
     </span>
+  </a-tooltip>
 </template>
+
+<script lang="ts">
+import { defineComponent, inject, computed } from 'vue';
+import { GithubOutlined } from '@ant-design/icons-vue';
+export default defineComponent({
+  components: {
+    GithubOutlined,
+  },
+  setup() {
+    const themeMode = inject('themeMode');
+    const githubIconStyles = computed(() => {
+      let iconBackgroundColor = 'rgba(0,0,0,0.06)';
+      if ((themeMode as any).theme.value === 'dark') {
+        iconBackgroundColor = 'rgba(255,255,255,0.12)';
+      }
+      return {
+        '--github-icon-background-color': iconBackgroundColor,
+      };
+    });
+    return {
+      githubIconStyles,
+    };
+  },
+});
+</script>
+
 <style lang="less" scoped>
 @import './Github.less';
 #github-btn {
@@ -14,10 +42,16 @@
   height: auto;
 
   .gh-btn {
+    color: currentColor;
     height: auto;
-    padding: 1px 4px;
+    padding: 6px;
     background: transparent;
     border: 0;
+    transition: all 0.2s;
+
+    &:hover {
+      background: var(--github-icon-background-color);
+    }
 
     .gh-ico {
       width: 20px;
@@ -30,6 +64,11 @@
     }
   }
 
+  .github-icon {
+    font-size: 18px;
+    color: var(--text-color);
+  }
+
   .gh-count {
     height: auto;
     padding: 4px 8px;