refactor(icon): use currentColor

2024-12-09 04:31:35 +08:00 · 2020-10-23 22:18:30 +08:00 · 2020-10-23 22:18:30 +08:00 · 2c6e3f1225
commit 2c6e3f1225
parent a5f73be880
10 changed files with 90 additions and 57 deletions
--- a/demo/documentation/components/icon/enUS/depth.demo.md
+++ b/demo/documentation/components/icon/enUS/depth.demo.md
@ -3,19 +3,31 @@ To match different level text colors, icon provides `depth` prop.
 ```html
 <n-icon
  size="40"
-  depth="primary"
+  :depth="1"
 >
  <cash-outline />
 </n-icon>
 <n-icon
  size="40"
-  depth="secondary"
+  :depth="2"
 >
  <cash-outline />
 </n-icon>
 <n-icon
  size="40"
-  depth="tertiary"
+  :depth="3"
+>
+  <cash-outline />
+</n-icon>
+<n-icon
+  size="40"
+  :depth="4"
+>
+  <cash-outline />
+</n-icon>
+<n-icon
+  size="40"
+  :depth="5"
 >
  <cash-outline />
 </n-icon>
--- a/demo/documentation/components/icon/enUS/index.demo-entry.md
+++ b/demo/documentation/components/icon/enUS/index.demo-entry.md
@ -18,7 +18,7 @@ depth
 |Name|Type|Default|Description|
 |-|-|-|-|
 |color|`string`|`undefined`||
-|depth|`'primary' \| 'secondary' \| 'tertiary'`|`undefined`||
+|depth|`1 \| 2 \| 3 \| 4 \| 5`|`undefined`||
 |size|`number \| string`|`undefined`||
 |themed-style|`{ [themeName: string]: Object }`|`undefined`||
 |theme|`'light' \| 'dark' \| string`|`undefined`||
--- a/demo/documentation/components/icon/zhCN/depth.demo.md
+++ b/demo/documentation/components/icon/zhCN/depth.demo.md
@ -3,19 +3,31 @@
 ```html
 <n-icon
  size="40"
-  depth="primary"
+  :depth="1"
 >
  <cash-outline />
 </n-icon>
 <n-icon
  size="40"
-  depth="secondary"
+  :depth="2"
 >
  <cash-outline />
 </n-icon>
 <n-icon
  size="40"
-  depth="tertiary"
+  :depth="3"
+>
+  <cash-outline />
+</n-icon>
+<n-icon
+  size="40"
+  :depth="4"
+>
+  <cash-outline />
+</n-icon>
+<n-icon
+  size="40"
+  :depth="5"
 >
  <cash-outline />
 </n-icon>
--- a/demo/documentation/components/icon/zhCN/index.demo-entry.md
+++ b/demo/documentation/components/icon/zhCN/index.demo-entry.md
@ -16,7 +16,7 @@ depth
 |名称|类型|默认值|说明|
 |-|-|-|-|
 |color|`string`|`undefined`||
-|depth|`'primary' \| 'secondary' \| 'tertiary'`|`undefined`||
+|depth|`1 \| 2 \| 3 \| 4 \| 5`|`undefined`||
 |size|`number \| string`|`undefined`||
 |themed-style|`{ [themeName: string]: Object }`|`undefined`||
 |theme|`'light' \| 'dark' \| string`|`undefined`||
--- a/src/_base/icons/CalendarIcon.vue
+++ b/src/_base/icons/CalendarIcon.vue
@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-    <path d="M448,64H400V32H360V64H152V32H112V64H64A32,32,0,0,0,32,96V448a32,32,0,0,0,32,32H448a32,32,0,0,0,32-32V96A32,32,0,0,0,448,64ZM436,436H76V176H436Z" />
+  <svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill-rule="evenodd">
+      <g fill="#212121" fill-rule="nonzero">
+        <path d="M21.75,3 C23.5449254,3 25,4.45507456 25,6.25 L25,21.75 C25,23.5449254 23.5449254,25 21.75,25 L6.25,25 C4.45507456,25 3,23.5449254 3,21.75 L3,6.25 C3,4.45507456 4.45507456,3 6.25,3 L21.75,3 Z M23.5,9.503 L4.5,9.503 L4.5,21.75 C4.5,22.7164983 5.28350169,23.5 6.25,23.5 L21.75,23.5 C22.7164983,23.5 23.5,22.7164983 23.5,21.75 L23.5,9.503 Z M21.75,4.5 L6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 L4.5,8.003 L23.5,8.003 L23.5,6.25 C23.5,5.28350169 22.7164983,4.5 21.75,4.5 Z" />
+      </g>
+    </g>
  </svg>
 </template>
--- a/src/icon/src/Icon.js
+++ b/src/icon/src/Icon.js
@ -23,7 +23,7 @@ export default {
    },
    depth: {
      validator (value) {
-        return ['primary', 'secondary', 'tertiary'].includes(value)
+        return [1, 2, 3, 4, 5, '1', '2', '3', '4', '5'].includes(value)
      },
      default: undefined
    },
@ -34,15 +34,14 @@ export default {
  },
  computed: {
    styles () {
-      let style = {}
-      if (this.size) {
-        style['font-size'] = formatLength(this.size)
+      const {
+        size,
+        color
+      } = this
+      return {
+        fontSize: formatLength(size),
+        color
      }
-      if (this.color) {
-        style.fill = this.color
-        style.stroke = this.color
-      }
-      return style
    }
  },
  render () {
--- a/src/icon/src/styles/themed-base.cssr.js
+++ b/src/icon/src/styles/themed-base.cssr.js
@ -6,9 +6,11 @@ export default c([
      color,
      opacity1Depth,
      opacity2Depth,
-      opacity3Depth
+      opacity3Depth,
+      opacity4Depth,
+      opacity5Depth
    } = props.$local
-    const { cubicBezierEaseInOut, iconTransition } = props.$base
+    const { cubicBezierEaseInOut } = props.$base
    return [
      cTB('icon', {
        raw: `
@ -18,40 +20,38 @@ export default c([
          text-align: center;
          display: inline-block;
          position: relative;
-          transition: ${iconTransition};
-          fill: ${color};
-          stroke:  ${color};
+          transition:
+            fill .3s ${cubicBezierEaseInOut},
+            stroke .3s ${cubicBezierEaseInOut},
+            opacity .3s ${cubicBezierEaseInOut};
+          fill: currentColor;
+          stroke: currentColor;
        `
      },
      [
-        c('svg', {
-          raw: `
-            transition: opacity .3s ${cubicBezierEaseInOut};
-            height: 1em;
-            width: 1em;
-          `
+        cM('1-depth, 2-depth, 3-depth, 4-depth, 5-depth', {
+          fill: color,
+          stroke: color
        }),
-        cM('primary-depth', [
-          c('svg', {
-            raw: `
-              opacity: ${opacity1Depth};
-            `
-          })
-        ]),
-        cM('secondary-depth', [
-          c('svg', {
-            raw: `
-              opacity: ${opacity2Depth};
-            `
-          })
-        ]),
-        cM('tertiary-depth', [
-          c('svg', {
-            raw: `
-              opacity: ${opacity3Depth};
-            `
-          })
-        ])
+        c('svg', {
+          height: '1em',
+          width: '1em'
+        }),
+        cM('1-depth', {
+          opacity: opacity1Depth
+        }),
+        cM('2-depth', {
+          opacity: opacity2Depth
+        }),
+        cM('3-depth', {
+          opacity: opacity3Depth
+        }),
+        cM('4-depth', {
+          opacity: opacity4Depth
+        }),
+        cM('5-depth', {
+          opacity: opacity5Depth
+        })
      ])
    ]
  }
--- a/src/icon/styles/dark.js
+++ b/src/icon/styles/dark.js
@ -8,13 +8,17 @@ export default create({
      textColorBase,
      opacity1,
      opacity2,
-      opacity3
+      opacity3,
+      opacity4,
+      opacity5
    } = derived
    return {
      color: textColorBase,
      opacity1Depth: opacity1,
      opacity2Depth: opacity2,
-      opacity3Depth: opacity3
+      opacity3Depth: opacity3,
+      opacity4Depth: opacity4,
+      opacity5Depth: opacity5
    }
  }
 })
--- a/src/icon/styles/light.js
+++ b/src/icon/styles/light.js
@ -8,13 +8,17 @@ export default create({
      textColorBase,
      opacity1,
      opacity2,
-      opacity3
+      opacity3,
+      opacity4,
+      opacity5
    } = derived
    return {
      color: textColorBase,
      opacity1Depth: opacity1,
      opacity2Depth: opacity2,
-      opacity3Depth: opacity3
+      opacity3Depth: opacity3,
+      opacity4Depth: opacity4,
+      opacity5Depth: opacity5
    }
  }
 })
--- a/src/styles/base/_common.js
+++ b/src/styles/base/_common.js
@ -13,8 +13,6 @@ export default {

  lineHeight: '1.75',

-  iconTransition: 'fill .3s cubic-bezier(.4, 0, .2, 1), stroke .3s cubic-bezier(.4, 0, .2, 1)',
-
  transformDebounceScale: 'scale(0.99999)',

  popmenuBoxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.18)'