feat: icon

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: ['@vue/cli-plugin-babel/preset']
 };

commitlint.config.js

@@ -12,4 +12,4 @@ module.exports = {
     'type-empty': [2, 'never'],
     'type-enum': [2, 'always', ['upd', 'chore', 'docs', 'feat', 'fix', 'test', 'refactor', 'revert', 'style']]
   }
-}
+};

src/nutui.ts

@@ -1 +1,10 @@
-export default {};
+import { App } from 'vue';
+export default {
+  install(app: App<Element>): void {
+    const files = require.context('@/packages', true, /index\.vue$/);
+    files.keys().forEach(component => {
+      const componentEntity = files(component).default;
+      app.component(componentEntity.name, componentEntity);
+    });
+  }
+};

src/packages/button/demo.vue

@@ -45,14 +45,12 @@
 </template>
 
 <script lang="ts">
-import Button from '@/packages/button/index.vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('button');
 export default createDemo({
   props: {
     text: String
   },
-  components: { [Button.name]: Button },
   emits: ['click']
 });
 </script>

src/packages/cell/demo.vue

@@ -11,12 +11,10 @@
 </template>
 
 <script lang="ts">
-import Cell from '@/packages/cell/index.vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('cell');
 export default createDemo({
   props: {},
-  components: { [Cell.name]: Cell },
   emits: ['click']
 });
 </script>

src/packages/icon/demo.vue

@@ -1,18 +1,71 @@
 <template>
   <div class="demo">
-    icon
+    <h2>基础用法</h2>
+    <nut-cell>
+      <nut-icon name="wifi"></nut-icon>
+      <nut-icon name="mail"></nut-icon>
+    </nut-cell>
+    <h2>图标颜色</h2>
+    <nut-cell>
+      <nut-icon name="mail" color="#fa2c19"></nut-icon>
+      <nut-icon name="mail" color="#64b578"></nut-icon>
+    </nut-cell>
+
+    <h2>图标大小</h2>
+    <nut-cell>
+      <nut-icon name="mail"></nut-icon>
+      <nut-icon name="mail" size="24px"></nut-icon>
+      <nut-icon name="mail" size="16px"></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>
   </div>
 </template>
 
 <script lang="ts">
-import Icon from '@/packages/icon/index.vue';
+import icons from '@/styles/font/iconfont.json';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('icon');
 export default createDemo({
   props: {},
-  components: { [Icon.name]: Icon },
-  emits: ['click']
+  setup() {
+    return { icons };
+  }
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.nut-cell {
+  > .nutui-iconfont {
+    margin-right: 10px;
+  }
+}
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  li {
+    flex: 0 0 25%;
+    max-width: 25%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      height: 40px;
+    }
+    .nutui-iconfont {
+      margin: 16px 0 16px;
+    }
+  }
+}
+</style>

src/packages/icon/doc.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-图标组件
+基于 IconFont 字体的图标集，可以通过 Icon 组件使用。
 
 ### 安装
 
@@ -14,3 +14,77 @@ const app = createApp();
 app.use(Icon);
 
 ```
+
+## 代码演示
+
+### 基础用法
+
+`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+
+```html
+<nut-icon name="wifi"></nut-icon>
+<nut-icon name="mail"></nut-icon>
+```
+
+### 图标颜色
+
+`Icon` 的 `color` 属性用来设置图标的颜色。
+
+```html
+<nut-icon name="mail" color="#fa2c19"></nut-icon>
+<nut-icon name="mail" color="#64b578"></nut-icon>
+```
+
+### 图标大小
+
+`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。
+
+```html
+<nut-icon name="mail"></nut-icon>
+<nut-icon name="mail" size="24px"></nut-icon>
+<nut-icon name="mail" size="16px"></nut-icon>
+```
+
+### 自定义图标
+
+如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
+
+```css
+/* 引入第三方或自定义的字体图标样式 */
+@font-face {
+  font-family: 'my-icon';
+  src: url('./my-icon.ttf') format('truetype');
+}
+
+.my-icon {
+  font-family: 'my-icon';
+}
+
+.my-icon-extra::before {
+  content: '\e626';
+}
+```
+
+```html
+<!-- 通过 class-prefix 指定类名为 my-icon -->
+<nut-icon class-prefix="my-icon" name="extra" />
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 图标名称或图片链接 | _string_ | - |
+| color | 图标颜色 | _string_ | - |
+| size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | - |
+| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `nutui-icon` |
+| tag | HTML 标签 | _string_ | `i` |
+
+### Events
+
+| 事件名 | 说明           | 回调参数       |
+| ------ | -------------- | -------------- |
+| click  | 点击图标时触发 | _event: Event_ |
+

src/packages/icon/index.scss

@@ -1,3 +1,4 @@
+@import '../../styles/font/iconfont.css';
 .nut-icon {
   width: 20px;
   height: 20px;

src/packages/icon/index.vue

@@ -1,38 +1,41 @@
-<template>
-  <view :class="classes" @click="handleClick">
-    >
-  </view>
-</template>
-
 <script lang="ts">
-import { toRefs, computed } from 'vue';
+import { toRefs, h, PropType } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('icon');
 
 export default create({
   props: {
-    name: { type: String, default: '' }
+    name: {
+      type: String,
+      default: 'right'
+    },
+    size: [Number, String],
+    color: String,
+    tag: {
+      type: String as PropType<keyof HTMLElementTagNameMap>,
+      default: 'i'
+    }
   },
   components: {},
   emits: ['click'],
-  setup(props, { emit }) {
-    const { name } = toRefs(props);
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
+
+  setup(props, { emit, slots }) {
+    const { name, tag, color, size } = toRefs(props);
 
     const handleClick = (event: Event) => {
       emit('click', event);
     };
 
-    return {
-      handleClick,
-      name,
-      classes
-    };
+    return () =>
+      h(
+        tag.value,
+        {
+          class: `nutui-iconfont ${componentName}-${name.value}`,
+          style: { color: color?.value, fontSize: size?.value },
+          onClick: handleClick
+        },
+        slots.default?.()
+      );
   }
 });
 </script>

src/packages/price/demo.vue

@@ -16,17 +16,11 @@
 </template>
 
 <script lang="ts">
-import Price from '@/packages/price/index.vue';
-import Cell from '@/packages/cell/index.vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('price');
 export default createDemo({
   props: {
     text: String
-  },
-  components: {
-    [Price.name]: Price,
-    [Cell.name]: Cell
   }
 });
 </script>

src/sites/mobile/App.vue

@@ -5,7 +5,6 @@
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-
 import { isMobile } from '@/sites/assets/util';
 export default defineComponent({
   name: 'app',
@@ -18,7 +17,8 @@ export default defineComponent({
     watch(
       () => route,
       () => {
-        const { origin, hash, pathname } = window.top.location;
+        // const { origin, hash, pathname } = window.top.location;
+        const { hash } = window.top.location;
         if (!isMobile && route.hash != hash) {
           // window.top.location.replace(`${origin}${pathname}#/${route.hash}`);
           title.value = route.name as string;
@@ -52,6 +52,7 @@ export default defineComponent({
 
   #nav {
     position: fixed;
+    z-index: 10;
     left: 0;
     right: 0;
     height: 57px;

src/sites/mobile/main.ts

@@ -1,8 +1,9 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
+import NutUI from '@/nutui';
 import '@/sites/assets/styles/reset.scss';
-
 createApp(App)
   .use(router)
+  .use(NutUI)
   .mount('#app');

src/styles/font/demo_index.html

@@ -31,121 +31,121 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7de;</span>
+              <span class="icon nutui-iconfont">&#xe7de;</span>
                 <div class="name">mail</div>
                 <div class="code-name">&amp;#xe7de;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7df;</span>
+              <span class="icon nutui-iconfont">&#xe7df;</span>
                 <div class="name">id card</div>
                 <div class="code-name">&amp;#xe7df;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7e0;</span>
+              <span class="icon nutui-iconfont">&#xe7e0;</span>
                 <div class="name">heat map</div>
                 <div class="code-name">&amp;#xe7e0;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7e1;</span>
+              <span class="icon nutui-iconfont">&#xe7e1;</span>
                 <div class="name">wifi</div>
                 <div class="code-name">&amp;#xe7e1;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7e2;</span>
+              <span class="icon nutui-iconfont">&#xe7e2;</span>
                 <div class="name">edit</div>
                 <div class="code-name">&amp;#xe7e2;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7e3;</span>
+              <span class="icon nutui-iconfont">&#xe7e3;</span>
                 <div class="name">key</div>
                 <div class="code-name">&amp;#xe7e3;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7e4;</span>
+              <span class="icon nutui-iconfont">&#xe7e4;</span>
                 <div class="name">link</div>
                 <div class="code-name">&amp;#xe7e4;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7e5;</span>
+              <span class="icon nutui-iconfont">&#xe7e5;</span>
                 <div class="name">man</div>
                 <div class="code-name">&amp;#xe7e5;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7e6;</span>
+              <span class="icon nutui-iconfont">&#xe7e6;</span>
                 <div class="name">percentage</div>
                 <div class="code-name">&amp;#xe7e6;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7e7;</span>
+              <span class="icon nutui-iconfont">&#xe7e7;</span>
                 <div class="name">pushpin</div>
                 <div class="code-name">&amp;#xe7e7;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7e8;</span>
+              <span class="icon nutui-iconfont">&#xe7e8;</span>
                 <div class="name">fork</div>
                 <div class="code-name">&amp;#xe7e8;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7e9;</span>
+              <span class="icon nutui-iconfont">&#xe7e9;</span>
                 <div class="name">shrink</div>
                 <div class="code-name">&amp;#xe7e9;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7ea;</span>
+              <span class="icon nutui-iconfont">&#xe7ea;</span>
                 <div class="name">arrawsalt</div>
                 <div class="code-name">&amp;#xe7ea;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7eb;</span>
+              <span class="icon nutui-iconfont">&#xe7eb;</span>
                 <div class="name">vertical right</div>
                 <div class="code-name">&amp;#xe7eb;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7ec;</span>
+              <span class="icon nutui-iconfont">&#xe7ec;</span>
                 <div class="name">right</div>
                 <div class="code-name">&amp;#xe7ec;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7ed;</span>
+              <span class="icon nutui-iconfont">&#xe7ed;</span>
                 <div class="name">left</div>
                 <div class="code-name">&amp;#xe7ed;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7ee;</span>
+              <span class="icon nutui-iconfont">&#xe7ee;</span>
                 <div class="name">up</div>
                 <div class="code-name">&amp;#xe7ee;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7ef;</span>
+              <span class="icon nutui-iconfont">&#xe7ef;</span>
                 <div class="name">down</div>
                 <div class="code-name">&amp;#xe7ef;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7f0;</span>
+              <span class="icon nutui-iconfont">&#xe7f0;</span>
                 <div class="name">fullscreen</div>
                 <div class="code-name">&amp;#xe7f0;</div>
               </li>
           
             <li class="dib">
-              <span class="icon iconfont">&#xe7f1;</span>
+              <span class="icon nutui-iconfont">&#xe7f1;</span>
                 <div class="name">fullscreen-exit</div>
                 <div class="code-name">&amp;#xe7f1;</div>
               </li>
@@ -168,19 +168,19 @@
           <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
 <pre><code class="language-css"
 >@font-face {
-  font-family: 'iconfont';
+  font-family: 'nutui-iconfont';
   src: url('iconfont.eot');
   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
       url('iconfont.woff2') format('woff2'),
       url('iconfont.woff') format('woff'),
       url('iconfont.ttf') format('truetype'),
-      url('iconfont.svg#iconfont') format('svg');
+      url('iconfont.svg#nutui-iconfont') format('svg');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
 <pre><code class="language-css"
->.iconfont {
-  font-family: "iconfont" !important;
+>.nutui-iconfont {
+  font-family: "nutui-iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -190,10 +190,10 @@
           <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
 <pre>
 <code class="language-html"
->&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+>&lt;span class="nutui-iconfont"&gt;&amp;#x33;&lt;/span&gt;
 </code></pre>
           <blockquote>
-            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+            <p>"nutui-iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
           </blockquote>
           </div>
       </div>
@@ -201,182 +201,182 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
-            <span class="icon iconfont icon-mail"></span>
+            <span class="icon nutui-iconfont nut-icon-mail"></span>
             <div class="name">
               mail
             </div>
-            <div class="code-name">.icon-mail
+            <div class="code-name">.nut-icon-mail
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-idcard"></span>
+            <span class="icon nutui-iconfont nut-icon-idcard"></span>
             <div class="name">
               id card
             </div>
-            <div class="code-name">.icon-idcard
+            <div class="code-name">.nut-icon-idcard
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-heatmap"></span>
+            <span class="icon nutui-iconfont nut-icon-heatmap"></span>
             <div class="name">
               heat map
             </div>
-            <div class="code-name">.icon-heatmap
+            <div class="code-name">.nut-icon-heatmap
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-wifi"></span>
+            <span class="icon nutui-iconfont nut-icon-wifi"></span>
             <div class="name">
               wifi
             </div>
-            <div class="code-name">.icon-wifi
+            <div class="code-name">.nut-icon-wifi
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-edit"></span>
+            <span class="icon nutui-iconfont nut-icon-edit"></span>
             <div class="name">
               edit
             </div>
-            <div class="code-name">.icon-edit
+            <div class="code-name">.nut-icon-edit
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-key"></span>
+            <span class="icon nutui-iconfont nut-icon-key"></span>
             <div class="name">
               key
             </div>
-            <div class="code-name">.icon-key
+            <div class="code-name">.nut-icon-key
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-link"></span>
+            <span class="icon nutui-iconfont nut-icon-link"></span>
             <div class="name">
               link
             </div>
-            <div class="code-name">.icon-link
+            <div class="code-name">.nut-icon-link
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-man"></span>
+            <span class="icon nutui-iconfont nut-icon-man"></span>
             <div class="name">
               man
             </div>
-            <div class="code-name">.icon-man
+            <div class="code-name">.nut-icon-man
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-percentage"></span>
+            <span class="icon nutui-iconfont nut-icon-percentage"></span>
             <div class="name">
               percentage
             </div>
-            <div class="code-name">.icon-percentage
+            <div class="code-name">.nut-icon-percentage
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-pushpin"></span>
+            <span class="icon nutui-iconfont nut-icon-pushpin"></span>
             <div class="name">
               pushpin
             </div>
-            <div class="code-name">.icon-pushpin
+            <div class="code-name">.nut-icon-pushpin
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-fork"></span>
+            <span class="icon nutui-iconfont nut-icon-fork"></span>
             <div class="name">
               fork
             </div>
-            <div class="code-name">.icon-fork
+            <div class="code-name">.nut-icon-fork
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-shrink"></span>
+            <span class="icon nutui-iconfont nut-icon-shrink"></span>
             <div class="name">
               shrink
             </div>
-            <div class="code-name">.icon-shrink
+            <div class="code-name">.nut-icon-shrink
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-arrawsalt"></span>
+            <span class="icon nutui-iconfont nut-icon-arrawsalt"></span>
             <div class="name">
               arrawsalt
             </div>
-            <div class="code-name">.icon-arrawsalt
+            <div class="code-name">.nut-icon-arrawsalt
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-verticalright"></span>
+            <span class="icon nutui-iconfont nut-icon-verticalright"></span>
             <div class="name">
               vertical right
             </div>
-            <div class="code-name">.icon-verticalright
+            <div class="code-name">.nut-icon-verticalright
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-right"></span>
+            <span class="icon nutui-iconfont nut-icon-right"></span>
             <div class="name">
               right
             </div>
-            <div class="code-name">.icon-right
+            <div class="code-name">.nut-icon-right
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-left"></span>
+            <span class="icon nutui-iconfont nut-icon-left"></span>
             <div class="name">
               left
             </div>
-            <div class="code-name">.icon-left
+            <div class="code-name">.nut-icon-left
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-up"></span>
+            <span class="icon nutui-iconfont nut-icon-up"></span>
             <div class="name">
               up
             </div>
-            <div class="code-name">.icon-up
+            <div class="code-name">.nut-icon-up
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-down"></span>
+            <span class="icon nutui-iconfont nut-icon-down"></span>
             <div class="name">
               down
             </div>
-            <div class="code-name">.icon-down
+            <div class="code-name">.nut-icon-down
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-fullscreen"></span>
+            <span class="icon nutui-iconfont nut-icon-fullscreen"></span>
             <div class="name">
               fullscreen
             </div>
-            <div class="code-name">.icon-fullscreen
+            <div class="code-name">.nut-icon-fullscreen
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon iconfont icon-fullscreen-exit"></span>
+            <span class="icon nutui-iconfont nut-icon-fullscreen-exit"></span>
             <div class="name">
               fullscreen-exit
             </div>
-            <div class="code-name">.icon-fullscreen-exit
+            <div class="code-name">.nut-icon-fullscreen-exit
             </div>
           </li>
           
@@ -398,11 +398,11 @@
 <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
 </code></pre>
         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
-<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+<pre><code class="language-html">&lt;span class="nutui-iconfont nut-icon-xxx"&gt;&lt;/span&gt;
 </code></pre>
         <blockquote>
           <p>"
-            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+            nutui-iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
         </blockquote>
       </div>
       </div>
@@ -411,162 +411,162 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-mail"></use>
+                  <use xlink:href="#nut-icon-mail"></use>
                 </svg>
                 <div class="name">mail</div>
-                <div class="code-name">#icon-mail</div>
+                <div class="code-name">#nut-icon-mail</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-idcard"></use>
+                  <use xlink:href="#nut-icon-idcard"></use>
                 </svg>
                 <div class="name">id card</div>
-                <div class="code-name">#icon-idcard</div>
+                <div class="code-name">#nut-icon-idcard</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-heatmap"></use>
+                  <use xlink:href="#nut-icon-heatmap"></use>
                 </svg>
                 <div class="name">heat map</div>
-                <div class="code-name">#icon-heatmap</div>
+                <div class="code-name">#nut-icon-heatmap</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-wifi"></use>
+                  <use xlink:href="#nut-icon-wifi"></use>
                 </svg>
                 <div class="name">wifi</div>
-                <div class="code-name">#icon-wifi</div>
+                <div class="code-name">#nut-icon-wifi</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-edit"></use>
+                  <use xlink:href="#nut-icon-edit"></use>
                 </svg>
                 <div class="name">edit</div>
-                <div class="code-name">#icon-edit</div>
+                <div class="code-name">#nut-icon-edit</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-key"></use>
+                  <use xlink:href="#nut-icon-key"></use>
                 </svg>
                 <div class="name">key</div>
-                <div class="code-name">#icon-key</div>
+                <div class="code-name">#nut-icon-key</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-link"></use>
+                  <use xlink:href="#nut-icon-link"></use>
                 </svg>
                 <div class="name">link</div>
-                <div class="code-name">#icon-link</div>
+                <div class="code-name">#nut-icon-link</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-man"></use>
+                  <use xlink:href="#nut-icon-man"></use>
                 </svg>
                 <div class="name">man</div>
-                <div class="code-name">#icon-man</div>
+                <div class="code-name">#nut-icon-man</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-percentage"></use>
+                  <use xlink:href="#nut-icon-percentage"></use>
                 </svg>
                 <div class="name">percentage</div>
-                <div class="code-name">#icon-percentage</div>
+                <div class="code-name">#nut-icon-percentage</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-pushpin"></use>
+                  <use xlink:href="#nut-icon-pushpin"></use>
                 </svg>
                 <div class="name">pushpin</div>
-                <div class="code-name">#icon-pushpin</div>
+                <div class="code-name">#nut-icon-pushpin</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-fork"></use>
+                  <use xlink:href="#nut-icon-fork"></use>
                 </svg>
                 <div class="name">fork</div>
-                <div class="code-name">#icon-fork</div>
+                <div class="code-name">#nut-icon-fork</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-shrink"></use>
+                  <use xlink:href="#nut-icon-shrink"></use>
                 </svg>
                 <div class="name">shrink</div>
-                <div class="code-name">#icon-shrink</div>
+                <div class="code-name">#nut-icon-shrink</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-arrawsalt"></use>
+                  <use xlink:href="#nut-icon-arrawsalt"></use>
                 </svg>
                 <div class="name">arrawsalt</div>
-                <div class="code-name">#icon-arrawsalt</div>
+                <div class="code-name">#nut-icon-arrawsalt</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-verticalright"></use>
+                  <use xlink:href="#nut-icon-verticalright"></use>
                 </svg>
                 <div class="name">vertical right</div>
-                <div class="code-name">#icon-verticalright</div>
+                <div class="code-name">#nut-icon-verticalright</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-right"></use>
+                  <use xlink:href="#nut-icon-right"></use>
                 </svg>
                 <div class="name">right</div>
-                <div class="code-name">#icon-right</div>
+                <div class="code-name">#nut-icon-right</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-left"></use>
+                  <use xlink:href="#nut-icon-left"></use>
                 </svg>
                 <div class="name">left</div>
-                <div class="code-name">#icon-left</div>
+                <div class="code-name">#nut-icon-left</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-up"></use>
+                  <use xlink:href="#nut-icon-up"></use>
                 </svg>
                 <div class="name">up</div>
-                <div class="code-name">#icon-up</div>
+                <div class="code-name">#nut-icon-up</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-down"></use>
+                  <use xlink:href="#nut-icon-down"></use>
                 </svg>
                 <div class="name">down</div>
-                <div class="code-name">#icon-down</div>
+                <div class="code-name">#nut-icon-down</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-fullscreen"></use>
+                  <use xlink:href="#nut-icon-fullscreen"></use>
                 </svg>
                 <div class="name">fullscreen</div>
-                <div class="code-name">#icon-fullscreen</div>
+                <div class="code-name">#nut-icon-fullscreen</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-fullscreen-exit"></use>
+                  <use xlink:href="#nut-icon-fullscreen-exit"></use>
                 </svg>
                 <div class="name">fullscreen-exit</div>
-                <div class="code-name">#icon-fullscreen-exit</div>
+                <div class="code-name">#nut-icon-fullscreen-exit</div>
             </li>
           
           </ul>

src/styles/font/iconfont.json

@@ -1,9 +1,9 @@
 {
   "id": "2166874",
   "name": "nutui",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon-",
-  "description": "",
+  "font_family": "nutui-iconfont",
+  "css_prefix_text": "nut-icon-",
+  "description": "nutui 3.0字体管理",
   "glyphs": [
     {
       "icon_id": "4766918",

src/styles/font/iconfont.svg

@@ -9,9 +9,9 @@ Created by iconfont
 </metadata>
 <defs>
 
-<font id="iconfont" horiz-adv-x="1024" >
+<font id="nutui-iconfont" horiz-adv-x="1024" >
   <font-face
-    font-family="iconfont"
+    font-family="nutui-iconfont"
     font-weight="500"
     font-stretch="normal"
     units-per-em="1024"

tsconfig.json

@@ -9,6 +9,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
     "sourceMap": true,
     "baseUrl": ".",
     "types": [