chore: add customise prop to vue component

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';
 

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>

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/",

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,8 +371,9 @@ export const Icon = defineComponent<IconProps>({
 		const props = this.$attrs;
 
 		// Get icon data
-		const icon: IconComponentData | null = (this.iconMounted || props.ssr)
+		const icon: IconComponentData | null =
-			? this.getIcon(props.icon, props.onLoad)
+			this.iconMounted || props.ssr
+				? this.getIcon(props.icon, props.onLoad, props.customise)
 				: null;
 
 		// Validate icon object

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;
 }