docs: demo 增加 icon 引入

src/packages/__VUE/avatar/doc.en-US.md

@@ -47,6 +47,12 @@ Support two shapes：square、round
   <nut-avatar shape="square"><My /></nut-avatar>
   <nut-avatar shape="round"><My /></nut-avatar>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -65,6 +71,12 @@ Support three types：picture、icon、letter
   <nut-avatar><My /></nut-avatar>
   <nut-avatar>王</nut-avatar>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -80,6 +92,12 @@ Icon and letter types can have custom colors and background colors
   <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff"/></nut-avatar>
   <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -97,6 +115,12 @@ Icon and letter types can have custom colors and background colors
     <nut-avatar shape="square"><My /></nut-avatar>
   </nut-badge>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -127,6 +151,12 @@ Icon and letter types can have custom colors and background colors
     <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -150,6 +180,12 @@ Icon and letter types can have custom colors and background colors
     <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -166,12 +202,13 @@ Icon and letter types can have custom colors and background colors
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
+  import { My } from '@nutui/icons-vue';
   export default {
+    components: { My },
     setup() {
       const handleClick = () => {
         console.log('触发点击头像');
       };
-
       return {
         handleClick
       };

src/packages/__VUE/avatar/doc.md

@@ -47,6 +47,12 @@ app.use(Avatar);
   <nut-avatar shape="square"><My /></nut-avatar>
   <nut-avatar shape="round"><My /></nut-avatar>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -65,6 +71,12 @@ app.use(Avatar);
   <nut-avatar><My /></nut-avatar>
   <nut-avatar>王</nut-avatar>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -80,6 +92,12 @@ Icon 和字符型可以自定义颜色及背景色
   <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff"/></nut-avatar>
   <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -97,6 +115,12 @@ Icon 和字符型可以自定义颜色及背景色
     <nut-avatar shape="square"><My /></nut-avatar>
   </nut-badge>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -127,6 +151,12 @@ Icon 和字符型可以自定义颜色及背景色
     <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -150,6 +180,12 @@ Icon 和字符型可以自定义颜色及背景色
     <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -166,12 +202,13 @@ Icon 和字符型可以自定义颜色及背景色
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
+  import { My } from '@nutui/icons-vue';
   export default {
+    components: { My },
     setup() {
       const handleClick = () => {
         console.log('触发点击头像');
       };
-
       return {
         handleClick
       };

src/packages/__VUE/avatar/doc.taro.md

@@ -47,6 +47,12 @@ app.use(Avatar);
   <nut-avatar shape="square"><My /></nut-avatar>
   <nut-avatar shape="round"><My /></nut-avatar>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue-taro';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -65,6 +71,12 @@ app.use(Avatar);
   <nut-avatar><My /></nut-avatar>
   <nut-avatar>王</nut-avatar>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue-taro';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -80,6 +92,12 @@ Icon 和字符型可以自定义颜色及背景色
   <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff"/></nut-avatar>
   <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue-taro';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -97,6 +115,12 @@ Icon 和字符型可以自定义颜色及背景色
     <nut-avatar shape="square"><My /></nut-avatar>
   </nut-badge>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue-taro';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -127,6 +151,12 @@ Icon 和字符型可以自定义颜色及背景色
     <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue-taro';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -150,6 +180,12 @@ Icon 和字符型可以自定义颜色及背景色
     <nut-avatar><My /></nut-avatar>
   </nut-avatar-group>
 </template>
+<script lang="ts">
+  import { My } from '@nutui/icons-vue-taro';
+  export default {
+    components: { My }
+  }
+</script>
 ```
 
 :::
@@ -166,12 +202,13 @@ Icon 和字符型可以自定义颜色及背景色
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
+  import { My } from '@nutui/icons-vue-taro';
   export default {
+    components: { My },
     setup() {
       const handleClick = () => {
         console.log('触发点击头像');
       };
-
       return {
         handleClick
       };

src/packages/__VUE/button/doc.en-US.md

@@ -131,6 +131,12 @@ Set the button shape through the `shape` property, support circle and square but
     Star
   </nut-button>
 </template>
+<script lang="ts">
+  import { StarFill, Star } from '@nutui/icons-vue';
+  export default {
+    components: { StarFill, Star }
+  }
+</script>
 ```
 
 :::

src/packages/__VUE/button/doc.md

@@ -131,6 +131,12 @@ app.use(Button);
     收藏
   </nut-button>
 </template>
+<script lang="ts">
+  import { StarFill, Star } from '@nutui/icons-vue';
+  export default {
+    components: { StarFill, Star }
+  }
+</script>
 ```
 
 :::

src/packages/__VUE/button/doc.taro.md

@@ -131,6 +131,12 @@ app.use(Button);
     收藏
   </nut-button>
 </template>
+<script lang="ts">
+  import { StarFill, Star } from '@nutui/icons-vue-taro';
+  export default {
+    components: { StarFill, Star }
+  }
+</script>
 ```
 
 ### 按钮尺寸

src/packages/__VUE/grid/doc.en-US.md

@@ -31,6 +31,12 @@ app.use(GridItem);
     <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -45,6 +51,12 @@ app.use(GridItem);
     <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -59,6 +71,12 @@ app.use(GridItem);
     <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -78,6 +96,12 @@ app.use(GridItem);
     <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -93,6 +117,12 @@ app.use(GridItem);
     <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -108,6 +138,12 @@ app.use(GridItem);
     <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -124,6 +160,12 @@ app.use(GridItem);
     <nut-grid-item text="text"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -141,6 +183,12 @@ app.use(GridItem);
     </nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Home, Search } from '@nutui/icons-vue';
+  export default {
+    components: { Home, Search },
+  };
+</script>
 ```
 :::
 

src/packages/__VUE/grid/doc.md

@@ -31,6 +31,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -45,6 +51,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -59,6 +71,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -78,6 +96,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -93,6 +117,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -108,6 +138,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -124,6 +160,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -141,6 +183,12 @@ app.use(GridItem);
     </nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Home, Search } from '@nutui/icons-vue';
+  export default {
+    components: { Home, Search },
+  };
+</script>
 ```
 :::
 

src/packages/__VUE/grid/doc.taro.md

@@ -31,6 +31,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue-taro';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -45,6 +51,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue-taro';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -59,6 +71,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue-taro';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -78,6 +96,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue-taro';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -93,6 +117,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue-taro';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -108,6 +138,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue-taro';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -124,6 +160,12 @@ app.use(GridItem);
     <nut-grid-item text="文字"><Dongdong /></nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Dongdong } from '@nutui/icons-vue-taro';
+  export default {
+    components: { Dongdong },
+  };
+</script>
 ```
 :::
 
@@ -141,6 +183,12 @@ app.use(GridItem);
     </nut-grid-item>
   </nut-grid>
 </template>
+<script lang="ts">
+  import { Home, Search } from '@nutui/icons-vue-taro';
+  export default {
+    components: { Home, Search },
+  };
+</script>
 ```
 :::
 

src/packages/__VUE/inputnumber/doc.en-US.md

@@ -28,7 +28,6 @@ Initialize a default value
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -52,7 +51,6 @@ Set step `step` 5
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -76,7 +74,6 @@ Set step `step` 5
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(10);
       return { value };
@@ -100,7 +97,6 @@ Set step `step` 5
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -124,7 +120,6 @@ Set step `step` 5
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -148,7 +143,6 @@ Set step size `step` 0.1 `decimal places` keep 1 decimal place
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -171,7 +165,6 @@ Asynchronous modification through `change` event and `model-value`
 <script lang="ts">
   import { reactive, getCurrentInstance, toRefs } from 'vue';
   export default {
-    props: {},
     setup() {
       let { proxy } = getCurrentInstance();
       const state = reactive({
@@ -202,7 +195,6 @@ Asynchronous modification through `change` event and `model-value`
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -229,8 +221,9 @@ Asynchronous modification through `change` event and `model-value`
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import { Left, Right } from '@nutui/icons-vue';
   export default {
-    props: {},
+    components: { Left, Right },
     setup() {
       const value = ref(1);
       return { value };

src/packages/__VUE/inputnumber/doc.md

@@ -28,7 +28,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -52,7 +51,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -76,7 +74,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(10);
       return { value };
@@ -100,7 +97,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -124,7 +120,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -148,7 +143,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -171,7 +165,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { reactive, getCurrentInstance, toRefs } from 'vue';
   export default {
-    props: {},
     setup() {
       let { proxy } = getCurrentInstance();
       const state = reactive({
@@ -202,7 +195,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -229,8 +221,9 @@ app.use(InputNumber);
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import { Left, Right } from '@nutui/icons-vue';
   export default {
-    props: {},
+    components: { Left, Right },
     setup() {
       const value = ref(1);
       return { value };

src/packages/__VUE/inputnumber/doc.taro.md

@@ -28,7 +28,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -52,7 +51,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -76,7 +74,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(10);
       return { value };
@@ -100,7 +97,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -124,7 +120,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -148,7 +143,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -171,7 +165,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { reactive, getCurrentInstance, toRefs } from 'vue';
   export default {
-    props: {},
     setup() {
       let { proxy } = getCurrentInstance();
       const state = reactive({
@@ -202,7 +195,6 @@ app.use(InputNumber);
 <script lang="ts">
   import { ref } from 'vue';
   export default {
-    props: {},
     setup() {
       const value = ref(1);
       return { value };
@@ -229,8 +221,9 @@ app.use(InputNumber);
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import { Left, Right } from '@nutui/icons-vue-taro';
   export default {
-    props: {},
+    components: { Left, Right },
     setup() {
       const value = ref(1);
       return { value };

src/packages/__VUE/steps/doc.en-US.md

@@ -93,6 +93,12 @@ app.use(Step);
     </nut-step>
   </nut-steps>
 </template>
+<script lang="ts">
+  import { Service, People, Location2 } from '@nutui/icons-vue';
+  export default {
+    components: { Service, People, Location2 }
+  }
+</script>
 ```
 
 :::

src/packages/__VUE/steps/doc.md

@@ -93,6 +93,12 @@ app.use(Step);
     </nut-step>
   </nut-steps>
 </template>
+<script lang="ts">
+  import { Service, People, Location2 } from '@nutui/icons-vue';
+  export default {
+    components: { Service, People, Location2 }
+  }
+</script>
 ```
 
 :::

src/packages/__VUE/steps/doc.taro.md

@@ -93,6 +93,12 @@ app.use(Step);
     </nut-step>
   </nut-steps>
 </template>
+<script lang="ts">
+  import { Service, People, Location2 } from '@nutui/icons-vue-taro';
+  export default {
+    components: { Service, People, Location2 }
+  }
+</script>
 ```
 
 :::