fix: icon组件升级增加复制功能和自定义路径功能

src/packages/icon/demo.vue

@@ -1,49 +1,102 @@
 <template>
     <div>
-        <h4>所有ICON</h4>
+        <h4>所有ICON，单击可复制</h4>
         <table>
             <tr>
-                <td><nut-icon type="top"></nut-icon><span>top</span></td>
-                <td><nut-icon type="down"></nut-icon><span>down</span></td>
-                <td><nut-icon type="right"></nut-icon><span>right</span></td>
-                <td><nut-icon type="action"></nut-icon><span>action</span></td>
+                <td class="copy-box"><nut-icon type="top"></nut-icon><span>top</span></td>
+                <td class="copy-box"><nut-icon type="down"></nut-icon><span>down</span></td>
+                <td class="copy-box"><nut-icon type="right"></nut-icon><span>right</span></td>
+                <td class="copy-box"><nut-icon type="action"></nut-icon><span>action</span></td>
             </tr>
             <tr>
-                <td><nut-icon type="more"></nut-icon><span>more</span></td>
-                <td><nut-icon type="trolley"></nut-icon><span>trolley</span></td>                
-                <td><nut-icon type="search"></nut-icon><span>search</span></td>
-                <td><nut-icon type="tick"></nut-icon><span>tick</span></td>
+                <td class="copy-box"><nut-icon type="more"></nut-icon><span>more</span></td>
+                <td class="copy-box"><nut-icon type="trolley"></nut-icon><span>trolley</span></td>                
+                <td class="copy-box"><nut-icon type="search"></nut-icon><span>search</span></td>
+                <td class="copy-box"><nut-icon type="tick"></nut-icon><span>tick</span></td>
             </tr>
             <tr>
-                <td><nut-icon type="plus"></nut-icon><span>plus</span></td>
-                <td><nut-icon type="minus"></nut-icon><span>minus</span></td>
-                <td><nut-icon type="cross"></nut-icon><span>cross</span></td>
-                <td><nut-icon type="circle-cross"></nut-icon><span>circle-cross</span></td>
+                <td class="copy-box"><nut-icon type="plus"></nut-icon><span>plus</span></td>
+                <td class="copy-box"><nut-icon type="minus"></nut-icon><span>minus</span></td>
+                <td class="copy-box"><nut-icon type="cross"></nut-icon><span>cross</span></td>
+                <td class="copy-box"><nut-icon type="circle-cross"></nut-icon><span>circle-cross</span></td>
             </tr>
         </table>
         <h4>自定义尺寸</h4>
         <table>
             <tr>
-                <td><nut-icon type="more" size="40px"></nut-icon><span>more</span></td>
-                <td><nut-icon type="trolley" size="40px"></nut-icon><span>trolley</span></td>
-                <td><nut-icon type="search" size="40px"></nut-icon><span>search</span></td>
-                <td><nut-icon type="tick" size="40px"></nut-icon><span>tick</span></td>
+                <td class="copy-box-size"><nut-icon type="more" size="40px"></nut-icon><span>more</span></td>
+                <td class="copy-box-size"><nut-icon type="trolley" size="40px"></nut-icon><span>trolley</span></td>
+                <td class="copy-box-size"><nut-icon type="search" size="40px"></nut-icon><span>search</span></td>
+                <td class="copy-box-size"><nut-icon type="tick" size="40px"></nut-icon><span>tick</span></td>
             </tr>
         </table>
         <h4>自定义颜色</h4>
         <table>
             <tr>
-                <td><nut-icon type="more" color="#f0250f"></nut-icon><span>more</span></td>
-                <td><nut-icon type="trolley" color="#f0250f"></nut-icon><span>trolley</span></td>
-                <td><nut-icon type="search" color="#f0250f"></nut-icon><span>search</span></td>
-                <td><nut-icon type="tick" color="#f0250f"></nut-icon><span>tick</span></td>
+                <td class="copy-box-color"><nut-icon type="more" color="#f0250f"></nut-icon><span>more</span></td>
+                <td class="copy-box-color"><nut-icon type="trolley" color="#f0250f"></nut-icon><span>trolley</span></td>
+                <td class="copy-box-color"><nut-icon type="search" color="#f0250f"></nut-icon><span>search</span></td>
+                <td class="copy-box-color"><nut-icon type="tick" color="#f0250f"></nut-icon><span>tick</span></td>
+            </tr>
+        </table>
+        <h4>自定义图标</h4>
+        <table>
+            <tr>
+                <td class="copy-box-self"><nut-icon type="self" :url="require('../../assets/svg/down.svg')"></nut-icon><span>down</span></td> 
+                <td class="copy-box-self"><nut-icon type="self" :url="require('../../assets/svg/more.svg')"></nut-icon><span>more</span></td> 
+                <td class="copy-box-self"><nut-icon type="self" :url="require('../../assets/svg/tick.svg')"></nut-icon><span>tick</span></td> 
+                <td class="copy-box-self"><nut-icon type="self" :url="require('../../assets/svg/trolley.svg')"></nut-icon><span>trolley</span></td>                
             </tr>
         </table>
     </div>
 </template>
 
 <script>
+import copy from 'clipboard';
 export default {
+    mounted(){
+
+        let copys = new copy('.copy-box', {            
+            text:function(trigger){               
+                return `<nut-icon type="${trigger.textContent}"></nut-icon>`
+            }
+        });
+        copys.on('success',(e)=>{
+            this.tip();
+        });
+
+        let copySize = new copy('.copy-box-size',{
+            text:function(trigger){               
+                return `<nut-icon type="${trigger.textContent}" size="40px"></nut-icon>`
+            }
+        })
+        copySize.on('success',(e)=>{
+            this.tip();
+        });
+
+        let copyColor = new copy('.copy-box-color',{
+            text:function(trigger){               
+                return `<nut-icon type="${trigger.textContent}" color="#f0250f"></nut-icon>`
+            }
+        })
+        copyColor.on('success',(e)=>{
+            this.tip();
+        });
+        let copySelf = new copy('.copy-box-self',{
+            text:function(trigger){               
+                return `<nut-icon type="self" :url="require('../../assets/svg/${trigger.textContent}.svg')"></nut-icon>`
+            }
+        })
+        copySelf.on('success',(e)=>{
+            this.tip();
+        });
+
+    },
+    methods:{
+        tip(){
+             this.$toast.success('复制成功', { duration: 1000 });
+        }        
+    }
 }
 </script>
 
@@ -58,6 +111,10 @@ table{
         height:100px;
         border:1px solid #ebebeb;
         font-size:12px;
+        &:hover{
+            background: #f2f2f2;
+            cursor: pointer;
+        }
     }
     span{
         display:block;

src/packages/icon/doc.md

@@ -31,8 +31,17 @@
 >
 </nut-icon>
 ```
+## 自定义svg图标
 
+支持通过**url**可以自定义添加额外的图片。
+
+```html
+<nut-icon type="self" :url="require('../../assets/svg/trolley.svg')"></nut-icon>
+```
 ## type可选值
+
+nutui 自带图标库提供了下面的这些可选值。
+
 * top
 * down
 * right
@@ -53,4 +62,5 @@
 |----- | ----- | ----- | ----- 
 | type | 图标，可选值top/action/cross/down/right/more/plus/search/trolley/tick/minus/circle-cross | String | -
 | size | 尺寸，需要带单位 | String | -
-| color | 颜色 | String | -
+| color | 颜色 | String | -
+| url | 自定义图标路径，必须是svg格式,请用 require 方式引入 | String | - 

src/packages/icon/icon.vue

@@ -1,9 +1,10 @@
 <template>
-    <i :class="['nut-icon','nut-icon-'+type]" v-html="icon" :style="{'height':size,'width':size,'color':color||''}">
+    <i :class="['nut-icon','nut-icon-'+type]" v-html="icon" :style="{'height':size,'width':size,'color':color}">
     </i>
 </template>
 <script>
-const types=['top','action','cross','down','right','more','plus','search','trolley','tick','minus','circle-cross'];
+
+const types = ['top','action','cross','down','right','more','plus','search','trolley','tick','minus','circle-cross'];
 
 export default {
   name: "nut-icon",
@@ -19,6 +20,10 @@ export default {
     color: {
       type: String,
       default: '#2e2d2d'
+    },
+    url:{
+      type:String,
+      default:''
     }
   },
   data() {
@@ -27,14 +32,16 @@ export default {
     };
   },
   created() {
+    if(this.url){         
+      this.icon =this.url;
+      this.type = 'self';
+    }else{
       if(types.indexOf(this.type)===-1){
         console.error('nut-icon组件type值('+this.type+')有误，无此icon!');
       }else{
         this.icon = require('../../assets/svg/'+this.type+'.svg');
       }
-  },
-  methods: {
-
-  }
+    }      
+  }  
 };
 </script>