feat(icon): icon-config-provider (private component)

src/icon/src/Icon.js

@@ -2,10 +2,16 @@ import { h } from 'vue'
 import { configurable, themeable, withCssr } from '../../_mixins'
 import styles from './styles/index'
 import { formatLength, getSlot } from '../../_utils'
+import commonProps from './common-props'
 
 export default {
   __NAIVE_ICON__: true,
   name: 'Icon',
+  inject: {
+    NIconConfigProvider: {
+      default: null
+    }
+  },
   mixins: [configurable, themeable, withCssr(styles)],
   props: {
     size: {
@@ -25,7 +31,8 @@ export default {
     colorTransition: {
       type: Boolean,
       default: false
-    }
+    },
+    ...commonProps
   },
   computed: {
     styles () {
@@ -34,23 +41,31 @@ export default {
         fontSize: formatLength(size),
         color
       }
+    },
+    mergedDepth () {
+      const { depth } = this
+      if (depth !== undefined) return depth
+      return this.NIconConfigProvider?.depth
     }
   },
   render () {
     const parent = this.$parent
     if (parent && parent.$options.__NAIVE_ICON__) return getSlot(this)
     else {
-      const { mergedTheme, depth, colorTransition } = this
+      const { mergedTheme, mergedDepth, colorTransition } = this
       return h(
         'i',
         {
           ...this.$attrs,
-          class: {
-            'n-icon': true,
-            [`n-${mergedTheme}-theme`]: mergedTheme,
-            [`n-icon--${depth}-depth`]: depth,
-            'n-icon--color-transition': colorTransition || depth !== undefined
-          },
+          class: [
+            'n-icon',
+            {
+              [`n-${mergedTheme}-theme`]: mergedTheme,
+              [`n-icon--${mergedDepth}-depth`]: mergedDepth,
+              'n-icon--color-transition':
+                colorTransition || mergedDepth !== undefined
+            }
+          ],
           style: {
             ...this.styles,
             ...this.mergedStyle

src/icon/src/IconConfigProvider.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+// private
+import { provide } from 'vue'
+import commonProps from './common-props'
+
+export default {
+  name: 'NIconConfigProvider',
+  props: {
+    ...commonProps
+  },
+  setup (props) {
+    provide('NIconConfigProvider', props)
+  }
+}
+</script>

src/icon/src/common-props.js

@@ -0,0 +1,8 @@
+export default {
+  depth: {
+    validator (value) {
+      return [1, 2, 3, 4, 5, '1', '2', '3', '4', '5'].includes(value)
+    },
+    default: undefined
+  }
+}

src/icon/src/styles/themed-base.cssr.js

@@ -1,11 +1,15 @@
-import { c, cTB, cM, cB } from '../../../_utils/cssr'
+import { c, cTB, cM } from '../../../_utils/cssr'
 
 export default c([
   ({ props }) => {
     const {
-      color
-    } = props.$local
-    const { cubicBezierEaseInOut } = props.$global
+      $global: {
+        cubicBezierEaseInOut
+      },
+      $local: {
+        color
+      }
+    } = props
     return [
       cTB('icon', {
         raw: `
@@ -34,16 +38,7 @@ export default c([
             opacity: props.$local[`opacity${v}Depth`]
           })
         ]))
-      ]),
-      [1, 2, 3, 4, 5].map(v => cB(`icon-${v}-depth >`, [
-        cTB('icon', {
-          color
-        }, [
-          c('svg', {
-            opacity: props.$local[`opacity${v}Depth`]
-          })
-        ])
-      ]))
+      ])
     ]
   }
 ])