feat: icon添加动态

src/config.json

@@ -931,7 +931,8 @@
           "show": true,
           "taro": true,
           "author": "liqiong"
-        },{
+        },
+        {
           "name": "Cascader",
           "type": "component",
           "cName": "级联选择",

src/packages/__VUE/icon/demo.vue

@@ -27,7 +27,7 @@
       <nut-icon name="dongdong" size="26"></nut-icon>
     </nut-cell>
 
-    <nut-cell-group v-for="item in icons.data" :title="item.name">
+    <nut-cell-group v-for="item in icons.data" :title="item.name" :key="item">
       <nut-cell>
         <ul>
           <li v-for="item in item.icons" :key="item">
@@ -37,6 +37,28 @@
         </ul>
       </nut-cell>
     </nut-cell-group>
+
+    <nut-cell-group v-for="item in icons.style" :title="item.name" :key="item">
+      <nut-cell>
+        <ul>
+          <li v-for="it in item.icons" :key="it">
+            <nut-icon :name="it.name" :class="`nut-icon-${it.am}`"></nut-icon>
+            <span>{{ it.am }}</span>
+          </li>
+        </ul>
+      </nut-cell>
+    </nut-cell-group>
+
+    <nut-cell-group v-for="item in icons.animate" :title="item.name" :key="item">
+      <nut-cell>
+        <ul>
+          <li v-for="it in item.icons" :key="it">
+            <nut-icon :name="it.name"></nut-icon>
+            <span>{{ it.name }}</span>
+          </li>
+        </ul>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 
@@ -63,6 +85,7 @@ ul {
   display: flex;
   flex-wrap: wrap;
   padding: 0;
+  width: 100%;
   li {
     flex: 0 0 25%;
     max-width: 25%;

src/packages/__VUE/icon/doc.md

@@ -24,31 +24,70 @@ app.use(Icon);
 
 `Icon` 的 `name` 属性支持传入图标名称或图片链接。
 
+:::demo
 ```html
-<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>
+  <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
-<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>
+  <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
-<nut-icon name="dongdong"></nut-icon>
-<nut-icon name="dongdong" size="24"></nut-icon>
-<nut-icon name="dongdong" size="16"></nut-icon>
+<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 类就可以实现图片动态效果
+
+:::demo
+```html
+<template>
+  <nut-icon name="dou-arrow-up" class="nut-icon-am-jump"></nut-icon>
+  <nut-icon name="star-fill-n" class="nut-icon-am-blink"></nut-icon>
+  <nut-icon name="refresh2" class="nut-icon-am-rotate"></nut-icon>
+</template>
+```
+:::
+
+### 动态图标
+
+与基础图标的使用方式一致，通过 `Icon` 的 `name` 属性传入图标名称
+
+:::demo
+```html
+<template>
+  <nut-icon name="am-loading1" ></nut-icon>
+  <nut-icon name="am-loading2"></nut-icon>
+  <nut-icon name="am-loading7"></nut-icon>
+</template>
+```
+:::
 
 ### 自定义图标
 

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

@@ -0,0 +1,480 @@
+<template>
+  <view class="nut-iconam">
+    <view class="loading loading1" v-if="name == 'am-loading1'">
+      <view v-for="i in [0, 1, 2, 3, 4]" :key="i" :style="{ background: color }"></view>
+    </view>
+
+    <view class="loading loading2" v-if="name == 'am-loading2'">
+      <view v-for="i in [0, 1, 2, 3, 4]" :key="i" :style="{ background: color }"></view>
+    </view>
+
+    <view class="loading loading3" v-if="name == 'am-loading3'">
+      <view v-for="i in [0, 1, 2, 3, 4]" :key="i" :style="{ background: color }"></view>
+    </view>
+
+    <view class="loading loading4" v-if="name == 'am-loading4'">
+      <view v-for="i in [0, 1, 2, 3, 4]" :key="i" :style="{ background: color }"></view>
+    </view>
+
+    <view class="loading loading5" v-if="name == 'am-loading5'">
+      <view v-for="i in [0, 1, 2, 3, 4]" :key="i" :style="{ background: color }"></view>
+    </view>
+
+    <view class="loading loading6" v-if="name == 'am-loading6'" :style="{ '--main-color': color }">
+      <view class="dot-pulse"></view>
+    </view>
+
+    <view class="loading loading7" v-if="name == 'am-loading7'" :style="{ '--main-color': color }">
+      <view class="dot-collision"></view>
+    </view>
+    <view class="loading loading8" v-if="name == 'am-loading8'" :style="{ '--main-color': color }">
+      <view class="dot-carousel"></view>
+    </view>
+    <view class="loading loading9" v-if="name == 'am-loading9'" :style="{ '--main-color': color }">
+      <view class="dot-stretching"></view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+import { toRefs, ref } from 'vue';
+import { createComponent } from '../../../utils/create';
+const { create } = createComponent('icon-am');
+
+export default create({
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {},
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    return { ...toRefs(props) };
+  }
+});
+</script>
+<style lang="scss">
+.nut-iconam {
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 16px 0;
+
+    --main-color: #666;
+  }
+  .loading1 {
+    width: 20px;
+    height: 20px;
+    view {
+      display: inline-block;
+      width: 3px;
+      height: 100%;
+      border-radius: 4px;
+      background: #666;
+      -webkit-animation: load1 1s ease infinite;
+      &:nth-child(2) {
+        -webkit-animation-delay: 0.2s;
+      }
+      &:nth-child(3) {
+        -webkit-animation-delay: 0.4s;
+      }
+      &:nth-child(4) {
+        -webkit-animation-delay: 0.6s;
+      }
+      &:nth-child(5) {
+        -webkit-animation-delay: 0.8s;
+      }
+    }
+
+    @-webkit-keyframes load1 {
+      0%,
+      100% {
+        height: 10px;
+      }
+      50% {
+        height: 20px;
+      }
+    }
+  }
+
+  .loading2 {
+    width: 40px;
+    height: 20px;
+    view {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      background: #666;
+      -webkit-animation: load2 1.04s ease infinite;
+      &:last-child {
+        margin-right: 0px;
+      }
+
+      &:nth-child(1) {
+        -webkit-animation-delay: 0.13s;
+      }
+      &:nth-child(2) {
+        -webkit-animation-delay: 0.26s;
+      }
+      &:nth-child(3) {
+        -webkit-animation-delay: 0.39s;
+      }
+      &:nth-child(4) {
+        -webkit-animation-delay: 0.52s;
+      }
+      &:nth-child(5) {
+        -webkit-animation-delay: 0.65s;
+      }
+    }
+    @-webkit-keyframes load2 {
+      0% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  }
+
+  .loading3 {
+    width: 40px;
+    height: 20px;
+    view {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      background: #666;
+      -webkit-animation: load3 1.04s ease infinite;
+      &:last-child {
+        margin-right: 0px;
+      }
+
+      &:nth-child(1) {
+        -webkit-animation-delay: 0.13s;
+      }
+      &:nth-child(2) {
+        -webkit-animation-delay: 0.26s;
+      }
+      &:nth-child(3) {
+        -webkit-animation-delay: 0.39s;
+      }
+      &:nth-child(4) {
+        -webkit-animation-delay: 0.52s;
+      }
+      &:nth-child(5) {
+        -webkit-animation-delay: 0.65s;
+      }
+    }
+    @-webkit-keyframes load3 {
+      0% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+        -webkit-transform: rotate(90deg);
+      }
+    }
+  }
+
+  .loading4 {
+    width: 40px;
+    height: 20px;
+    view {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      background: #666;
+      -webkit-animation: load4 1.04s ease infinite;
+      &:last-child {
+        margin-right: 0px;
+      }
+
+      &:nth-child(1) {
+        -webkit-animation-delay: 0.13s;
+      }
+      &:nth-child(2) {
+        -webkit-animation-delay: 0.26s;
+      }
+      &:nth-child(3) {
+        -webkit-animation-delay: 0.39s;
+      }
+      &:nth-child(4) {
+        -webkit-animation-delay: 0.52s;
+      }
+      &:nth-child(5) {
+        -webkit-animation-delay: 0.65s;
+      }
+    }
+    @-webkit-keyframes load4 {
+      0% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        -webkit-transform: rotate(90deg) scale(0.3);
+      }
+    }
+  }
+
+  .loading5 {
+    width: 30px;
+    height: 20px;
+    justify-content: inherit;
+    view {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #666;
+      -webkit-animation: load5 1.04s ease-in infinite alternate;
+      &:last-child {
+        margin-right: 0px;
+      }
+
+      &:nth-child(1) {
+        -webkit-animation-delay: 0.13s;
+      }
+      &:nth-child(2) {
+        -webkit-animation-delay: 0.26s;
+      }
+      &:nth-child(3) {
+        -webkit-animation-delay: 0.39s;
+      }
+      &:nth-child(4) {
+        -webkit-animation-delay: 0.52s;
+      }
+      &:nth-child(5) {
+        -webkit-animation-delay: 0.65s;
+      }
+    }
+    @-webkit-keyframes load5 {
+      0% {
+        opacity: 1;
+        -webkit-transform: translate(0px);
+      }
+      100% {
+        opacity: 0.2;
+        -webkit-transform: translate(30px);
+      }
+    }
+  }
+
+  .loading6 {
+    height: 20px;
+    .dot-pulse {
+      position: relative;
+      left: -9999px;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background-color: var(--main-color);
+      color: var(--main-color);
+      box-shadow: 9984px 0 0 0 var(--main-color), 9999px 0 0 0 var(--main-color), 10014px 0 0 0 var(--main-color);
+      animation: dotPulse 1.3s infinite linear;
+    }
+
+    @keyframes dotPulse {
+      0% {
+        box-shadow: 9984px 0 0 -5px var(--main-color), 9999px 0 0 0 var(--main-color) 6,
+          10014px 0 0 2px var(--main-color);
+      }
+
+      25% {
+        box-shadow: 9984px 0 0 0 var(--main-color), 9999px 0 0 2px var(--main-color), 10014px 0 0 0 var(--main-color);
+      }
+
+      50% {
+        box-shadow: 9984px 0 0 2px var(--main-color), 9999px 0 0 0 var(--main-color), 10014px 0 0 -5px var(--main-color);
+      }
+
+      75% {
+        box-shadow: 9984px 0 0 0 var(--main-color), 9999px 0 0 -5px var(--main-color), 10014px 0 0 0 var(--main-color);
+      }
+
+      100% {
+        box-shadow: 9984px 0 0 -5px var(--main-color), 9999px 0 0 0 var(--main-color), 10014px 0 0 2px var(--main-color);
+      }
+    }
+  }
+
+  .loading7 {
+    height: 20px;
+    .dot-collision {
+      position: relative;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: var(--main-color);
+      color: var(--main-color);
+
+      &::before,
+      &::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: var(--main-color);
+        color: var(--main-color);
+      }
+
+      &::before {
+        left: -10px;
+        animation: dotCollisionBefore 2s infinite ease-in;
+      }
+
+      &::after {
+        left: 10px;
+        animation: dotCollisionAfter 2s infinite ease-in;
+        animation-delay: 1s;
+      }
+    }
+
+    @keyframes dotCollisionBefore {
+      0%,
+      50%,
+      75%,
+      100% {
+        transform: translateX(0);
+      }
+
+      25% {
+        transform: translateX(-15px);
+      }
+    }
+
+    @keyframes dotCollisionAfter {
+      0%,
+      50%,
+      75%,
+      100% {
+        transform: translateX(0);
+      }
+
+      25% {
+        transform: translateX(15px);
+      }
+    }
+  }
+  .loading8 {
+    height: 20px;
+    .dot-carousel {
+      position: relative;
+      left: -9999px;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+      background-color: var(--main-color);
+      color: var(--main-color);
+      box-shadow: 9984px 0 0 0 var(--main-color), 9999px 0 0 0 var(--main-color), 10014px 0 0 0 var(--main-color);
+      animation: dotCarousel 1.5s infinite linear;
+    }
+
+    @keyframes dotCarousel {
+      0% {
+        box-shadow: 9984px 0 0 -1px var(--main-color), 9999px 0 0 1px var(--main-color),
+          10014px 0 0 -1px var(--main-color);
+      }
+
+      50% {
+        box-shadow: 10014px 0 0 -1px var(--main-color), 9984px 0 0 -1px var(--main-color),
+          9999px 0 0 1px var(--main-color);
+      }
+
+      100% {
+        box-shadow: 9999px 0 0 1px var(--main-color), 10014px 0 0 -1px var(--main-color),
+          9984px 0 0 -1px var(--main-color);
+      }
+    }
+  }
+
+  .loading9 {
+    height: 20px;
+    .dot-stretching {
+      position: relative;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+      background-color: var(--main-color);
+      color: var(--main-color);
+      animation: dotStretching 2s infinite ease-in;
+      transform: scale(1.25, 1.25);
+      &::before,
+      &::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+        background-color: var(--main-color);
+        color: var(--main-color);
+      }
+
+      &::before {
+        animation: dotStretchingBefore 2s infinite ease-in;
+      }
+
+      &::after {
+        animation: dotStretchingAfter 2s infinite ease-in;
+      }
+    }
+
+    @keyframes dotStretching {
+      0% {
+        transform: scale(1.25, 1.25);
+      }
+
+      50%,
+      60% {
+        transform: scale(0.8, 0.8);
+      }
+
+      100% {
+        transform: scale(1.25, 1.25);
+      }
+    }
+
+    @keyframes dotStretchingBefore {
+      0% {
+        transform: translate(0) scale(0.7, 0.7);
+      }
+
+      50%,
+      60% {
+        transform: translate(-20px) scale(1, 1);
+      }
+
+      100% {
+        transform: translate(0) scale(0.7, 0.7);
+      }
+    }
+
+    @keyframes dotStretchingAfter {
+      0% {
+        transform: translate(0) scale(0.7, 0.7);
+      }
+
+      50%,
+      60% {
+        transform: translate(20px) scale(1, 1);
+      }
+
+      100% {
+        transform: translate(0) scale(0.7, 0.7);
+      }
+    }
+  }
+}
+</style>

src/packages/__VUE/icon/index.scss

@@ -1,4 +1,5 @@
 @import '../../styles/font/iconfont.css';
+
 .nut-icon {
   display: inline-block;
   position: relative;
@@ -22,20 +23,59 @@
   &-loading,
   &-loading1 {
     display: inline-block;
-    animation: loadingCircle 1s infinite linear;
+    animation: rotate 1s infinite linear;
+  }
+
+  &-am-jump {
+    animation: jump 1s ease infinite alternate;
+  }
+
+  &-am-rotate {
+    animation: rotate 1s infinite linear;
+  }
+  &-am-blink {
+    animation: blink 1s ease-in-out 0.1s infinite alternate;
+  }
+}
+
+@-webkit-keyframes jump {
+  to {
+    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+  }
+}
+
+@keyframes jump {
+  to {
+    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
   }
 }
 
-@-webkit-keyframes loadingCircle {
+@-webkit-keyframes rotate {
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
-
-@keyframes loadingCircle {
+@keyframes rotate {
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
+
+@-webkit-keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/packages/__VUE/icon/index.vue

@@ -1,10 +1,14 @@
 <script lang="ts">
-import { h, PropType } from 'vue';
+import { h, PropType, ref } from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('icon');
 import { pxCheck } from '../../utils/pxCheck';
+import IconAm from './iconAm/index.vue';
 
 export default create({
+  components: {
+    [IconAm.name]: IconAm
+  },
   props: {
     name: { type: String, default: '' },
     size: { type: [String, Number], default: '' },
@@ -24,7 +28,11 @@ export default create({
       return props.name ? props.name.indexOf('/') !== -1 : false;
     };
 
-    return () => {
+    const isAmIcon = () => {
+      return props.name ? props.name.indexOf('am-') !== -1 : true;
+    };
+
+    const renderIcon = () => {
       const _isImage = isImage();
       return h(
         _isImage ? 'img' : props.tag,
@@ -44,6 +52,13 @@ export default create({
         slots.default?.()
       );
     };
+    const renderAmIcon = () => {
+      return h(IconAm, {
+        // name: props.name,
+        ...props
+      });
+    };
+    return isAmIcon() ? renderAmIcon : renderIcon;
   }
 });
 </script>

src/packages/styles/font/config.json

@@ -117,5 +117,47 @@
         "loading1"
       ]
     }
+    
+  ],
+  "style":[
+    {
+      "name": "通用动态样式",
+      "icons": [{
+        "name":"locationg3",
+        "am":"am-jump"
+      },{
+        "name":"star-fill-n",
+        "am":"am-blink"
+      },{
+        "name":"refresh2",
+        "am":"am-rotate"
+      }
+      ]
+    }
+  ],
+  "animate":[
+    {
+      "name": "动态图标",
+      "icons": [{
+        "name":"am-loading1"
+      },{
+        "name":"am-loading2"
+      },{
+        "name":"am-loading3"
+      },{
+        "name":"am-loading4"
+      },{
+        "name":"am-loading5"
+      },{
+        "name":"am-loading6"
+      },{
+        "name":"am-loading7"
+      },{
+        "name":"am-loading8"
+      },{
+        "name":"am-loading9"
+      }
+      ]
+    }
   ]
 }

src/packages/styles/font/demo_index.html

@@ -55,6 +55,12 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon nutui-iconfont">&#xe603;</span>
+                <div class="name">dou-arrow-up</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon nutui-iconfont">&#xe614;</span>
                 <div class="name">loading2</div>
                 <div class="code-name">&amp;#xe614;</div>
@@ -738,9 +744,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'nutui-iconfont';
-  src: url('iconfont.woff2?t=1637809232376') format('woff2'),
-       url('iconfont.woff?t=1637809232376') format('woff'),
-       url('iconfont.ttf?t=1637809232376') format('truetype');
+  src: url('iconfont.woff2?t=1642470100417') format('woff2'),
+       url('iconfont.woff?t=1642470100417') format('woff'),
+       url('iconfont.ttf?t=1642470100417') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -767,6 +773,15 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-dou-arrow-up"></span>
+            <div class="name">
+              dou-arrow-up
+            </div>
+            <div class="code-name">.nut-icon-dou-arrow-up
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon nutui-iconfont nut-icon-loading1"></span>
             <div class="name">
               loading2
@@ -1794,6 +1809,14 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-dou-arrow-up"></use>
+                </svg>
+                <div class="name">dou-arrow-up</div>
+                <div class="code-name">#nut-icon-dou-arrow-up</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#nut-icon-loading1"></use>
                 </svg>
                 <div class="name">loading2</div>

src/packages/styles/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nutui-iconfont"; /* Project id 2166874 */
-  src: url('iconfont.woff2?t=1637809232376') format('woff2'),
-       url('iconfont.woff?t=1637809232376') format('woff'),
-       url('iconfont.ttf?t=1637809232376') format('truetype');
+  src: url('iconfont.woff2?t=1642470100417') format('woff2'),
+       url('iconfont.woff?t=1642470100417') format('woff'),
+       url('iconfont.ttf?t=1642470100417') format('truetype');
 }
 
 .nutui-iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nut-icon-dou-arrow-up:before {
+  content: "\e603";
+}
+
 .nut-icon-loading1:before {
   content: "\e614";
 }

src/packages/styles/font/iconfont.json

@@ -6,6 +6,13 @@
   "description": "nutui 3.0字体管理",
   "glyphs": [
     {
+      "icon_id": "27276580",
+      "name": "dou-arrow-up",
+      "font_class": "dou-arrow-up",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
       "icon_id": "1388116",
       "name": "loading2",
       "font_class": "loading1",