feat: md icon-demo

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

@@ -2,22 +2,14 @@
 
 ### Intro
 
-Install the @nutui/icons-vue icon package independently.
+Install the @nutui/icons-vue package independently. Two usage modes are provided (Svg on-demand usage and IconFont full usage).
 
 ### Install
 
 ```bash
 npm i --save @nutui/icons-vue
 ```
-
-``` javascript
-import { createApp } from 'vue';
-import { IconFont } from '@nutui/icons-vue';
-
-const app = createApp();
-app.use(IconFont);
-```
-### Svg import on demand
+### Use: Svg import on demand
 
 Use mode of on-demand loading components, see @nutui/icons-vue/dist/types/index.d.ts
 
@@ -27,16 +19,45 @@ import { Add } from '@nutui/icons-vue';
 <Add color='red'>
 ```
 
-### IconFont Basic Usage
+<icon-demo />
+
+```
+The Svg used internally in the component library is
+Loading,Location,Location2,Check,Close,Left,Service,Top,Right,CheckNormal,Checked,CheckDisabled,DownArrow,JoySmile,Image,ImageError,CircleClose,MaskClose,Minus,Plus,ArrowUp2,ArrowDown2,Notice,CheckChecked,StarN,Tips,Loading1,TriangleUp,TriangleDown,Photograph,Failure,Del,Link,Download
+```
+### Props
+
+| Attribute | Description                        | Type             | Default |
+|-----------|------------------------------------|------------------|---------|
+| name      | Icon name or URL                   | String           | -       |
+| color     | Icon color                         | String           | -       |
+| width     | Icon size , eg `20px` `2em` `2rem` | String or Number | -       |
+| height    | Icon size , eg `20px` `2em` `2rem` | String or Number | -       |
+
+### Events
+
+| Event | Description                  | Arguments    |
+|-------|------------------------------|--------------|
+| click | Emitted when icon is clicked | event: Event |
+
+### Use: Full use of IconFont
+
+```ks
+import { createApp } from 'vue';
+import { IconFont } from '@nutui/icons-vue';
+
+const app = createApp();
+app.use(IconFont);
+```
 
 Use `name` prop to set icon name or icon URL.
 
 :::demo
 ```html
 <template>
-  <nut-icon name="dongdong"></nut-icon>
-  <nut-icon name="JD"></nut-icon>
-  <nut-icon size="40"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></nut-icon>
+  <IconFont name="dongdong"></IconFont>
+  <IconFont name="JD"></IconFont>
+  <IconFont size="40"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></IconFont>
 </template>
 ```
 :::
@@ -48,9 +69,9 @@ Use `color` prop to set icon color.
 :::demo
 ```html
 <template>
-  <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
-  <nut-icon name="dongdong" color="#64b578"></nut-icon>
-  <nut-icon name="JD" color="#fa2c19"></nut-icon>
+  <IconFont name="dongdong" color="#fa2c19"></IconFont>
+  <IconFont name="dongdong" color="#64b578"></IconFont>
+  <IconFont name="JD" color="#fa2c19"></IconFont>
 </template>
 ```
 :::
@@ -62,9 +83,9 @@ Use `size` prop to set icon size default unit is `px` .
 :::demo
 ```html
 <template>
-  <nut-icon name="dongdong"></nut-icon>
-  <nut-icon name="dongdong" size="24"></nut-icon>
-  <nut-icon name="dongdong" size="16"></nut-icon>
+  <IconFont name="dongdong"></IconFont>
+  <IconFont name="dongdong" size="24"></IconFont>
+  <IconFont name="dongdong" size="16"></IconFont>
 </template>
 ```
 :::
@@ -75,13 +96,13 @@ Adding the specified class class can realize the dynamic effect of the picture.
 :::demo
 ```html
 <template>
-  <nut-icon name="dou-arrow-up" class="nut-icon-am-jump nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="star-fill-n" class="nut-icon-am-blink nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="refresh2" class="nut-icon-am-rotate nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="heart-fill" class="nut-icon-am-breathe nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="microphone" class="nut-icon-am-flash nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="download" class="nut-icon-am-bounce nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="message" class="nut-icon-am-shake nut-icon-am-infinite"></nut-icon>
+  <IconFont name="dou-arrow-up" class="nut-icon-am-jump nut-icon-am-infinite"></IconFont>
+  <IconFont name="star-fill-n" class="nut-icon-am-blink nut-icon-am-infinite"></IconFont>
+  <IconFont name="refresh2" class="nut-icon-am-rotate nut-icon-am-infinite"></IconFont>
+  <IconFont name="heart-fill" class="nut-icon-am-breathe nut-icon-am-infinite"></IconFont>
+  <IconFont name="microphone" class="nut-icon-am-flash nut-icon-am-infinite"></IconFont>
+  <IconFont name="download" class="nut-icon-am-bounce nut-icon-am-infinite"></IconFont>
+  <IconFont name="message" class="nut-icon-am-shake nut-icon-am-infinite"></IconFont>
 </template>
 
 <style>
@@ -130,7 +151,7 @@ import './assets/font/iconfont.css';
   class-prefix  icon
   name The name value is filled in according to the value in iconfont.css 
 -->
-<nut-icon font-class-name="iconfont" class-prefix="icon" name="close" />
+<IconFont font-class-name="iconfont" class-prefix="icon" name="close" />
 ```
 
 
@@ -158,7 +179,7 @@ import './assets/font/iconfont.css';
   font-class-name  my-icon
   class-prefix  my-icon
 -->
-<nut-icon font-class-name="my-icon" class-prefix="my-icon" name="extra" />
+<IconFont font-class-name="my-icon" class-prefix="my-icon" name="extra" />
 
 ```
 

src/packages/__VUE/icon/doc.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-独立安装 @nutui/icons-vue 图标组件包。
+独立安装 @nutui/icons-vue 图标组件包。提供两种使用方式（Svg 按需使用、IconFont 全量使用）。
 
 ### 安装
 
@@ -10,7 +10,7 @@
 npm i --save @nutui/icons-vue
 ```
 
-### fan Svg 按需加载使用
+### 方式一： Svg 按需使用
 
 按需加载组件使用方式，可选项见 @nutui/icons-vue/dist/types/index.d.ts
 
@@ -20,10 +20,36 @@ import { Add } from '@nutui/icons-vue';
 <Add color='red'>
 ```
 
-### IconFont 全量使用
+<icon-demo />
+
+```
+其中组件库内部使用 Svg 为
+Loading,Location,Location2,Check,Close,Left,Service,Top,Right,CheckNormal,Checked,CheckDisabled,DownArrow,JoySmile,Image,ImageError,CircleClose,MaskClose,Minus,Plus,ArrowUp2,ArrowDown2,Notice,CheckChecked,StarN,Tips,Loading1,TriangleUp,TriangleDown,Photograph,Failure,Del,Link,Download
+```
+
+### Props
+
+| 参数   | 说明                             | 类型             | 默认值 |
+|--------|----------------------------------|------------------|--------|
+| name   | 图标名称或图片链接               | String           | -      |
+| color  | 图标颜色                         | String           | -      |
+| width  | 图标大小，如 `20px` `2em` `2rem` | String or Number | -      |
+| height | 图标大小，如 `20px` `2em` `2rem` | String or Number | -      |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| click  | 点击图标时触发 | event: Event |
+
+### 方式二： IconFont 全量使用
 
 ```js
+import { createApp } from 'vue';
 import { IconFont } from '@nutui/icons-vue';
+
+const app = createApp();
+app.use(IconFont);
 ```
 
 `Icon` 的 `name` 属性支持传入图标名称或图片链接。
@@ -31,9 +57,9 @@ import { IconFont } from '@nutui/icons-vue';
 :::demo
 ```html
 <template>
-  <nut-icon name="dongdong"></nut-icon>
-  <nut-icon name="JD"></nut-icon>
-  <nut-icon size="40"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></nut-icon>
+  <IconFont name="dongdong"></IconFont>
+  <IconFont name="JD"></IconFont>
+  <IconFont size="40"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></IconFont>
 </template>
 ```
 :::
@@ -45,9 +71,9 @@ import { IconFont } from '@nutui/icons-vue';
 :::demo
 ```html
 <template>
-  <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
-  <nut-icon name="dongdong" color="#64b578"></nut-icon>
-  <nut-icon name="JD" color="#fa2c19"></nut-icon>
+  <IconFont name="dongdong" color="#fa2c19"></IconFont>
+  <IconFont name="dongdong" color="#64b578"></IconFont>
+  <IconFont name="JD" color="#fa2c19"></IconFont>
 </template>
 ```
 :::
@@ -59,9 +85,9 @@ import { IconFont } from '@nutui/icons-vue';
 :::demo
 ```html
 <template>
-  <nut-icon name="dongdong"></nut-icon>
-  <nut-icon name="dongdong" size="24"></nut-icon>
-  <nut-icon name="dongdong" size="16"></nut-icon>
+  <IconFont name="dongdong"></IconFont>
+  <IconFont name="dongdong" size="24"></IconFont>
+  <IconFont name="dongdong" size="16"></IconFont>
 </template>
 ```
 :::
@@ -72,13 +98,13 @@ import { IconFont } from '@nutui/icons-vue';
 :::demo
 ```html
 <template>
-  <nut-icon name="dou-arrow-up" class="nut-icon-am-jump nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="star-fill-n" class="nut-icon-am-blink nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="refresh2" class="nut-icon-am-rotate nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="heart-fill" class="nut-icon-am-breathe nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="microphone" class="nut-icon-am-flash nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="download" class="nut-icon-am-bounce nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="message" class="nut-icon-am-shake nut-icon-am-infinite"></nut-icon>
+  <IconFont name="dou-arrow-up" class="nut-icon-am-jump nut-icon-am-infinite"></IconFont>
+  <IconFont name="star-fill-n" class="nut-icon-am-blink nut-icon-am-infinite"></IconFont>
+  <IconFont name="refresh2" class="nut-icon-am-rotate nut-icon-am-infinite"></IconFont>
+  <IconFont name="heart-fill" class="nut-icon-am-breathe nut-icon-am-infinite"></IconFont>
+  <IconFont name="microphone" class="nut-icon-am-flash nut-icon-am-infinite"></IconFont>
+  <IconFont name="download" class="nut-icon-am-bounce nut-icon-am-infinite"></IconFont>
+  <IconFont name="message" class="nut-icon-am-shake nut-icon-am-infinite"></IconFont>
 </template>
 
 <style>
@@ -127,7 +153,7 @@ import './assets/font/iconfont.css';
   class-prefix 指定默认 icon
   name 值根据 iconfont.css 中值对应填写 
 -->
-<nut-icon font-class-name="iconfont" class-prefix="icon" name="close" />
+<IconFont font-class-name="iconfont" class-prefix="icon" name="close" />
 ```
 
 
@@ -155,24 +181,24 @@ import './assets/font/iconfont.css';
   font-class-name 指定类名为默认 my-icon
   class-prefix 指定默认 my-icon
 -->
-<nut-icon font-class-name="my-icon" class-prefix="my-icon" name="extra" />
+<IconFont font-class-name="my-icon" class-prefix="my-icon" name="extra" />
 
 ```
 
 自定义 iconfont [Demo示例](https://github.com/jdf2e/nutui-demo/blob/master/vite/src/App.vue#L15) 
 
-## API
+## IconFont API
 
 ### Props
 
-| 参数            | 说明                                    | 类型             | 默认值           |
-|-----------------|-----------------------------------------|------------------|------------------|
-| name            | 图标名称或图片链接                      | String           | -                |
-| color           | 图标颜色                                | String           | -                |
-| size            | 图标大小，如 `20px` `2em` `2rem`        | String or Number | -                |
-| font-class-name | 自定义 icon 字体基础类名                | String           | `nutui-iconfont` |
+| 参数            | 说明                                     | 类型             | 默认值           |
+|-----------------|------------------------------------------|------------------|------------------|
+| name            | 图标名称或图片链接                       | String           | -                |
+| color           | 图标颜色                                 | String           | -                |
+| size            | 图标大小，如 `20px` `2em` `2rem`         | String or Number | -                |
+| font-class-name | 自定义 icon 字体基础类名                 | String           | `nutui-iconfont` |
 | class-prefix    | 自定义 icon 类名前缀，用于使用自定义图标 | String           | `nut-icon`       |
-| tag             | HTML 标签                               | String           | `i`              |
+| tag             | HTML 标签                                | String           | `i`              |
 
 ### Events
 

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

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-独立安装 @nutui/icons-vue-taro 图标组件包。
+独立安装 @nutui/icons-vue-taro 图标组件包。基于字体的图标集。
 
 ### 安装
 
@@ -17,7 +17,7 @@ import { IconFont } from '@nutui/icons-vue-taro';
 const app = createApp();
 app.use(IconFont);
 ```
-### 按需加载使用
+### 方式一：按需加载使用
 
 按需加载组件使用方式，可选项见 @nutui/icons-vue-taro/dist/types/index.d.ts
 
@@ -27,7 +27,7 @@ import { Add } from '@nutui/icons-vue-taro';
 <Add color='red'>
 ```
 
-### IconFont 全量使用
+### 方式二：全量使用
 
 ```js
 import { IconFont } from '@nutui/icons-vue-taro';
@@ -38,9 +38,9 @@ import { IconFont } from '@nutui/icons-vue-taro';
 :::demo
 ```html
 <template>
-  <nut-icon name="dongdong"></nut-icon>
-  <nut-icon name="JD"></nut-icon>
-  <nut-icon size="40"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></nut-icon>
+  <IconFont name="dongdong"></IconFont>
+  <IconFont name="JD"></IconFont>
+  <IconFont size="40"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></IconFont>
 </template>
 ```
 :::
@@ -52,9 +52,9 @@ import { IconFont } from '@nutui/icons-vue-taro';
 :::demo
 ```html
 <template>
-  <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
-  <nut-icon name="dongdong" color="#64b578"></nut-icon>
-  <nut-icon name="JD" color="#fa2c19"></nut-icon>
+  <IconFont name="dongdong" color="#fa2c19"></IconFont>
+  <IconFont name="dongdong" color="#64b578"></IconFont>
+  <IconFont name="JD" color="#fa2c19"></IconFont>
 </template>
 ```
 :::
@@ -66,9 +66,9 @@ import { IconFont } from '@nutui/icons-vue-taro';
 :::demo
 ```html
 <template>
-  <nut-icon name="dongdong"></nut-icon>
-  <nut-icon name="dongdong" size="24"></nut-icon>
-  <nut-icon name="dongdong" size="16"></nut-icon>
+  <IconFont name="dongdong"></IconFont>
+  <IconFont name="dongdong" size="24"></IconFont>
+  <IconFont name="dongdong" size="16"></IconFont>
 </template>
 ```
 :::
@@ -79,13 +79,13 @@ import { IconFont } from '@nutui/icons-vue-taro';
 :::demo
 ```html
 <template>
-  <nut-icon name="dou-arrow-up" class="nut-icon-am-jump nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="star-fill-n" class="nut-icon-am-blink nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="refresh2" class="nut-icon-am-rotate nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="heart-fill" class="nut-icon-am-breathe nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="microphone" class="nut-icon-am-flash nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="download" class="nut-icon-am-bounce nut-icon-am-infinite"></nut-icon>
-  <nut-icon name="message" class="nut-icon-am-shake nut-icon-am-infinite"></nut-icon>
+  <IconFont name="dou-arrow-up" class="nut-icon-am-jump nut-icon-am-infinite"></IconFont>
+  <IconFont name="star-fill-n" class="nut-icon-am-blink nut-icon-am-infinite"></IconFont>
+  <IconFont name="refresh2" class="nut-icon-am-rotate nut-icon-am-infinite"></IconFont>
+  <IconFont name="heart-fill" class="nut-icon-am-breathe nut-icon-am-infinite"></IconFont>
+  <IconFont name="microphone" class="nut-icon-am-flash nut-icon-am-infinite"></IconFont>
+  <IconFont name="download" class="nut-icon-am-bounce nut-icon-am-infinite"></IconFont>
+  <IconFont name="message" class="nut-icon-am-shake nut-icon-am-infinite"></IconFont>
 </template>
 
 <style>
@@ -134,7 +134,7 @@ import './assets/font/iconfont.css';
   class-prefix 指定默认 icon
   name 值根据 iconfont.css 中值对应填写 
 -->
-<nut-icon font-class-name="iconfont" class-prefix="icon" name="close" />
+<IconFont font-class-name="iconfont" class-prefix="icon" name="close" />
 ```
 
 
@@ -162,7 +162,7 @@ import './assets/font/iconfont.css';
   font-class-name 指定类名为默认 my-icon
   class-prefix 指定默认 my-icon
 -->
-<nut-icon font-class-name="my-icon" class-prefix="my-icon" name="extra" />
+<IconFont font-class-name="my-icon" class-prefix="my-icon" name="extra" />
 
 ```
 

src/sites/doc/components/IconDemo.vue

@@ -0,0 +1,668 @@
+<template>
+  <ul class="icon-demo">
+    <li>
+      <Add />
+      <span>Add</span>
+    </li>
+    <li>
+      <Addfollow />
+      <span>Addfollow</span>
+    </li>
+    <li>
+      <ArrowDown />
+      <span>ArrowDown</span>
+    </li>
+    <li>
+      <ArrowDown2 />
+      <span>ArrowDown2</span>
+    </li>
+    <li>
+      <ArrowRight />
+      <span>ArrowRight</span>
+    </li>
+    <li>
+      <ArrowRight2 />
+      <span>ArrowRight2</span>
+    </li>
+    <li>
+      <ArrowUp />
+      <span>ArrowUp</span>
+    </li>
+    <li>
+      <ArrowUp2 />
+      <span>ArrowUp2</span>
+    </li>
+    <li>
+      <Ask />
+      <span>Ask</span>
+    </li>
+    <li>
+      <Ask2 />
+      <span>Ask2</span>
+    </li>
+    <li>
+      <Cart />
+      <span>Cart</span>
+    </li>
+    <li>
+      <Cart2 />
+      <span>Cart2</span>
+    </li>
+    <li>
+      <Category />
+      <span>Category</span>
+    </li>
+    <li>
+      <CheckChecked />
+      <span>CheckChecked</span>
+    </li>
+    <li>
+      <CheckDisabled />
+      <span>CheckDisabled</span>
+    </li>
+    <li>
+      <CheckNormal />
+      <span>CheckNormal</span>
+    </li>
+    <li>
+      <Check />
+      <span>Check</span>
+    </li>
+    <li>
+      <Checked />
+      <span>Checked</span>
+    </li>
+    <li>
+      <Checklist />
+      <span>Checklist</span>
+    </li>
+    <li>
+      <CircleClose />
+      <span>CircleClose</span>
+    </li>
+    <li>
+      <Clock />
+      <span>Clock</span>
+    </li>
+    <li>
+      <CloseLittle />
+      <span>CloseLittle</span>
+    </li>
+    <li>
+      <Close />
+      <span>Close</span>
+    </li>
+    <li>
+      <Comment />
+      <span>Comment</span>
+    </li>
+    <li>
+      <Date />
+      <span>Date</span>
+    </li>
+    <li>
+      <Del />
+      <span>Del</span>
+    </li>
+    <li>
+      <Del2 />
+      <span>Del2</span>
+    </li>
+    <li>
+      <Dongdong />
+      <span>Dongdong</span>
+    </li>
+    <li>
+      <DouArrowUp />
+      <span>DouArrowUp</span>
+    </li>
+    <li>
+      <DownArrow />
+      <span>DownArrow</span>
+    </li>
+    <li>
+      <Download />
+      <span>Download</span>
+    </li>
+    <li>
+      <Dshop />
+      <span>Dshop</span>
+    </li>
+    <li>
+      <Edit />
+      <span>Edit</span>
+    </li>
+    <li>
+      <Eye />
+      <span>Eye</span>
+    </li>
+    <li>
+      <Fabulous />
+      <span>Fabulous</span>
+    </li>
+    <li>
+      <Failure />
+      <span>Failure</span>
+    </li>
+    <li>
+      <Find />
+      <span>Find</span>
+    </li>
+    <li>
+      <Follow />
+      <span>Follow</span>
+    </li>
+    <li>
+      <Footprint />
+      <span>Footprint</span>
+    </li>
+    <li>
+      <Github />
+      <span>Github</span>
+    </li>
+    <li>
+      <HeartFillN />
+      <span>HeartFillN</span>
+    </li>
+    <li>
+      <HeartFill />
+      <span>HeartFill</span>
+    </li>
+    <li>
+      <HeartFill1 />
+      <span>HeartFill1</span>
+    </li>
+    <li>
+      <HeartFill2 />
+      <span>HeartFill2</span>
+    </li>
+    <li>
+      <HeartFill3 />
+      <span>HeartFill3</span>
+    </li>
+    <li>
+      <HeartN />
+      <span>HeartN</span>
+    </li>
+    <li>
+      <Heart />
+      <span>Heart</span>
+    </li>
+    <li>
+      <Heart1 />
+      <span>Heart1</span>
+    </li>
+    <li>
+      <Heart2 />
+      <span>Heart2</span>
+    </li>
+    <li>
+      <Home />
+      <span>Home</span>
+    </li>
+    <li>
+      <HorizontalN />
+      <span>HorizontalN</span>
+    </li>
+    <li>
+      <Horizontal />
+      <span>Horizontal</span>
+    </li>
+    <li>
+      <ImageError />
+      <span>ImageError</span>
+    </li>
+    <li>
+      <Image />
+      <span>Image</span>
+    </li>
+    <li>
+      <Issue />
+      <span>Issue</span>
+    </li>
+    <li>
+      <Jd />
+      <span>Jd</span>
+    </li>
+    <li>
+      <Jdl />
+      <span>Jdl</span>
+    </li>
+    <li>
+      <Jimi40 />
+      <span>Jimi40</span>
+    </li>
+    <li>
+      <JoySmile />
+      <span>JoySmile</span>
+    </li>
+    <li>
+      <Left />
+      <span>Left</span>
+    </li>
+    <li>
+      <Link />
+      <span>Link</span>
+    </li>
+    <li class="inside">
+      <Loading name="loading" />
+      <span>Loading</span>
+    </li>
+    <li>
+      <Loading1 />
+      <span>Loading1</span>
+    </li>
+    <li>
+      <Location />
+      <span>Location</span>
+    </li>
+    <li>
+      <Location2 />
+      <span>Location2</span>
+    </li>
+    <li>
+      <Locationg3 />
+      <span>Locationg3</span>
+    </li>
+    <li>
+      <Lower />
+      <span>Lower</span>
+    </li>
+    <li>
+      <Marshalling />
+      <span>Marshalling</span>
+    </li>
+    <li>
+      <MaskClose />
+      <span>MaskClose</span>
+    </li>
+    <li>
+      <Message />
+      <span>Message</span>
+    </li>
+    <li>
+      <Microphone />
+      <span>Microphone</span>
+    </li>
+    <li>
+      <Minus />
+      <span>Minus</span>
+    </li>
+    <li>
+      <MoreS />
+      <span>MoreS</span>
+    </li>
+    <li>
+      <MoreX />
+      <span>MoreX</span>
+    </li>
+    <li>
+      <More />
+      <span>More</span>
+    </li>
+    <li>
+      <My />
+      <span>My</span>
+    </li>
+    <li>
+      <My2 />
+      <span>My2</span>
+    </li>
+    <li>
+      <Notice />
+      <span>Notice</span>
+    </li>
+    <li>
+      <Order />
+      <span>Order</span>
+    </li>
+    <li>
+      <People />
+      <span>People</span>
+    </li>
+    <li>
+      <Photograph />
+      <span>Photograph</span>
+    </li>
+    <li>
+      <PlayCircleFill />
+      <span>PlayCircleFill</span>
+    </li>
+    <li>
+      <PlayDoubleBack />
+      <span>PlayDoubleBack</span>
+    </li>
+    <li>
+      <PlayDoubleForward />
+      <span>PlayDoubleForward</span>
+    </li>
+    <li>
+      <PlayStart />
+      <span>PlayStart</span>
+    </li>
+    <li>
+      <PlayStop />
+      <span>PlayStop</span>
+    </li>
+    <li>
+      <Plus />
+      <span>Plus</span>
+    </li>
+    <li>
+      <PoweroffCircleFill />
+      <span>PoweroffCircleFill</span>
+    </li>
+    <li>
+      <RectDown />
+      <span>RectDown</span>
+    </li>
+    <li>
+      <RectLeft />
+      <span>RectLeft</span>
+    </li>
+    <li>
+      <RectRight />
+      <span>RectRight</span>
+    </li>
+    <li>
+      <RectUp />
+      <span>RectUp</span>
+    </li>
+    <li>
+      <Refresh />
+      <span>Refresh</span>
+    </li>
+    <li>
+      <Refresh2 />
+      <span>Refresh2</span>
+    </li>
+    <li>
+      <Retweet />
+      <span>Retweet</span>
+    </li>
+    <li>
+      <Right />
+      <span>Right</span>
+    </li>
+    <li>
+      <SFollow />
+      <span>SFollow</span>
+    </li>
+    <li>
+      <Scan />
+      <span>Scan</span>
+    </li>
+    <li>
+      <Scan2 />
+      <span>Scan2</span>
+    </li>
+    <li>
+      <ScreenLittle />
+      <span>ScreenLittle</span>
+    </li>
+    <li>
+      <Search />
+      <span>Search</span>
+    </li>
+    <li>
+      <Search2 />
+      <span>Search2</span>
+    </li>
+    <li>
+      <Service />
+      <span>Service</span>
+    </li>
+    <li>
+      <Setting />
+      <span>Setting</span>
+    </li>
+    <li>
+      <ShareN />
+      <span>ShareN</span>
+    </li>
+    <li>
+      <Share />
+      <span>Share</span>
+    </li>
+    <li>
+      <Share1 />
+      <span>Share1</span>
+    </li>
+    <li>
+      <Shop />
+      <span>Shop</span>
+    </li>
+    <li>
+      <Shop3 />
+      <span>Shop3</span>
+    </li>
+    <li>
+      <StarFillN />
+      <span>StarFillN</span>
+    </li>
+    <li>
+      <StarFill />
+      <span>StarFill</span>
+    </li>
+    <li>
+      <StarFill1 />
+      <span>StarFill1</span>
+    </li>
+    <li>
+      <StarFill2 />
+      <span>StarFill2</span>
+    </li>
+    <li>
+      <StarN />
+      <span>StarN</span>
+    </li>
+    <li>
+      <Star />
+      <span>Star</span>
+    </li>
+    <li>
+      <Star1 />
+      <span>Star1</span>
+    </li>
+    <li>
+      <Star11 />
+      <span>Star11</span>
+    </li>
+    <li>
+      <Star2 />
+      <span>Star2</span>
+    </li>
+    <li>
+      <Success />
+      <span>Success</span>
+    </li>
+    <li>
+      <Tips />
+      <span>Tips</span>
+    </li>
+    <li>
+      <Top />
+      <span>Top</span>
+    </li>
+    <li>
+      <TriangleDown />
+      <span>TriangleDown</span>
+    </li>
+    <li>
+      <TriangleUp />
+      <span>TriangleUp</span>
+    </li>
+    <li>
+      <Uploader />
+      <span>Uploader</span>
+    </li>
+    <li>
+      <Voice />
+      <span>Voice</span>
+    </li>
+  </ul>
+</template>
+<script lang="ts" setup>
+import {
+  Add,
+  Addfollow,
+  ArrowDown,
+  ArrowDown2,
+  ArrowRight,
+  ArrowRight2,
+  ArrowUp,
+  ArrowUp2,
+  Ask,
+  Ask2,
+  Cart,
+  Cart2,
+  Category,
+  CheckChecked,
+  CheckDisabled,
+  CheckNormal,
+  Check,
+  Checked,
+  Checklist,
+  CircleClose,
+  Clock,
+  CloseLittle,
+  Close,
+  Comment,
+  Date,
+  Del,
+  Del2,
+  Dongdong,
+  DouArrowUp,
+  DownArrow,
+  Download,
+  Dshop,
+  Edit,
+  Eye,
+  Fabulous,
+  Failure,
+  Find,
+  Follow,
+  Footprint,
+  Github,
+  HeartFillN,
+  HeartFill,
+  HeartFill1,
+  HeartFill2,
+  HeartFill3,
+  HeartN,
+  Heart,
+  Heart1,
+  Heart2,
+  Home,
+  HorizontalN,
+  Horizontal,
+  ImageError,
+  Image,
+  Issue,
+  Jd,
+  Jdl,
+  Jimi40,
+  JoySmile,
+  Left,
+  Link,
+  Loading,
+  Loading1,
+  Location,
+  Location2,
+  Locationg3,
+  Lower,
+  Marshalling,
+  MaskClose,
+  Message,
+  Microphone,
+  Minus,
+  MoreS,
+  MoreX,
+  More,
+  My,
+  My2,
+  Notice,
+  Order,
+  People,
+  Photograph,
+  PlayCircleFill,
+  PlayDoubleBack,
+  PlayDoubleForward,
+  PlayStart,
+  PlayStop,
+  Plus,
+  PoweroffCircleFill,
+  RectDown,
+  RectLeft,
+  RectRight,
+  RectUp,
+  Refresh,
+  Refresh2,
+  Retweet,
+  Right,
+  SFollow,
+  Scan,
+  Scan2,
+  ScreenLittle,
+  Search,
+  Search2,
+  Service,
+  Setting,
+  ShareN,
+  Share,
+  Share1,
+  Shop,
+  Shop3,
+  StarFillN,
+  StarFill,
+  StarFill1,
+  StarFill2,
+  StarN,
+  Star,
+  Star1,
+  Star11,
+  Star2,
+  Success,
+  Tips,
+  Top,
+  TriangleDown,
+  TriangleUp,
+  Uploader,
+  Voice
+} from '@nutui/icons-vue';
+</script>
+<style lang="scss">
+.icon-demo {
+  display: flex;
+  flex-wrap: wrap;
+  border-top: 1px solid #dcdfe6;
+  border-left: 1px solid #dcdfe6;
+  width: 901px;
+  margin: 10px auto;
+  li {
+    &::before {
+      content: none !important;
+    }
+    margin: 0 !important;
+    padding: 0 !important;
+    border-right: 1px solid #dcdfe6;
+    border-bottom: 1px solid #dcdfe6;
+    height: 87px;
+    width: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    > span {
+      font-size: 12px;
+      line-height: 12px;
+      margin-top: 10px;
+    }
+    > svg {
+      height: 20px;
+      width: 20px;
+    }
+  }
+}
+</style>

src/sites/doc/main.ts

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

vite.config.build.taro.vue.disperse.ts

@@ -56,7 +56,14 @@ export default defineConfig({
     },
     rollupOptions: {
       // 请确保外部化那些你的库中不需要的依赖
-      external: ['vue', 'vue-router', '@tarojs/taro', '@/packages/locale', '@tarojs/components', '@nutui/icons-vue'],
+      external: [
+        'vue',
+        'vue-router',
+        '@tarojs/taro',
+        '@/packages/locale',
+        '@tarojs/components',
+        '@nutui/icons-vue-taro'
+      ],
       input,
       output: {
         banner,