* Fix issue of icon not getting set properly.

* Change icon size usage

Author: webdevnerdstuff

src/plugin/VColorField.vue

@@ -62,6 +62,7 @@
 					v-else-if="prependIcon"
 					:color="hoverIconColor"
 					:icon="prependIcon"
+					:iconSize="iconSize"
 					@click="toggleColorPicker"
 				/>
 			</template>
@@ -93,6 +94,7 @@
 					v-else-if="prependInnerIcon"
 					:color="hoverIconColor"
 					:icon="prependInnerIcon"
+					:iconSize="iconSize"
 					@click="toggleCheck('textFieldIcon')"
 				/>
 			</template>
@@ -124,6 +126,7 @@
 					v-else-if="appendInnerIcon"
 					:color="hoverIconColor"
 					:icon="appendInnerIcon"
+					:iconSize="iconSize"
 					@click="toggleCheck('textFieldIcon')"
 				/>
 			</template>
@@ -155,6 +158,7 @@
 					v-else-if="appendIcon"
 					:color="hoverIconColor"
 					:icon="appendIcon"
+					:iconSize="iconSize"
 					@click="toggleColorPicker"
 				/>
 			</template>
@@ -254,6 +258,7 @@ const props = withDefaults(defineProps<Props>(), {
 	density: 'default',
 	hint: '',
 	iconHoverColor: undefined,
+	iconSize: 'default',
 	label: undefined,
 	messages: undefined,
 	name: 'color',
@@ -263,12 +268,11 @@ const props = withDefaults(defineProps<Props>(), {
 	pip: false,
 	pipBorder: '3px solid rgb(var(--v-theme-on-surface))',
 	pipBorderRadius: '50%',
-	pipIcon: undefined,
-	pipSize: 'default',
+	pipIcon: 'pip',
 	pipSlot: 'prepend-inner',
 	placeholder: undefined,
 	prependIcon: undefined,
-	prependInnerIcon: 'mdi:mdi-palette',
+	prependInnerIcon: 'default',
 	readonly: false,
 	readonlyInput: false,
 	required: false,
@@ -327,7 +331,7 @@ const pipProps = ref({
 	pipBorder: props.pipBorder,
 	pipBorderRadius: props.pipBorderRadius,
 	pipIcon: props.pipIcon,
-	pipSize: props.pipSize,
+	pipSize: props.iconSize,
 });
 
 

src/plugin/components/ColorPickerIcon.vue

@@ -5,6 +5,7 @@
 				v-bind="props"
 				:color="isHovering ? color : undefined"
 				:icon="theIcon"
+				:size="iconSize"
 				@click="toggleColorPicker"
 			></v-icon>
 		</template>
@@ -27,9 +28,9 @@ const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
 const theIcon = computed(() => {
 	return useGetIcon({
-		icon: props.icon,
+		icon: props.icon !== 'default' ? props.icon : '',
 		iconOptions,
-		name: 'palette',
+		name: 'default',
 	});
 });
 

src/plugin/components/PipComponent.vue

@@ -17,7 +17,6 @@ import { usePipClasses } from '@/plugin/composables/classes';
 import { usePipStyles } from '@/plugin/composables/styles';
 import { useGetIcon } from '@/plugin/composables/icons';
 
-
 const emit = defineEmits(['click']);
 
 const props = withDefaults(defineProps<PipComponentProps>(), {});
@@ -35,7 +34,7 @@ const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 
 const thePipIcon = computed(() => {
 	return useGetIcon({
-		icon: props.pipIcon,
+		icon: props.pipIcon !== 'pip' ? props.pipIcon : '',
 		iconOptions,
 		name: 'pip',
 	});

src/stores/props.ts

@@ -84,6 +84,12 @@ const componentProps = [
 		name: 'icon-hover-color',
 		type: 'string | undefined',
 	},
+	{
+		default: 'default',
+		desc: 'Sets the size of the <code class="ic">prepend-icon</code>, <code class="ic">prepend-inner-icon</code>, <code class="ic">append-inner-icon</code>, <code class="ic">append-icon</code> <code class="ic">VIcon</code> as well as the <code class="ic">pip-icon</code> <code class="ic">VIcon</code>.',
+		name: 'icon-size',
+		type: 'VIcon[\'$props\'][\'size\']',
+	},
 	{
 		default: 'bottom left',
 		desc: 'Sets the position of the <code class="ic">VCard</code> component relative to the <code class="ic">VTextField</code> input when it opens. Ex. <code class="ic">bottom left</code>, <code class="ic">bottom right</code>, <code class="ic">top left</code>, <code class="ic">top right</code>',
@@ -114,12 +120,6 @@ const componentProps = [
 		name: 'pip-icon',
 		type: 'VIcon[\'$props\'][\'icon\']',
 	},
-	{
-		default: 'default',
-		desc: 'Sets the size of the <code class="ic">pip</code> <code class="ic">VIcon</code>.',
-		name: 'pip-size',
-		type: 'VIcon[\'$props\'][\'size\']',
-	},
 	{
 		default: 'prepend-inner',
 		desc: 'Sets the slot where the <code class="ic">pip</code> is placed.',