chore: icons add 0.0.5

package.json

@@ -76,7 +76,7 @@
     }
   },
   "dependencies": {
-    "@nutui/icons-vue": "0.0.4",
+    "@nutui/icons-vue": "0.0.5",
     "@tarojs/components": "3.5.6",
     "consola": "2.15.3",
     "sass": "^1.50.0",

pnpm-lock.yaml

@@ -3,7 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@commitlint/cli': ^10.0.0
   '@commitlint/config-conventional': ^10.0.0
-  '@nutui/icons-vue': 0.0.4
+  '@nutui/icons-vue': 0.0.5
   '@tarojs/components': 3.5.6
   '@tarojs/taro': 3.5.6
   '@types/jest': ^26.0.22
@@ -53,7 +53,7 @@ specifiers:
   vue-tsc: ^1.0.9
 
 dependencies:
-  '@nutui/icons-vue': 0.0.4
+  '@nutui/icons-vue': 0.0.5
   '@tarojs/components': 3.5.6_vue@3.2.45
   consola: 2.15.3
   sass: 1.56.1
@@ -968,8 +968,8 @@ packages:
       fastq: 1.13.0
     dev: true
 
-  /@nutui/icons-vue/0.0.4:
-    resolution: {integrity: sha512-HJRE1vmi/HC/kZBDTuV4aY8LH4f1xQb2N63VNVxYiKK544SOgwYa9iw94UgsIprdIVgkuk+1XUw/Xhkl75oCog==}
+  /@nutui/icons-vue/0.0.5:
+    resolution: {integrity: sha512-2UzXRB12o+gTj4w7soXqiE6QSWqMsu0y/UI6CUWlVJpQoM/aS6gyh3/KhZ/qGqwkh6UoCyt58t2sipFjMTUjYQ==}
     dependencies:
       vue: 3.2.45
     dev: false

src/packages/__VUE/icon/demo.vue

@@ -1,38 +1,41 @@
 <template>
   <div class="demo">
-    <Add color="red" width="100px" height="100px" />
+    <h2>{{ translate('svg') }}</h2>
+    <nut-cell>
+      <Add color="red" />
+    </nut-cell>
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <Icon name="dongdong" />
-      <Icon name="JD" />
+      <IconFont name="dongdong" />
+      <IconFont name="JD" />
     </nut-cell>
     <h2>{{ translate('imageLink') }}</h2>
     <nut-cell>
-      <Icon
+      <IconFont
         size="40"
         name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
       >
-      </Icon>
+      </IconFont>
     </nut-cell>
     <h2>{{ translate('iconColor') }}</h2>
     <nut-cell>
-      <Icon name="dongdong" color="#fa2c19" />
-      <Icon name="dongdong" color="#64b578" />
-      <Icon name="JD" color="#fa2c19" />
+      <IconFont name="dongdong" color="#fa2c19" />
+      <IconFont name="dongdong" color="#64b578" />
+      <IconFont name="JD" color="#fa2c19" />
     </nut-cell>
 
     <h2>{{ translate('iconSize') }}</h2>
     <nut-cell>
-      <Icon name="dongdong" />
-      <Icon name="dongdong" size="24" />
-      <Icon name="dongdong" size="26" />
+      <IconFont name="dongdong" />
+      <IconFont name="dongdong" size="24" />
+      <IconFont name="dongdong" size="26" />
     </nut-cell>
 
     <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">
-            <Icon :name="_item" @click="copyTag(_item)" />
+            <IconFont :name="_item" @click="copyTag(_item)" />
             <span>{{ _item }}</span>
           </li>
         </ul>
@@ -42,12 +45,12 @@
       <nut-cell>
         <ul>
           <li v-for="it in item.icons" :key="it">
-            <Icon
+            <IconFont
               :name="it.name"
               :class="`nut-icon-${it['animation-name']} nut-icon-${it['animation-time']}`"
               @click="copyTag(it['animation-name'])"
             >
-            </Icon>
+            </IconFont>
             <span>{{ it['animation-name'] }}</span>
           </li>
         </ul>
@@ -58,19 +61,19 @@
 
 <script lang="ts">
 import { useTranslate, currentLang } from '@/sites/assets/util/useTranslate';
-import { IconFontConfig, Add } from '@nutui/icons-vue';
-
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
-      basic: '基本用法',
+      basic: 'IconFont 基本用法',
+      svg: 'Svg 按需使用',
       imageLink: '图片链接',
       iconColor: '图标颜色',
       iconSize: '图标大小',
       copyToast: '复制成功'
     },
     'en-US': {
-      basic: 'Basic Usage',
+      basic: 'IconFont Basic Usage',
+      svg: 'Svg import on demand',
       imageLink: 'Image Link',
       iconColor: 'Icon Color',
       iconSize: 'Icon Size',
@@ -80,14 +83,14 @@ const initTranslate = () =>
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('icon');
 import { Toast } from '@/packages/nutui.vue';
-import { Icon } from '@nutui/icons-vue';
+import { Add, IconFontConfig, IconFont } from '@nutui/icons-vue';
 export default createDemo({
   props: {},
-  components: { Icon, Add },
+  components: { IconFont, Add },
   setup() {
     initTranslate();
     const copyTag = (name: string) => {
-      const text = `<Icon name="${name}"></Icon>`;
+      const text = `<IconFont name="${name}"></IconFont>`;
       const displayText = `&lt;Icon name="${name}"&gt;&lt;/Icon&gt;`;
       const input = document.createElement('input');
       document.body.appendChild(input);

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

@@ -2,23 +2,32 @@
 
 ### Intro
 
-The font-based icon set that can be used via the Icon component or referenced in other components via the icon attribute.
+Install the @nutui/icons-vue icon package independently.
 
 ### Install
 
+```bash
+npm i --save @nutui/icons-vue
+```
+
 ``` javascript
 import { createApp } from 'vue';
-// vue
-import { Icon } from '@nutui/nutui';
-// taro
-import { Icon } from '@nutui/nutui-taro';
+import { IconFont } from '@nutui/icons-vue';
 
 const app = createApp();
-app.use(Icon);
+app.use(IconFont);
+```
+### Svg import on demand
+
+Use mode of on-demand loading components, see @nutui/icons-vue/dist/types/index.d.ts
 
+```js
+import { Add } from '@nutui/icons-vue';
+// template
+<Add color='red'>
 ```
 
-### Basic Usage
+### IconFont Basic Usage
 
 Use `name` prop to set icon name or icon URL.
 
@@ -32,7 +41,7 @@ Use `name` prop to set icon name or icon URL.
 ```
 :::
 
-### Icon Color
+#### Icon Color
 
 Use `color` prop to set icon color.
 
@@ -46,7 +55,7 @@ Use `color` prop to set icon color.
 ```
 :::
 
-### Icon Size
+#### Icon Size
 
 Use `size` prop to set icon size default unit is `px` .
 
@@ -59,7 +68,7 @@ Use `size` prop to set icon size default unit is `px` .
 </template>
 ```
 :::
-### Universal motion icons
+#### 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
 
@@ -87,7 +96,7 @@ Adding the specified class class can realize the dynamic effect of the picture.
 
 
 
-### custom iconfont
+#### 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.
 

src/packages/__VUE/icon/doc.md

@@ -2,24 +2,36 @@
 
 ### 介绍
 
-基于 IconFont 字体的图标集，可以通过 Icon 组件使用。
+独立安装 @nutui/icons-vue 图标组件包。
 
 ### 安装
 
+```bash
+npm i --save @nutui/icons-vue
+```
+
 ``` javascript
 import { createApp } from 'vue';
-// vue
-import { Icon } from '@nutui/nutui';
-// taro
-import { Icon } from '@nutui/nutui-taro';
+import { IconFont } from '@nutui/icons-vue';
 
 const app = createApp();
-app.use(Icon);
+app.use(IconFont);
+```
+### Svg 按需加载使用
 
+按需加载组件使用方式，可选项见 @nutui/icons-vue/dist/types/index.d.ts
+
+```js
+import { Add } from '@nutui/icons-vue';
+// template
+<Add color='red'>
 ```
 
+### IconFont 全量使用
 
-### 基础用法
+```js
+import { IconFont } from '@nutui/icons-vue';
+```
 
 `Icon` 的 `name` 属性支持传入图标名称或图片链接。
 
@@ -33,7 +45,7 @@ app.use(Icon);
 ```
 :::
 
-### 图标颜色
+#### 图标颜色
 
 `Icon` 的 `color` 属性用来设置图标的颜色。
 
@@ -47,7 +59,7 @@ app.use(Icon);
 ```
 :::
 
-### 图标大小
+#### 图标大小
 
 `Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。
 
@@ -60,7 +72,7 @@ app.use(Icon);
 </template>
 ```
 :::
-### 通用动态图标
+#### 通用动态图标
 
 添加指定的 class 类就可以实现图片动态效果，默认是播放1次，添加 `nut-icon-am-infinite` 类即可实现循环播放。通过设置 css 可实现动画启动前的延迟间隔、动画在多久时间内完成
 
@@ -88,7 +100,7 @@ app.use(Icon);
 
 
 
-### 自定义图标
+#### 自定义图标
 
 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
 

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

@@ -0,0 +1,189 @@
+# Icon 图标
+
+### 介绍
+
+独立安装 @nutui/icons-vue 图标组件包。
+
+### 安装
+
+```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 按需加载使用
+
+按需加载组件使用方式，可选项见 @nutui/icons-vue/dist/types/index.d.ts
+
+```js
+import { Add } from '@nutui/icons-vue';
+// template
+<Add color='red'>
+```
+
+### IconFont 全量使用
+
+```js
+import { IconFont } from '@nutui/icons-vue';
+```
+
+`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+
+:::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` 属性用来设置图标的颜色。
+
+:::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` 属性用来设置图标的尺寸大小，默认单位为 `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>
+```
+:::
+#### 通用动态图标
+
+添加指定的 class 类就可以实现图片动态效果，默认是播放1次，添加 `nut-icon-am-infinite` 类即可实现循环播放。通过设置 css 可实现动画启动前的延迟间隔、动画在多久时间内完成
+
+:::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>
+```
+:::
+
+
+
+
+#### 自定义图标
+
+如果需要在现有 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 {
+  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" />
+
+```
+
+自定义 iconfont [Demo示例](https://github.com/jdf2e/nutui-demo/blob/master/vite/src/App.vue#L15) 
+
+## API
+
+### Props
+
+| 参数            | 说明                                    | 类型             | 默认值           |
+|-----------------|-----------------------------------------|------------------|------------------|
+| 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`              |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| click  | 点击图标时触发 | event: Event |
+

src/packages/__VUE/icon/index.scss

@@ -1 +1 @@
-// @import '@nutui/icons-vue/dist/lib/style.css';
+@import '@nutui/icons-vue/dist/lib/style.css';

src/shims-vue.d.ts

@@ -19,4 +19,3 @@ declare module '*.md' {
   const Component: ComponentOptions;
   export default Component;
 }
-declare module '@nutui/icons-vue';