docs(icon): add international en-us

src/packages/__VUE/icon/demo.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-cell>
       <nut-icon name="dongdong"></nut-icon>
       <nut-icon name="JD"></nut-icon>
     </nut-cell>
-    <h2>图片链接</h2>
+    <h2>{{ translate('imageLink') }}</h2>
     <nut-cell>
       <nut-icon
         size="40"
@@ -13,21 +13,21 @@
       >
       </nut-icon>
     </nut-cell>
-    <h2>图标颜色</h2>
+    <h2>{{ translate('iconColor') }}</h2>
     <nut-cell>
       <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
       <nut-icon name="dongdong" color="#64b578"></nut-icon>
       <nut-icon name="JD" color="#fa2c19"></nut-icon>
     </nut-cell>
 
-    <h2>图标大小</h2>
+    <h2>{{ translate('iconSize') }}</h2>
     <nut-cell>
       <nut-icon name="dongdong"></nut-icon>
       <nut-icon name="dongdong" size="24"></nut-icon>
       <nut-icon name="dongdong" size="26"></nut-icon>
     </nut-cell>
 
-    <nut-cell-group v-for="item in icons.data" :title="item.name" :key="item">
+    <nut-cell-group v-for="item in icons.data" :title="currentLang == 'zh-CN' ? item.name : item.nameEn" :key="item">
       <nut-cell>
         <ul>
           <li v-for="item in item.icons" :key="item">
@@ -37,15 +37,12 @@
         </ul>
       </nut-cell>
     </nut-cell-group>
-
-    <nut-cell-group v-for="item in icons.style" :title="item.name" :key="item">
+    <nut-cell-group v-for="item in icons.style" :title="currentLang == 'zh-CN' ? item.name : item.nameEn" :key="item">
       <nut-cell>
         <ul>
           <li v-for="it in item.icons" :key="it">
-            <nut-icon
-              :name="it.name"
-              :class="`nut-icon-${it['animation-name']} nut-icon-${it['animation-time']}`"
-            ></nut-icon>
+            <nut-icon :name="it.name" :class="`nut-icon-${it['animation-name']} nut-icon-${it['animation-time']}`">
+            </nut-icon>
             <span>{{ it['animation-name'] }}</span>
           </li>
         </ul>
@@ -55,14 +52,29 @@
 </template>
 
 <script lang="ts">
+import { useTranslate, currentLang } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    imageLink: '图片链接',
+    iconColor: '图标颜色',
+    iconSize: '图标大小'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    imageLink: 'Image Link',
+    iconColor: 'Icon Color',
+    iconSize: 'Icon Size'
+  }
+});
 // import icons from '@/packages/styles/font/iconfont.json';
 import icons from '@/packages/styles/font/config.json';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('icon');
+const { createDemo, translate } = createComponent('icon');
 export default createDemo({
   props: {},
   setup() {
-    return { icons };
+    return { icons, translate, currentLang };
   }
 });
 </script>

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

@@ -0,0 +1,176 @@
+# Icon
+
+### Intro
+
+The font-based icon set that can be used via the Icon component or referenced in other components via the icon attribute.
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { Icon } from '@nutui/nutui';
+// taro
+import { Icon } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Icon);
+
+```
+
+### Basic Usage
+
+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>
+</template>
+```
+:::
+
+### Icon Color
+
+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>
+</template>
+```
+:::
+
+### Icon Size
+
+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>
+</template>
+```
+:::
+### Universal motion icons
+
+Adding the specified class class can realize the dynamic effect of the picture. The default is to play once, and adding the `nut-icon-am-infinite` class can realize the loop playback. By setting css, the delay interval before the animation starts, and how long the animation will be completed
+
+:::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>
+</template>
+
+<style>
+  .nut-icon{
+    --animate-duration: 1s ; 
+    --animate-delay: 0s;
+  }
+</style>
+```
+:::
+
+
+
+
+### custom iconfont
+
+If you need to use more icons based on the existing Icon, you can import the font file and CSS file corresponding to the third-party iconfont, and then you can use it directly in the Icon component.
+
+> use [iconfont](https://www.iconfont.cn/)   recommend
+
+1：first in [iconfont](https://www.iconfont.cn/) generate your custom Icon file and download it to the local project  [Docs](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
+```
+
+2：project entry file main.js add `iconfont.css`
+
+
+``` javascript
+import './assets/font/iconfont.css';
+```
+
+3：use
+
+```html
+<!-- 
+  font-class-name  iconfont
+  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" />
+```
+
+
+
+> Use a third-party custom font library
+
+```css
+/* Introduce third-party or custom font icon styles */
+@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
+<!-- 
+  font-class-name  my-icon
+  class-prefix  my-icon
+-->
+<nut-icon font-class-name="my-icon" class-prefix="my-icon" name="extra" />
+
+```
+
+custom iconfont [Demo](https://github.com/jdf2e/nutui-demo/blob/master/vite/src/App.vue#L15) 
+
+## API
+
+### Props
+
+| Attribute       | Description                                          | Type             | Default          |
+|-----------------|------------------------------------------------------|------------------|------------------|
+| name            | Icon name or URL                                     | String           | -                |
+| color           | Icon color                                           | String           | -                |
+| size            | Icon size , eg `20px` `2em` `2rem`                   | String or Number | -                |
+| font-class-name | Custom icon font base class name                     | String           | `nutui-iconfont` |
+| class-prefix    | Custom icon class name prefix for using custom icons | String           | `nut-icon`       |
+| tag             | HTML Tag of root element                             | String           | `i`              |
+
+### Events
+
+| Event | Description                  | Arguments    |
+|-------|------------------------------|--------------|
+| click | Emitted when icon is clicked | event: Event |
+

src/packages/styles/font/config.json

@@ -3,6 +3,7 @@
   "data": [
     {
       "name": "粗体 Icon",
+      "nameEn": "Bold Icon",
       "icons": [
         "order",
         "refresh",
@@ -29,6 +30,7 @@
     },
     {
       "name": "细体 Icon",
+      "nameEn": "Thin Icon",
       "icons": [
         "ask",
         "tips",
@@ -78,6 +80,7 @@
     },
     {
       "name": "应用图标",
+      "nameEn": "Application Icon",
       "icons": [
         "arrow-up",
         "arrow-down",
@@ -96,6 +99,7 @@
     },
     {
       "name": "基础图标",
+      "nameEn": "Basic Icon",
       "icons": [
         "uploader",
         "mask-close",
@@ -127,6 +131,7 @@
   "style":[
     {
       "name": "通用动态样式",
+      "nameEn": "Universal Dynamic Style",
       "icons": [{
         "name":"dou-arrow-up",
         "animation-name":"am-jump",

src/sites/assets/util/useTranslate.ts

@@ -1,4 +1,5 @@
 import Locale from '@/packages/locale';
+export const currentLang = Locale.currentLang;
 export const useTranslate = (object: Record<string, any>) => {
   for (const [key, value] of Object.entries(object)) {
     Locale.merge(key, value);