From bbebf09e142d7ec2c9030aaef1bf886fcf2ca7de Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Tue, 16 Jul 2024 17:35:27 +0300
Subject: [PATCH] chore: add customise prop to vue component

---
 components-demo/vue-demo/src/App.vue          |  2 +-
 .../src/demo-components/UsageFull.vue         | 30 +++++++++++++++++++
 components/vue/package.json                   |  2 +-
 components/vue/src/iconify.ts                 | 28 +++++++++++++----
 components/vue/src/props.ts                   | 22 +++++++++++---
 5 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/components-demo/vue-demo/src/App.vue b/components-demo/vue-demo/src/App.vue
index 4250d1e..b054220 100644
--- a/components-demo/vue-demo/src/App.vue
+++ b/components-demo/vue-demo/src/App.vue
@@ -38,7 +38,7 @@ import {
 	addIcon as addOnlineIcon,
 	addCollection as addOnlineCollection,
 	disableCache,
-} from '@iconify/vue/dist/iconify';
+} from '@iconify/vue';
 import bxBarChartAlt from '@iconify-icons/bx/bx-bar-chart-alt';
 import bxShapes from '@iconify-icons/bx/bxs-shapes';
 
diff --git a/components-demo/vue-demo/src/demo-components/UsageFull.vue b/components-demo/vue-demo/src/demo-components/UsageFull.vue
index c5952e1..4c023d7 100644
--- a/components-demo/vue-demo/src/demo-components/UsageFull.vue
+++ b/components-demo/vue-demo/src/demo-components/UsageFull.vue
@@ -12,6 +12,21 @@
 				:ssr="true"
 			/>
 		</div>
+		<div>
+			Customising stroke width:
+			<Icon icon="line-md:arrow-right" />
+			<Icon icon="line-md:arrow-right" :customise="customise1" />
+			<Icon
+				icon="line-md:arrow-right"
+				:customise="
+					(content) =>
+						content.replace(
+							/stroke-width=&quot;2&quot;/g,
+							'stroke-width=&quot;1&quot;'
+						)
+				"
+			/>
+		</div>
 		<div class="alert">
 			<Icon icon="mdi-light:alert" />Important notice with alert icon!
 		</div>
@@ -25,5 +40,20 @@ export default {
 	components: {
 		Icon,
 	},
+	methods: {
+		customise1,
+	},
 };
+
+function customise1(
+	content: string,
+	name: string,
+	prefix: string,
+	provider: string
+) {
+	if (name !== 'arrow-right' || prefix !== 'line-md' || provider !== '') {
+		throw new Error('Bad params in customise callback');
+	}
+	return content.replace(/stroke-width="2"/g, 'stroke-width="1.5"');
+}
 </script>
diff --git a/components/vue/package.json b/components/vue/package.json
index 765241e..91a3dd3 100644
--- a/components/vue/package.json
+++ b/components/vue/package.json
@@ -2,7 +2,7 @@
 	"name": "@iconify/vue",
 	"description": "Iconify icon component for Vue 3.",
 	"author": "Vjacheslav Trushkin",
-	"version": "4.1.2",
+	"version": "4.1.3-beta.1",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",
diff --git a/components/vue/src/iconify.ts b/components/vue/src/iconify.ts
index ab3ce07..71a20e0 100644
--- a/components/vue/src/iconify.ts
+++ b/components/vue/src/iconify.ts
@@ -81,6 +81,7 @@ import type {
 	IconifyIconCustomisations,
 	IconifyIconProps,
 	IconifyRenderMode,
+	IconifyIconCustomiseCallback,
 } from './props';
 
 // Render SVG
@@ -277,7 +278,8 @@ export const Icon = defineComponent<IconProps>({
 		// Get data for icon to render or null
 		getIcon(
 			icon: IconifyIcon | string,
-			onload?: IconifyIconOnLoad
+			onload?: IconifyIconOnLoad,
+			customise?: IconifyIconCustomiseCallback
 		): IconComponentData | null {
 			// Icon is an object
 			if (
@@ -304,7 +306,7 @@ export const Icon = defineComponent<IconProps>({
 			}
 
 			// Load icon
-			const data = getIconData(iconName);
+			let data = getIconData(iconName);
 			if (!data) {
 				// Icon data is not available
 				if (!this._loadingIcon || this._loadingIcon.name !== icon) {
@@ -333,6 +335,21 @@ export const Icon = defineComponent<IconProps>({
 				}
 			}
 
+			// Customise icon
+			if (customise) {
+				// Clone data and customise it
+				data = Object.assign({}, data);
+				const customised = customise(
+					data.body,
+					iconName.name,
+					iconName.prefix,
+					iconName.provider
+				);
+				if (typeof customised === 'string') {
+					data.body = customised;
+				}
+			}
+
 			// Add classes
 			const classes: string[] = ['iconify'];
 			if (iconName.prefix !== '') {
@@ -354,9 +371,10 @@ export const Icon = defineComponent<IconProps>({
 		const props = this.$attrs;
 
 		// Get icon data
-		const icon: IconComponentData | null = (this.iconMounted || props.ssr)
-			? this.getIcon(props.icon, props.onLoad)
-			: null;
+		const icon: IconComponentData | null =
+			this.iconMounted || props.ssr
+				? this.getIcon(props.icon, props.onLoad, props.customise)
+				: null;
 
 		// Validate icon object
 		if (!icon) {
diff --git a/components/vue/src/props.ts b/components/vue/src/props.ts
index ce65442..094e4ca 100644
--- a/components/vue/src/props.ts
+++ b/components/vue/src/props.ts
@@ -33,6 +33,16 @@ export const defaultExtendedIconCustomisations = {
  */
 export type IconifyIconOnLoad = (name: string) => void;
 
+/**
+ * Customise callback
+ */
+export type IconifyIconCustomiseCallback = (
+	content: string,
+	name: string,
+	prefix: string,
+	provider: string
+) => string;
+
 /**
  * Icon properties
  */
@@ -59,9 +69,6 @@ interface IconifyElementProps {
 
 	// Style
 	style?: unknown;
-
-	// Callback to call when icon data has been loaded. Used only for icons loaded from API
-	onLoad?: IconifyIconOnLoad;
 }
 
 /**
@@ -74,5 +81,12 @@ export interface IconProps extends IconifyElementProps, IconifyIconProps {
 	 * This is a low-level API for framework integrations, you don't usually need to use it directly.
 	 * Note this might hydration mismatches if the icon data is not handled correctly, use with caution.
 	 */
-	ssr?: boolean
+	ssr?: boolean;
+
+	// Callback to call when icon data has been loaded. Used only for icons loaded from API
+	onLoad?: IconifyIconOnLoad;
+
+	// Customise icon content (replace stroke-width, colors, etc...).
+	// Called only for icons loaded from API
+	customise?: IconifyIconCustomiseCallback;
 }