From 8326e405863a5c9b2ffde11210541eaaeed2405d Mon Sep 17 00:00:00 2001
From: danranVm <danranvm@gmail.com>
Date: Tue, 22 Dec 2020 15:03:36 +0800
Subject: [PATCH] feat(comp:icon): support fill currentColo (#57)

fix #56
---
 packages/components/icon/demo/Basic.vue   | 9 +++++++--
 packages/components/icon/src/utils.ts     | 1 +
 packages/components/icon/style/index.less | 3 ++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/components/icon/demo/Basic.vue b/packages/components/icon/demo/Basic.vue
index b13b7d761..4aa04b262 100644
--- a/packages/components/icon/demo/Basic.vue
+++ b/packages/components/icon/demo/Basic.vue
@@ -2,8 +2,8 @@
   <ix-icon name="up" />
   <ix-icon name="down" rotate />
   <ix-icon name="left" rotate="90" />
-  <ix-icon name="right" rotate />
-  <ix-icon name="ix-icon-up" iconfont />
+  <ix-icon name="right" style="color: red" rotate />
+  <ix-icon name="ix-icon-up" class="icon-blue" iconfont />
   <ix-icon name="ix-icon-down" iconfont />
 </template>
 
@@ -29,3 +29,8 @@ export default defineComponent({
   },
 })
 </script>
+<style lang="less" scoped>
+.icon-blue {
+  color: blue;
+}
+</style>
diff --git a/packages/components/icon/src/utils.ts b/packages/components/icon/src/utils.ts
index ccf530fa7..3c5409169 100644
--- a/packages/components/icon/src/utils.ts
+++ b/packages/components/icon/src/utils.ts
@@ -91,6 +91,7 @@ function setSVGAttribute(svg: SVGElement, iconName: string): void {
   svg.setAttribute('width', '1em')
   svg.setAttribute('height', '1em')
   svg.setAttribute('focusable', 'false')
+  svg.setAttribute('fill', 'currentColor')
   svg.setAttribute('aria-hidden', 'true')
   svg.setAttribute('data-icon', iconName)
 }
diff --git a/packages/components/icon/style/index.less b/packages/components/icon/style/index.less
index 3113058b7..bc21f1c79 100644
--- a/packages/components/icon/style/index.less
+++ b/packages/components/icon/style/index.less
@@ -3,5 +3,6 @@
 @icon-prefix: ~'@{idux-prefix}-icon';
 
 .@{icon-prefix} {
-  color: #fff;
+  display: inline-block;
+  color: inherit;
 }