feat(VColorPicker): customizable eyeDropper icon (#21656)

resolves #21406

Author: J-Sek

packages/api-generator/src/locale/en/VColorPicker.json

@@ -2,6 +2,7 @@
   "props": {
     "canvasHeight": "Height of canvas.",
     "dotSize": "Changes the size of the selection dot on the canvas.",
+    "eyeDropperIcon": "Icon used to trigger EyeDropper API.",
     "flat": "Removes elevation.",
     "hideCanvas": "Hides canvas.",
     "hideSliders": "Hides sliders.",

packages/docs/src/data/new-in.json

@@ -43,6 +43,11 @@
       "baseColor": "3.8.0"
     }
   },
+  "VColorPicker": {
+    "props": {
+      "eyeDropperIcon": "3.10.0"
+    }
+  },
   "VCombobox": {
     "props": {
       "clearOnSelect": "3.5.0",

packages/vuetify/src/components/VColorPicker/VColorPicker.tsx

@@ -4,7 +4,7 @@ import './VColorPicker.sass'
 // Components
 import { VColorPickerCanvas } from './VColorPickerCanvas'
 import { VColorPickerEdit } from './VColorPickerEdit'
-import { VColorPickerPreview } from './VColorPickerPreview'
+import { makeVColorPickerPreviewProps, VColorPickerPreview } from './VColorPickerPreview'
 import { VColorPickerSwatches } from './VColorPickerSwatches'
 import { makeVPickerProps, VPicker } from '@/labs/VPicker/VPicker'
 
@@ -16,7 +16,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 // Utilities
 import { computed, onBeforeMount, ref, watch } from 'vue'
 import { extractColor, modes, nullColor } from './util'
-import { consoleWarn, defineComponent, HSVtoCSS, parseColor, propsFactory, RGBtoHSV, useRender } from '@/util'
+import { consoleWarn, defineComponent, HSVtoCSS, parseColor, pick, propsFactory, RGBtoHSV, useRender } from '@/util'
 
 // Types
 import type { DeepReadonly, PropType } from 'vue'
@@ -56,6 +56,7 @@ export const makeVColorPickerProps = propsFactory({
   },
 
   ...makeVPickerProps({ hideHeader: true }),
+  ...pick(makeVColorPickerPreviewProps(), ['eyeDropperIcon']),
 }, 'VColorPicker')
 
 export const VColorPicker = defineComponent({
@@ -172,6 +173,7 @@ export const VColorPicker = defineComponent({
                         onUpdate:color={ updateColor }
                         hideAlpha={ !mode.value.endsWith('a') }
                         disabled={ props.disabled }
+                        eyeDropperIcon={ props.eyeDropperIcon }
                       />
                     )}
 

packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx

@@ -7,6 +7,7 @@ import { VSlider } from '@/components/VSlider'
 
 // Composables
 import { makeComponentProps } from '@/composables/component'
+import { IconValue } from '@/composables/icons'
 import { useLocale } from '@/composables/locale'
 
 // Utilities
@@ -32,6 +33,10 @@ export const makeVColorPickerPreviewProps = propsFactory({
   },
   disabled: Boolean,
   hideAlpha: Boolean,
+  eyeDropperIcon: {
+    type: IconValue,
+    default: '$eyeDropper',
+  },
 
   ...makeComponentProps(),
 }, 'VColorPickerPreview')
@@ -80,7 +85,7 @@ export const VColorPickerPreview = defineComponent({
               aria-label={ t('$vuetify.colorPicker.ariaLabel.eyedropper') }
               density="comfortable"
               disabled={ props.disabled }
-              icon="$eyeDropper"
+              icon={ props.eyeDropperIcon }
               variant="plain"
               onClick={ openEyeDropper }
             />