feat(comp:icon): support fill currentColo (#57)

fix #56
IDuxFE · Dec 22, 2020 · 8326e40 · 8326e40
1 parent 0d60496
commit 8326e40
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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
@@ -3,5 +3,6 @@
 @icon-prefix: ~'@{idux-prefix}-icon';
 
 .@{icon-prefix} {
-  color: #fff;
+  display: inline-block;
+  color: inherit;
 }