feat(icon): fontClassName prop

src/packages/__VUE/icon/demo.vue

@@ -10,7 +10,8 @@
       <nut-icon
         size="40"
         name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-      ></nut-icon>
+      >
+      </nut-icon>
     </nut-cell>
     <h2>图标颜色</h2>
     <nut-cell>
@@ -23,23 +24,25 @@
     <nut-cell>
       <nut-icon name="dongdong"></nut-icon>
       <nut-icon name="dongdong" size="24"></nut-icon>
-      <nut-icon name="dongdong" size="16"></nut-icon>
+      <nut-icon name="dongdong" size="26"></nut-icon>
     </nut-cell>
 
-    <h2>基础图标</h2>
-    <nut-cell>
-      <ul>
-        <li v-for="item in icons.glyphs" :key="item.font_class">
-          <nut-icon :name="item.font_class"></nut-icon>
-          <span>{{ item.name }}</span>
-        </li>
-      </ul>
-    </nut-cell>
+    <nut-cell-group v-for="item in icons.data" :title="item.name">
+      <nut-cell>
+        <ul>
+          <li v-for="item in item.icons" :key="item">
+            <nut-icon :name="item"></nut-icon>
+            <span>{{ item }}</span>
+          </li>
+        </ul>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 
 <script lang="ts">
-import icons from '@/packages/styles/font/iconfont.json';
+// import icons from '@/packages/styles/font/iconfont.json';
+import icons from '@/packages/styles/font/config.json';
 import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('icon');
 export default createDemo({
@@ -59,7 +62,6 @@ export default createDemo({
 ul {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
   li {
     flex: 0 0 25%;
     max-width: 25%;
@@ -70,6 +72,8 @@ ul {
 
     span {
       height: 40px;
+      font-size: 12px;
+      text-align: center;
     }
     .nutui-iconfont {
       margin: 16px 0 16px;

src/packages/__VUE/icon/doc.md

@@ -54,6 +54,43 @@ app.use(Icon);
 
 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
 
+> 方案一 引入 [iconfont](https://www.iconfont.cn/)   推荐此方案
+
+第一步：首先在 [iconfont](https://www.iconfont.cn/) 生成你自定义的Icon文件下载存放至本地项目  [详细使用说明](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code)
+
+``` bash
+/assets/font/demo.css
+/assets/font/demo_index.html
+/assets/font/iconfont.css
+/assets/font/iconfont.js
+/assets/font/iconfont.json
+/assets/font/iconfont.ttf
+/assets/font/iconfont.woff
+/assets/font/iconfont.woff2
+```
+
+第二步：项目入口文件 main.js 引用 `iconfont.css`
+
+
+``` javascript
+import './assets/font/iconfont.css';
+```
+
+第三步：
+
+```html
+<!-- 
+  font-class-name 指定类名为默认 iconfont
+  class-prefix 指定默认 icon
+  name 值根据 iconfont.css 中值对应填写 
+-->
+<nut-icon font-class-name="iconfont" class-prefix="icon" name="close" />
+```
+
+
+
+> 方案二 第三方自定义字体库
+
 ```css
 /* 引入第三方或自定义的字体图标样式 */
 @font-face {
@@ -71,8 +108,12 @@ app.use(Icon);
 ```
 
 ```html
-<!-- 通过 class-prefix 指定类名为 my-icon -->
-<nut-icon class-prefix="my-icon" name="extra" />
+<!-- 
+  font-class-name 指定类名为默认 my-icon
+  class-prefix 指定默认 my-icon
+-->
+<nut-icon font-class-name="my-icon" class-prefix="my-icon" name="extra" />
+
 ```
 
 ## API
@@ -84,7 +125,8 @@ app.use(Icon);
 | name         | 图标名称或图片链接               | String           | -                |
 | color        | 图标颜色                         | String           | -                |
 | size         | 图标大小，如 `20px` `2em` `2rem` | String or Number | -                |
-| class-prefix | 类名前缀，用于使用自定义图标     | String           | `nutui-iconfont` |
+| font-class-name | 字体基础类名     | String           | `nutui-iconfont` |
+| class-prefix | 类名前缀，用于使用自定义图标     | String           | `nut-icon` |
 | tag          | HTML 标签                        | String           | `i`              |
 
 ### Events

src/packages/__VUE/icon/index.taro.vue

@@ -8,7 +8,8 @@ export default create({
   props: {
     name: { type: String, default: '' },
     size: { type: [String, Number], default: '' },
-    classPrefix: { type: String, default: 'nutui-iconfont' },
+    classPrefix: { type: String, default: 'nut-icon' },
+    fontClassName: { type: String, default: 'nutui-iconfont' },
     color: { type: String, default: '' },
     tag: { type: String as PropType<keyof HTMLElementTagNameMap>, default: 'i' }
   },
@@ -30,7 +31,7 @@ export default create({
         {
           class: _isImage
             ? `${componentName}__img`
-            : `${props.classPrefix} ${componentName} ${componentName}-${props.name}`,
+            : `${props.fontClassName} ${componentName} ${props.classPrefix}-${props.name}`,
           style: {
             color: props.color,
             fontSize: pxCheck(props.size),

src/packages/__VUE/icon/index.vue

@@ -8,7 +8,8 @@ export default create({
   props: {
     name: { type: String, default: '' },
     size: { type: [String, Number], default: '' },
-    classPrefix: { type: String, default: 'nutui-iconfont' },
+    classPrefix: { type: String, default: 'nut-icon' },
+    fontClassName: { type: String, default: 'nutui-iconfont' },
     color: { type: String, default: '' },
     tag: { type: String as PropType<keyof HTMLElementTagNameMap>, default: 'i' }
   },
@@ -30,7 +31,7 @@ export default create({
         {
           class: _isImage
             ? `${componentName}__img`
-            : `${props.classPrefix} ${componentName} ${componentName}-${props.name}`,
+            : `${props.fontClassName} ${componentName} ${props.classPrefix}-${props.name}`,
           style: {
             color: props.color,
             fontSize: pxCheck(props.size),

src/packages/styles/font/config.js

@@ -1,111 +0,0 @@
-module.exports = {
-  name: 'nutui-icon',
-  // 功能图标小尺寸
-  sizeSmall: [
-    'ask',
-    'tips',
-    'notice',
-    'lower',
-    'top',
-    'download',
-    'dongdong',
-    'JIMI40',
-    'location',
-    'scan',
-    'addfollow',
-    'search',
-    'share',
-    'follow',
-    'del',
-    'edit',
-    'cart',
-    'home',
-    'find',
-    'category',
-    'my',
-    'footprint',
-    'link',
-    'scan2',
-    'left',
-    'close',
-    'locationg3',
-    'share',
-    'shop3',
-    'message',
-    'ask2',
-    'search2',
-    'clock',
-    'setting',
-    'refresh2',
-    'horizontal',
-    'date',
-    'photograph',
-    'more-s'
-  ],
-  // 规范里面的粗icon
-  sizeBold: [
-    'order',
-    'refresh',
-    'add',
-    'JD',
-    'eye',
-    'dshop',
-    'my2',
-    'star',
-    'del2',
-    'more-x',
-    'comment',
-    'microphone',
-    'people',
-    'service',
-    'cart2',
-    'location2',
-    'marshalling',
-    'fabulous',
-    's-follow',
-    'shop',
-    'jdl'
-  ],
-  // 基础图标
-  basic: [
-    'uplode',
-    'mask-close',
-    'circle-close',
-    'right',
-    'arrow-right',
-    'github',
-    'screen-little',
-    'plus',
-    'minus',
-    'Check',
-    'issue',
-    'failure',
-    'success',
-    'retweet',
-    'poweroff-circle-fill',
-    'play-circle-fill',
-    'checked',
-    'checklist',
-    'check-disabled',
-    'check-normal',
-    'check-checked',
-    'loading'
-  ],
-
-  // 应用图标
-  app: [
-    'arrow-up',
-    'arrow-down',
-    'arrow-up2',
-    'arrow-down2',
-    'down-arrow',
-    'joy-smile',
-    'close-little',
-    'horizontal-nv',
-    'share-n',
-    'nut-icon-heart1',
-    'nut-icon-heart-fill',
-    'nut-icon-star-n',
-    'nut-icon-star-fill-n'
-  ]
-};

src/packages/styles/font/config.json

@@ -0,0 +1,120 @@
+{
+  "name": "nutui-icon",
+  "data": [
+    {
+      "name": "粗体 Icon",
+      "icons": [
+        "order",
+        "refresh",
+        "add",
+        "JD",
+        "eye",
+        "dshop",
+        "my2",
+        "star",
+        "del2",
+        "more-x",
+        "comment",
+        "microphone",
+        "people",
+        "service",
+        "cart2",
+        "location2",
+        "marshalling",
+        "fabulous",
+        "s-follow",
+        "shop",
+        "jdl"
+      ]
+    },
+    {
+      "name": "细体 Icon",
+      "icons": [
+        "ask",
+        "tips",
+        "notice",
+        "lower",
+        "top",
+        "download",
+        "dongdong",
+        "JIMI40",
+        "location",
+        "scan",
+        "addfollow",
+        "search",
+        "share",
+        "follow",
+        "del",
+        "edit",
+        "cart",
+        "home",
+        "find",
+        "category",
+        "my",
+        "footprint",
+        "link",
+        "scan2",
+        "left",
+        "close",
+        "locationg3",
+        "share",
+        "shop3",
+        "message",
+        "ask2",
+        "search2",
+        "clock",
+        "setting",
+        "refresh2",
+        "horizontal",
+        "date",
+        "photograph",
+        "more-s"
+      ]
+    },
+    {
+      "name": "应用图标",
+      "icons": [
+        "arrow-up",
+        "arrow-down",
+        "arrow-up2",
+        "arrow-down2",
+        "down-arrow",
+        "joy-smile",
+        "close-little",
+        "horizontal-n",
+        "share-n",
+        "heart1",
+        "heart-fill",
+        "star-n",
+        "star-fill-n"
+      ]
+    },
+    {
+      "name": "基础图标",
+      "icons": [
+        "uploader",
+        "mask-close",
+        "circle-close",
+        "right",
+        "arrow-right",
+        "github",
+        "screen-little",
+        "plus",
+        "minus",
+        "Check",
+        "issue",
+        "failure",
+        "success",
+        "retweet",
+        "poweroff-circle-fill",
+        "play-circle-fill",
+        "checked",
+        "checklist",
+        "check-disabled",
+        "check-normal",
+        "check-checked",
+        "loading"
+      ]
+    }
+  ]
+}

src/sites/mobile-taro/vue/src/base/pages/icon/index.vue

@@ -10,7 +10,8 @@
       <nut-icon
         size="40"
         name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-      ></nut-icon>
+      >
+      </nut-icon>
     </nut-cell>
     <h2>图标颜色</h2>
     <nut-cell>
@@ -23,23 +24,24 @@
     <nut-cell>
       <nut-icon name="dongdong"></nut-icon>
       <nut-icon name="dongdong" size="24"></nut-icon>
-      <nut-icon name="dongdong" size="16"></nut-icon>
+      <nut-icon name="dongdong" size="26"></nut-icon>
     </nut-cell>
 
-    <h2>基础图标</h2>
-    <nut-cell>
-      <ul>
-        <li v-for="item in icons.glyphs" :key="item.font_class">
-          <nut-icon :name="item.font_class"></nut-icon>
-          <span>{{ item.name }}</span>
-        </li>
-      </ul>
-    </nut-cell>
+    <nut-cell-group v-for="item in icons.data" :title="item.name">
+      <nut-cell>
+        <ul>
+          <li v-for="item in item.icons" :key="item">
+            <nut-icon :name="item"></nut-icon>
+            <span>{{ item }}</span>
+          </li>
+        </ul>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 
 <script lang="ts">
-import icons from './../../../../../../../packages/styles/font/iconfont.json';
+import icons from './../../../../../../../packages/styles/font/config.json';
 export default {
   props: {},
   setup() {
@@ -57,7 +59,6 @@ export default {
 ul {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
   li {
     flex: 0 0 25%;
     max-width: 25%;
@@ -68,6 +69,8 @@ ul {
 
     span {
       height: 40px;
+      font-size: 12px;
+      text-align: center;
     }
     .nutui-iconfont {
       margin: 16px 0 16px;