feat: icon

babel.config.js

 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

-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

 <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

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

src/packages/icon/index.vue

-<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

 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/iconfont.css

-@font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1603963115614'); /* IE9 */
-  src: url('iconfont.eot?t=1603963115614#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('iconfont.woff?t=1603963115614') format('woff'),
-  url('iconfont.ttf?t=1603963115614') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1603963115614#iconfont') format('svg'); /* iOS 4.1- */
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
+@font-face {font-family: "nutui-iconfont";
+  src: url('iconfont.eot?t=1604561728793'); /* IE9 */
+  src: url('iconfont.eot?t=1604561728793#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1604561728793') format('woff'),
+  url('iconfont.ttf?t=1604561728793') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1604561728793#nutui-iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.nutui-iconfont {
+  font-family: "nutui-iconfont" !important;
+  font-size: 32px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-mail:before {
+.nut-icon-mail:before {
   content: "\e7de";
 }
 
-.icon-idcard:before {
+.nut-icon-idcard:before {
   content: "\e7df";
 }
 
-.icon-heatmap:before {
+.nut-icon-heatmap:before {
   content: "\e7e0";
 }
 
-.icon-wifi:before {
+.nut-icon-wifi:before {
   content: "\e7e1";
 }
 
-.icon-edit:before {
+.nut-icon-edit:before {
   content: "\e7e2";
 }
 
-.icon-key:before {
+.nut-icon-key:before {
   content: "\e7e3";
 }
 
-.icon-link:before {
+.nut-icon-link:before {
   content: "\e7e4";
 }
 
-.icon-man:before {
+.nut-icon-man:before {
   content: "\e7e5";
 }
 
-.icon-percentage:before {
+.nut-icon-percentage:before {
   content: "\e7e6";
 }
 
-.icon-pushpin:before {
+.nut-icon-pushpin:before {
   content: "\e7e7";
 }
 
-.icon-fork:before {
+.nut-icon-fork:before {
   content: "\e7e8";
 }
 
-.icon-shrink:before {
+.nut-icon-shrink:before {
   content: "\e7e9";
 }
 
-.icon-arrawsalt:before {
+.nut-icon-arrawsalt:before {
   content: "\e7ea";
 }
 
-.icon-verticalright:before {
+.nut-icon-verticalright:before {
   content: "\e7eb";
 }
 
-.icon-right:before {
+.nut-icon-right:before {
   content: "\e7ec";
 }
 
-.icon-left:before {
+.nut-icon-left:before {
   content: "\e7ed";
 }
 
-.icon-up:before {
+.nut-icon-up:before {
   content: "\e7ee";
 }
 
-.icon-down:before {
+.nut-icon-down:before {
   content: "\e7ef";
 }
 
-.icon-fullscreen:before {
+.nut-icon-fullscreen:before {
   content: "\e7f0";
 }
 
-.icon-fullscreen-exit:before {
+.nut-icon-fullscreen-exit:before {
   content: "\e7f1";
 }
 

src/styles/font/iconfont.json

 {
   "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": [