chore: site use icons-vue component

src/sites/doc/components/Icon.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="icon-moudle">
     <div class="item home" @click="goHome">
-      <nut-icon name="home"></nut-icon>
+      <Home />
     </div>
     <div class="item refresh" @click="refresh">
-      <nut-icon name="refresh"></nut-icon>
+      <Refresh />
     </div>
     <div class="item category" @click="toCategory($event)">
-      <nut-icon name="category"></nut-icon>
+      <Category />
     </div>
     <div class="qrcodepart" v-if="showCode" ref="codeRef" @click="stopClick($event)">
       <div class="qrcode"> </div>
@@ -18,6 +18,7 @@
 <script lang="ts">
 import { defineComponent, reactive, ref, onMounted, toRefs } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { Home, Refresh, Category } from '@nutui/icons-vue';
 export default defineComponent({
   name: 'demo-icon',
   components: {},

src/sites/doc/main.ts

@@ -5,7 +5,6 @@ import '@/sites/assets/styles/reset.scss';
 import '@/sites/assets/styles/md-style.scss';
 import DemoBlock from './components/demo-block';
 import { Hover } from './directive/hover/hover';
-import NutUI from '@/packages/nutui.vue';
 
 import { isMobile } from '@/sites/assets/util';
 
@@ -14,4 +13,4 @@ if (isMobile) {
   location.replace('demo.html' + url);
 }
 
-createApp(App).directive('hover', Hover).component('demo-block', DemoBlock).use(router).use(NutUI).mount('#doc');
+createApp(App).directive('hover', Hover).component('demo-block', DemoBlock).use(router).mount('#doc');

src/sites/mobile/App.vue

@@ -1,14 +1,13 @@
 <template>
   <div v-if="isShow" id="nav">
     <div class="back" @click="goBack">
-      <nut-icon name="left"></nut-icon>
+      <Left />
     </div>
     {{ title }}
     <div class="translate" @click="translateChange">
-      <nut-icon
-        name="https://img14.360buyimg.com/imagetools/jfs/t1/135168/8/21387/6193/625fa81aEe07cc347/55ad5bc2580c53a6.png"
-      >
-      </nut-icon>
+      <img
+        src="https://img14.360buyimg.com/imagetools/jfs/t1/135168/8/21387/6193/625fa81aEe07cc347/55ad5bc2580c53a6.png"
+      />
     </div>
   </div>
   <router-view />
@@ -21,10 +20,12 @@ import { isMobile } from '@/sites/assets/util';
 import { useThemeEditor } from '@/sites/assets/util/helper';
 import Icon from '@/sites/mobile/components/Icon.vue';
 import { translateChange } from '../assets/util/useTranslate';
+import { Left } from '@nutui/icons-vue';
 export default defineComponent({
   name: 'app',
   components: {
-    [Icon.name]: Icon
+    [Icon.name]: Icon,
+    Left
   },
   setup() {
     const title = ref('NutUI');
@@ -152,6 +153,10 @@ body {
       align-items: center;
       justify-content: center;
       cursor: pointer;
+      > img {
+        width: 20px;
+        height: 20px;
+      }
     }
   }
 

src/sites/mobile/components/Icon.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="icon-moudle">
     <div class="item home" @click="goHome">
-      <nut-icon name="home"></nut-icon>
+      <Home />
     </div>
     <div class="item refresh" @click="refresh">
-      <nut-icon name="refresh"></nut-icon>
+      <Refresh />
     </div>
     <div class="item category" @click="toCategory($event)">
-      <nut-icon name="category"></nut-icon>
+      <Category />
     </div>
     <div class="qrcodepart" v-if="showCode" ref="codeRef" @click="stopClick($event)">
       <div class="qrcode"> </div>
@@ -18,8 +18,10 @@
 <script lang="ts">
 import { defineComponent, reactive, ref, onMounted, toRefs } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { Home, Refresh, Category } from '@nutui/icons-vue';
 export default defineComponent({
   name: 'demo-icon',
+  components: { Home, Refresh, Category },
   setup() {
     const router = useRouter();