From b8356c42113f837138ce0505364f519bc1fd4ee5 Mon Sep 17 00:00:00 2001
From: richard1015 <51844712@qq.com>
Date: Wed, 11 Nov 2020 17:54:21 +0800
Subject: [PATCH] =?UTF-8?q?upd:=20icon=20name=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/icon/demo.vue   |  7 +++++++
 src/packages/icon/doc.md     |  1 +
 src/packages/icon/index.scss |  6 ++++++
 src/packages/icon/index.vue  | 27 +++++++++++++++------------
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/packages/icon/demo.vue b/src/packages/icon/demo.vue
index 451f7ae2b..8e592ebb2 100644
--- a/src/packages/icon/demo.vue
+++ b/src/packages/icon/demo.vue
@@ -5,6 +5,13 @@
       <nut-icon name="dongdong"></nut-icon>
       <nut-icon name="JD"></nut-icon>
     </nut-cell>
+    <h2>图片链接</h2>
+    <nut-cell>
+      <nut-icon
+        size="40px"
+        name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+      ></nut-icon>
+    </nut-cell>
     <h2>图标颜色</h2>
     <nut-cell>
       <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
diff --git a/src/packages/icon/doc.md b/src/packages/icon/doc.md
index f4b928b2f..b10bcc3d3 100644
--- a/src/packages/icon/doc.md
+++ b/src/packages/icon/doc.md
@@ -24,6 +24,7 @@ app.use(Icon);
 ```html
 <nut-icon name="dongdong"></nut-icon>
 <nut-icon name="JD"></nut-icon>
+<nut-icon size="40px"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></nut-icon>
 ```
 
 ### 图标颜色
diff --git a/src/packages/icon/index.scss b/src/packages/icon/index.scss
index f872f2b4c..17f38cb3b 100644
--- a/src/packages/icon/index.scss
+++ b/src/packages/icon/index.scss
@@ -4,4 +4,10 @@
   height: 20px;
   line-height: 20px;
   text-align: right;
+
+  &__img {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
 }
diff --git a/src/packages/icon/index.vue b/src/packages/icon/index.vue
index 285ae5880..d25a617b7 100644
--- a/src/packages/icon/index.vue
+++ b/src/packages/icon/index.vue
@@ -26,24 +26,27 @@ export default create({
       default: 'i'
     }
   },
-  components: {},
   emits: ['click'],
 
   setup(props, { emit, slots }) {
     const handleClick = (event: Event) => {
       emit('click', event);
     };
-
-    return () =>
-      h(
-        props.tag,
-        {
-          class: `${props.classPrefix} ${componentName}-${props.name}`,
-          style: { color: props.color, fontSize: props.size },
-          onClick: handleClick
-        },
-        slots.default?.()
-      );
+    const isImage = () => {
+      return props.name ? props.name.indexOf('/') !== -1 : false;
+    };
+    const styleOptions = {
+      class: `${props.classPrefix} ${componentName}-${props.name}`,
+      style: { color: props.color, fontSize: props.size },
+      onClick: handleClick
+    } as any;
+    if (isImage()) {
+      styleOptions.class = `${componentName}__img`;
+      styleOptions.src = props.name;
+      styleOptions.style['width'] = props.size;
+      styleOptions.style['height'] = props.size;
+    }
+    return () => h(isImage() ? 'img' : props.tag, styleOptions, slots.default?.());
   }
 });
 </script>
-- 
GitLab