Remove alignment from customisations

packages/ember/src/component.ts

@@ -33,7 +33,6 @@ interface CurrentIconData {
 const emptyIcon: RenderResult = {
 	width: 16,
 	height: 16,
-	preserveAspectRatio: 'xMidYMid meet',
 	viewBox: '0 0 16 16',
 	className: '',
 	body: '',

packages/ember/src/iconify-icon.hbs

@@ -5,7 +5,6 @@
 	role='img'
 	width={{this.data.width}}
 	height={{this.data.height}}
-	preserveAspectRatio={{this.data.preserveAspectRatio}}
 	viewBox={{this.data.viewBox}}
 	style={{this.data.style}}
 	class={{this.data.className}}

packages/ember/src/iconify-icon.ts

@@ -2,11 +2,7 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types';
 
 // Core
 import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
-import type {
+import type { IconifyIconSize } from '@iconify/utils/lib/customisations';
-	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-} from '@iconify/utils/lib/customisations';
 import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
 import {
 	iconExists,
@@ -96,8 +92,6 @@ export { IconifyIcon, IconifyJSON, IconifyIconName };
 export {
 	IconifyIconCustomisations,
 	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
 	IconifyIconProps,
 	IconifyIconOnLoad,
 };

packages/ember/src/props.ts

@@ -26,9 +26,8 @@ export interface IconifyIconProps extends IconifyIconCustomisations {
 	// Style
 	color?: string;
 
-	// Shorthand properties
+	// Flip shorthand
 	flip?: string;
-	align?: string;
 
 	// Unique id, used as base for ids for shapes. Use it to get consistent ids for server side rendering
 	id?: string;

packages/ember/src/render.ts

@@ -6,10 +6,7 @@ import {
 	defaults,
 	mergeCustomisations,
 } from '@iconify/utils/lib/customisations';
-import {
+import { flipFromString } from '@iconify/utils/lib/customisations/flip';
-	flipFromString,
-	alignmentFromString,
-} from '@iconify/utils/lib/customisations/shorthand';
 import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';
 import { iconToSVG } from '@iconify/utils/lib/svg/build';
 import { replaceIDs } from '@iconify/utils/lib/svg/id';
@@ -22,7 +19,6 @@ export interface RenderResult {
 	width: string | number;
 	height: string | number;
 	viewBox: string;
-	preserveAspectRatio: string;
 	style?: string;
 	className: string;
 	body: string;
@@ -77,13 +73,6 @@ export const render = (
 				}
 				break;
 
-			// Alignment as string
-			case 'align':
-				if (typeof value === 'string') {
-					alignmentFromString(customisations, value);
-				}
-				break;
-
 			// Color: copy to style
 			case 'color':
 				style += 'color: ' + value + ';';

packages/icon/src/attributes/customisations.ts

@@ -1,10 +1,7 @@
 import type { FullIconCustomisations } from '@iconify/utils/lib/customisations';
 import { defaults } from '@iconify/utils/lib/customisations';
 import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';
-import {
+import { flipFromString } from '@iconify/utils/lib/customisations/flip';
-	flipFromString,
-	alignmentFromString,
-} from '@iconify/utils/lib/customisations/shorthand';
 
 // Remove 'inline' from defaults
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -37,9 +34,6 @@ export function getCustomisations(node: Element): RenderedIconCustomisations {
 	// Flip
 	flipFromString(customisations, attr('flip', ''));
 
-	// Alignment
-	alignmentFromString(customisations, attr('align', ''));
-
 	return customisations;
 }
 

packages/icon/src/attributes/types.ts

@@ -27,9 +27,6 @@ export type IconifyIconCustomisationAttributes = {
 	// Transformations
 	rotate?: string | number;
 	flip?: string;
-
-	// Alignment
-	align?: string;
 };
 
 /**

packages/icon/src/component.ts

@@ -85,7 +85,6 @@ export function defineIconifyIcon(
 		'height',
 		'rotate',
 		'flip',
-		'align',
 	];
 
 	/**

packages/icon/src/index.ts

@@ -4,8 +4,6 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types';
 import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
 import type {
 	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
 	IconifyIconCustomisations,
 } from '@iconify/utils/lib/customisations';
 import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
@@ -64,12 +62,7 @@ export {
 export { IconifyIcon, IconifyJSON, IconifyIconName };
 
 // Customisations
-export {
+export { IconifyIconCustomisations, IconifyIconSize };
-	IconifyIconCustomisations,
-	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-};
 
 // API
 export {

packages/icon/tests/component-test.ts

@@ -59,7 +59,7 @@ describe('Testing icon component', () => {
 
 		// Should render SVG
 		const blankSVG =
-			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g></g></svg>';
+			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g></g></svg>';
 		expect(node._shadowRoot.innerHTML).toBe(
 			`<style>${expectedBlock}</style>${blankSVG}`
 		);
@@ -112,7 +112,7 @@ describe('Testing icon component', () => {
 
 		// Should render SPAN, with comment
 		const renderedIconWithComment =
-			"<span style=\"--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Crect width='10' height='10'%3E%3Canimate attributeName='width' values='10;5;10' dur='10s' repeatCount='indefinite' /%3E%3C/rect%3E%3C!-- --%3E%3C/svg%3E&quot;); width: 1em; height: 1em; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;\"></span>";
+			"<span style=\"--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='10' height='10'%3E%3Canimate attributeName='width' values='10;5;10' dur='10s' repeatCount='indefinite' /%3E%3C/rect%3E%3C!-- --%3E%3C/svg%3E&quot;); width: 1em; height: 1em; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;\"></span>";
 		const html1 = node._shadowRoot.innerHTML;
 		expect(html1.replace(/-- [0-9]+ --/, '-- --')).toBe(
 			`<style>${expectedBlock}</style>${renderedIconWithComment}`
@@ -178,7 +178,7 @@ describe('Testing icon component', () => {
 
 		// Should render SVG
 		const renderedIcon =
-			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><rect width="10" height="10"><animate attributeName="width" values="10;5;10" dur="10s" repeatCount="indefinite"></animate></rect></svg>';
+			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><rect width="10" height="10"><animate attributeName="width" values="10;5;10" dur="10s" repeatCount="indefinite"></animate></rect></svg>';
 		const html1 = node._shadowRoot.innerHTML;
 		const svg1 = node._shadowRoot.lastChild as SVGSVGElement;
 		const setCurrentTimeSupported = !!svg1.setCurrentTime;

packages/icon/tests/customisations-test.ts

@@ -55,16 +55,13 @@ describe('Testing customisations', () => {
 		expect(haveCustomisationsChanged(test1, test2)).toBe(true);
 		expect(getInline(testNode)).toBe(false);
 
-		// Dimensions and alignment. Empty value
+		// Dimensions, empty value
-		node.innerHTML =
+		node.innerHTML = '<span width="auto" height=""></span>';
-			'<span align="left top" width="auto" height=""></span>';
 		testNode = node.lastChild as HTMLSpanElement;
 
 		const test3 = getCustomisations(testNode);
 		expect(test3).toEqual({
 			...defaultCustomisations,
-			hAlign: 'left',
-			vAlign: 'top',
 			width: 'auto',
 		});
 		expect(haveCustomisationsChanged(test3, test2)).toBe(true);

packages/icon/tests/render-icon-test.ts

@@ -39,7 +39,7 @@ describe('Testing rendering loaded icon', () => {
 
 		// Test HTML
 		expect(node.innerHTML).toBe(
-			`<style>${expectedBlock}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g></g></svg>`
+			`<style>${expectedBlock}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g></g></svg>`
 		);
 
 		// Replace icon content
@@ -65,7 +65,7 @@ describe('Testing rendering loaded icon', () => {
 
 		// Test HTML
 		expect(node.innerHTML).toBe(
-			`<style>${expectedBlock}</style><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g><path d=""></path></g></g></svg>`
+			`<style>${expectedBlock}</style><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g><path d=""></path></g></g></svg>`
 		);
 	});
 
@@ -96,7 +96,7 @@ describe('Testing rendering loaded icon', () => {
 
 		// Test HTML
 		expect(node.innerHTML).toBe(
-			`<style>${expectedInline}</style><span style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; background-color: currentColor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%;"></span>`
+			`<style>${expectedInline}</style><span style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; background-color: currentColor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%;"></span>`
 		);
 
 		// Change mode to background, add some customisations
@@ -119,7 +119,7 @@ describe('Testing rendering loaded icon', () => {
 
 		// Test HTML
 		expect(node.innerHTML).toBe(
-			`<style>${expectedInline}</style><span style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
+			`<style>${expectedInline}</style><span style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
 		);
 	});
 });

packages/iconify/src/iconify.ts

@@ -4,8 +4,6 @@ import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
 import type {
 	IconifyIconCustomisations,
 	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
 } from '@iconify/utils/lib/customisations';
 import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build';
 import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
@@ -92,13 +90,7 @@ export {
 export { IconifyIcon, IconifyJSON, IconifyIconName };
 
 // Customisations
-export {
+export { IconifyIconCustomisations, IconifyIconSize, IconifyRenderMode };
-	IconifyIconCustomisations,
-	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-	IconifyRenderMode,
-};
 
 // Build
 export { IconifyIconBuildResult };

packages/iconify/src/iconify.without-api.ts

@@ -4,8 +4,6 @@ import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
 import type {
 	IconifyIconCustomisations,
 	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
 } from '@iconify/utils/lib/customisations';
 import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build';
 import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
@@ -42,13 +40,7 @@ export { IconifyStorageFunctions, IconifyBuilderFunctions };
 export { IconifyIcon, IconifyJSON, IconifyIconName };
 
 // Customisations
-export {
+export { IconifyIconCustomisations, IconifyIconSize, IconifyRenderMode };
-	IconifyIconCustomisations,
-	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-	IconifyRenderMode,
-};
 
 // Build
 export { IconifyIconBuildResult };

packages/iconify/src/scanner/get-props.ts

@@ -2,10 +2,7 @@ import { stringToIcon } from '@iconify/utils/lib/icon/name';
 import { defaults } from '@iconify/utils/lib/customisations';
 import type { IconifyIconCustomisations } from '@iconify/utils/lib/customisations';
 import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';
-import {
+import { flipFromString } from '@iconify/utils/lib/customisations/flip';
-	alignmentFromString,
-	flipFromString,
-} from '@iconify/utils/lib/customisations/shorthand';
 import { IconifyRenderMode, inlineClass } from './config';
 import type { IconifyElementProps } from './config';
 
@@ -23,18 +20,6 @@ const booleanAttributes: (keyof IconifyIconCustomisations)[] = [
 	'vFlip',
 ];
 
-/**
- * Combined attributes
- */
-type CombinedAtttributeFunction = (
-	customisations: IconifyIconCustomisations,
-	value: string
-) => void;
-const combinedAttributes: Record<string, CombinedAtttributeFunction> = {
-	flip: flipFromString,
-	align: alignmentFromString,
-};
-
 /**
  * Get attribute value
  */
@@ -82,12 +67,10 @@ export function getElementProps(element: Element): IconifyElementProps | null {
 		customisations.rotate = rotateFromString(rotation);
 	}
 
-	// Get alignment and transformations shorthand attributes
+	// Get flip shorthand
-	for (const attr in combinedAttributes) {
+	const flip = element.getAttribute('data-flip');
-		const value = element.getAttribute('data-' + attr);
+	if (typeof flip === 'string') {
-		if (typeof value === 'string') {
+		flipFromString(customisations, flip);
-			combinedAttributes[attr](customisations, value);
-		}
 	}
 
 	// Boolean attributes

packages/iconify/tests/changing-modes-test.ts

@@ -66,7 +66,7 @@ describe('Changing render modes', () => {
 
 		// Check HTML
 		expect(document.body.innerHTML).toBe(
-			`<span class="iconify iconify--${provider} iconify--${prefix}" data-icon="${iconName}" data-mode="style" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
+			`<span class="iconify iconify--${provider} iconify--${prefix}" data-icon="${iconName}" data-mode="style" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
 		);
 
 		let data = placeholder[elementDataProperty];
@@ -78,7 +78,7 @@ describe('Changing render modes', () => {
 		placeholder.setAttribute('data-mode', 'mask');
 		await awaitUntil(() => !!style.getPropertyValue('mask-image'));
 		expect(document.body.innerHTML).toBe(
-			`<span class="iconify iconify--${provider} iconify--${prefix}" data-icon="${iconName}" data-mode="mask" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: currentColor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%;"></span>`
+			`<span class="iconify iconify--${provider} iconify--${prefix}" data-icon="${iconName}" data-mode="mask" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: currentColor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%;"></span>`
 		);
 
 		data = placeholder[elementDataProperty];
@@ -90,7 +90,7 @@ describe('Changing render modes', () => {
 		placeholder.setAttribute('data-mode', 'bg');
 		await awaitUntil(() => !style.getPropertyValue('mask-image'));
 		expect(document.body.innerHTML).toBe(
-			`<span class="iconify iconify--${provider} iconify--${prefix}" data-icon="${iconName}" data-mode="bg" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
+			`<span class="iconify iconify--${provider} iconify--${prefix}" data-icon="${iconName}" data-mode="bg" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
 		);
 
 		data = placeholder[elementDataProperty];
@@ -102,7 +102,7 @@ describe('Changing render modes', () => {
 		placeholder.setAttribute('data-mode', 'inline');
 		await awaitUntil(() => document.body.childNodes[0] !== placeholder);
 		expect(document.body.innerHTML).toBe(
-			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" data-mode="inline" style="" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
+			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="${iconName}" data-mode="inline" style="" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
 		);
 		const svgData = document.body.childNodes[0][elementDataProperty];
 		expect(svgData.mode).toBe('inline');
@@ -111,7 +111,7 @@ describe('Changing render modes', () => {
 		placeholder.setAttribute('data-mode', 'bg');
 		await awaitUntil(() => svgData.mode !== 'bg');
 		expect(document.body.innerHTML).toBe(
-			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" data-mode="inline" style="" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
+			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="${iconName}" data-mode="inline" style="" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
 		);
 	});
 });

packages/iconify/tests/element-props-test.ts

@@ -457,82 +457,4 @@ describe('Testing element properties', () => {
 			mode: null,
 		});
 	});
-
-	it('Alignment', () => {
-		const element = document.createElement('span');
-
-		// Set icon name
-		const name = 'mdi:home';
-		const icon = {
-			provider: '',
-			prefix: 'mdi',
-			name: 'home',
-		};
-		element.setAttribute('data-icon', name);
-
-		// Default
-		expect(getElementProps(element)).toEqual({
-			name,
-			icon,
-			customisations: {
-				...defaults,
-				hAlign: 'center',
-				vAlign: 'middle',
-				slice: false,
-			},
-			mode: null,
-		});
-
-		// Horizontal
-		element.setAttribute('data-align', 'left');
-		expect(getElementProps(element)).toEqual({
-			name,
-			icon,
-			customisations: {
-				...defaults,
-				hAlign: 'left',
-			},
-			mode: null,
-		});
-
-		element.setAttribute('data-align', 'right,meet');
-		expect(getElementProps(element)).toEqual({
-			name,
-			icon,
-			customisations: {
-				...defaults,
-				hAlign: 'right',
-			},
-			mode: null,
-		});
-
-		// Vertical, slice
-		element.setAttribute('data-align', 'center,top,slice');
-		expect(getElementProps(element)).toEqual({
-			name,
-			icon,
-			customisations: {
-				...defaults,
-				vAlign: 'top',
-				slice: true,
-			},
-			mode: null,
-		});
-
-		// Overrides, spaces
-		element.setAttribute(
-			'data-align',
-			'left right top middle meet\t slice'
-		);
-		expect(getElementProps(element)).toEqual({
-			name,
-			icon,
-			customisations: {
-				...defaults,
-				hAlign: 'right',
-				slice: true,
-			},
-			mode: null,
-		});
-	});
 });

packages/iconify/tests/observing-changes-test.ts

@@ -62,7 +62,7 @@ describe('Observing DOM changes', () => {
 
 		// Check HTML
 		expect(document.body.innerHTML).toBe(
-			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
+			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
 		);
 		const svg = document.body.childNodes[0] as SVGSVGElement;
 		const svgData = svg[elementDataProperty];
@@ -77,7 +77,7 @@ describe('Observing DOM changes', () => {
 			() => document.body.innerHTML.indexOf('transform=') !== -1
 		);
 		expect(document.body.innerHTML).toBe(
-			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" data-rotate="90deg" class="iconify iconify--${provider} iconify--${prefix}"><g transform="rotate(90 8 8)"><g></g></g></svg>`
+			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="${iconName}" data-rotate="90deg" class="iconify iconify--${provider} iconify--${prefix}"><g transform="rotate(90 8 8)"><g></g></g></svg>`
 		);
 	});
 
@@ -142,7 +142,7 @@ describe('Observing DOM changes', () => {
 
 		// Check HTML
 		expect(document.body.innerHTML).toBe(
-			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix1}"><g></g></svg>`
+			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix1}"><g></g></svg>`
 		);
 		const svg = document.body.childNodes[0] as SVGSVGElement;
 		const svgData = svg[elementDataProperty];
@@ -157,7 +157,7 @@ describe('Observing DOM changes', () => {
 
 		// SVG should not have been replaced yet, but data should match new icon
 		expect(document.body.innerHTML).toBe(
-			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix1}"><g></g></svg>`
+			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix1}"><g></g></svg>`
 		);
 		expect(document.body.childNodes[0]).toBe(svg);
 		expect(svgData.status).toBe('loading');
@@ -172,7 +172,7 @@ describe('Observing DOM changes', () => {
 		);
 
 		expect(document.body.innerHTML).toBe(
-			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix2}"><path d="M0 0v2"></path></svg>`
+			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix2}"><path d="M0 0v2"></path></svg>`
 		);
 	});
 
@@ -285,7 +285,7 @@ describe('Observing DOM changes', () => {
 		);
 
 		expect(document.body.innerHTML).toBe(
-			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix2}"><path d="M0 0v2"></path></svg>`
+			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix2}"><path d="M0 0v2"></path></svg>`
 		);
 	});
 });

packages/iconify/tests/re-render-node-test.ts

@@ -77,7 +77,7 @@ describe('Testing re-rendering nodes', () => {
 				width: 24,
 				height: 24,
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>',
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>',
 			(svg) => {
 				const data = svg[elementDataProperty];
 				expect(data.status).toBe('loaded');
@@ -94,7 +94,7 @@ describe('Testing re-rendering nodes', () => {
 					height: 32,
 				};
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" data-icon="mdi-light:home-outline" data-height="auto" class="iconify iconify--mdi-light"><path d=""></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32" viewBox="0 0 32 32" data-icon="mdi-light:home-outline" data-height="auto" class="iconify iconify--mdi-light"><path d=""></path></svg>'
 		);
 
 		const data = svg[elementDataProperty];
@@ -113,7 +113,7 @@ describe('Testing re-rendering nodes', () => {
 		const svg = await testIcon(
 			'<span class="iconify" data-icon="mdi:home"></span>',
 			iconData,
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>',
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>',
 			(svg) => {
 				const data = svg[elementDataProperty];
 				expect(data.status).toBe('loaded');
@@ -125,7 +125,7 @@ describe('Testing re-rendering nodes', () => {
 
 				return iconData;
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi iconify-inline" style="vertical-align: -0.125em;"><g></g></svg>',
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi iconify-inline" style="vertical-align: -0.125em;"><g></g></svg>',
 			(svg) => {
 				const data = svg[elementDataProperty];
 				expect(data.status).toBe('loaded');
@@ -137,7 +137,7 @@ describe('Testing re-rendering nodes', () => {
 
 				return iconData;
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" style="" class="iconify iconify--mdi"><g></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" style="" class="iconify iconify--mdi"><g></g></svg>'
 		);
 
 		const data = svg[elementDataProperty];
@@ -156,7 +156,7 @@ describe('Testing re-rendering nodes', () => {
 		const svg = await testIcon(
 			'<span class="iconify" data-icon="mdi:home"></span>',
 			iconData,
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>',
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>',
 			(svg) => {
 				const data = svg[elementDataProperty];
 				expect(data.status).toBe('loaded');
@@ -168,7 +168,7 @@ describe('Testing re-rendering nodes', () => {
 
 				return iconData;
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-inline="data-inline" class="iconify iconify--mdi" style="vertical-align: -0.125em;"><g></g></svg>',
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" data-inline="data-inline" class="iconify iconify--mdi" style="vertical-align: -0.125em;"><g></g></svg>',
 			(svg) => {
 				const data = svg[elementDataProperty];
 				expect(data.status).toBe('loaded');
@@ -180,7 +180,7 @@ describe('Testing re-rendering nodes', () => {
 
 				return iconData;
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-inline="" style="" class="iconify iconify--mdi"><g></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" data-inline="" style="" class="iconify iconify--mdi"><g></g></svg>'
 		);
 
 		const data = svg[elementDataProperty];
@@ -197,7 +197,7 @@ describe('Testing re-rendering nodes', () => {
 				width: 24,
 				height: 24,
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-flip="horizontal" class="iconify iconify--mdi"><g transform="translate(24 0) scale(-1 1)"><g></g></g></svg>',
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" data-flip="horizontal" class="iconify iconify--mdi"><g transform="translate(24 0) scale(-1 1)"><g></g></g></svg>',
 			(svg) => {
 				const data = svg[elementDataProperty];
 				expect(data.status).toBe('loaded');
@@ -214,7 +214,7 @@ describe('Testing re-rendering nodes', () => {
 					height: 32,
 				};
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" data-icon="mdi:home" data-flip="vertical" data-rotate="90deg" class="iconify iconify--mdi"><g transform="rotate(90 16 16) translate(0 32) scale(1 -1)"><path d=""></path></g></svg>',
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" data-icon="mdi:home" data-flip="vertical" data-rotate="90deg" class="iconify iconify--mdi"><g transform="rotate(90 16 16) translate(0 32) scale(1 -1)"><path d=""></path></g></svg>',
 			(svg) => {
 				const data = svg[elementDataProperty];
 				expect(data.status).toBe('loaded');
@@ -229,7 +229,7 @@ describe('Testing re-rendering nodes', () => {
 					body: '<g />',
 				};
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="mdi:home" data-rotate="180deg" class="iconify iconify--mdi"><g transform="rotate(180 8 8)"><g></g></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="mdi:home" data-rotate="180deg" class="iconify iconify--mdi"><g transform="rotate(180 8 8)"><g></g></g></svg>'
 		);
 
 		const data = svg[elementDataProperty];

packages/iconify/tests/render-bg-test.ts

@@ -64,7 +64,7 @@ describe('Testing rendering nodes as background', () => {
 				width: 24,
 				height: 24,
 			},
-			`<span class="iconify iconify--mdi" data-icon="mdi:home" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
+			`<span class="iconify iconify--mdi" data-icon="mdi:home" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
 		);
 
 		const data = svg[elementDataProperty];
@@ -81,7 +81,7 @@ describe('Testing rendering nodes as background', () => {
 				width: 24,
 				height: 24,
 			},
-			`<i class="iconify-inline iconify iconify--mdi" data-icon="mdi:home" data-flip="horizontal" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg transform='translate(24 0) scale(-1 1)'%3E%3Cg /%3E%3C/g%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; vertical-align: -0.125em;"></i>`
+			`<i class="iconify-inline iconify iconify--mdi" data-icon="mdi:home" data-flip="horizontal" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='translate(24 0) scale(-1 1)'%3E%3Cg /%3E%3C/g%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; vertical-align: -0.125em;"></i>`
 		);
 
 		const data = svg[elementDataProperty];
@@ -101,7 +101,7 @@ describe('Testing rendering nodes as background', () => {
 				width: 24,
 				height: 24,
 			},
-			`<span id="test" style="color: red; vertical-align: -0.1em; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;" class="iconify my-icon iconify--mdi" data-icon="mdi:home"></span>`
+			`<span id="test" style="color: red; vertical-align: -0.1em; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;" class="iconify my-icon iconify--mdi" data-icon="mdi:home"></span>`
 		);
 
 		const data = svg[elementDataProperty];
@@ -118,7 +118,7 @@ describe('Testing rendering nodes as background', () => {
 				width: 24,
 				height: 24,
 			},
-			`<i class="iconify-inline iconify iconify--mdi" data-icon="mdi:home" style="vertical-align: 0; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></i>`
+			`<i class="iconify-inline iconify iconify--mdi" data-icon="mdi:home" style="vertical-align: 0; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></i>`
 		);
 
 		const data = svg[elementDataProperty];
@@ -135,7 +135,7 @@ describe('Testing rendering nodes as background', () => {
 				width: 24,
 				height: 24,
 			},
-			`<i class="iconify-inline iconify iconify--provider iconify--mdi-light" data-icon="@provider:mdi-light:home-outline" style="color: red; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; vertical-align: -0.125em;"></i>`
+			`<i class="iconify-inline iconify iconify--provider iconify--mdi-light" data-icon="@provider:mdi-light:home-outline" style="color: red; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; vertical-align: -0.125em;"></i>`
 		);
 
 		const data = svg[elementDataProperty];
@@ -159,7 +159,7 @@ describe('Testing rendering nodes as background', () => {
 				width: 24,
 				height: 24,
 			},
-			`<i class="iconify iconify--test" data-icon="@test:test:arrow-left" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></i>`
+			`<i class="iconify iconify--test" data-icon="@test:test:arrow-left" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></i>`
 		);
 
 		const data = svg[elementDataProperty];

packages/iconify/tests/render-node-test.ts

@@ -47,7 +47,7 @@ describe('Testing rendering nodes', () => {
 				width: 24,
 				height: 24,
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>'
 		);
 
 		const data = svg[elementDataProperty];
@@ -64,7 +64,7 @@ describe('Testing rendering nodes', () => {
 				width: 24,
 				height: 24,
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-flip="horizontal" class="iconify-inline iconify iconify--mdi" style="vertical-align: -0.125em;"><g transform="translate(24 0) scale(-1 1)"><g></g></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" data-flip="horizontal" class="iconify-inline iconify iconify--mdi" style="vertical-align: -0.125em;"><g transform="translate(24 0) scale(-1 1)"><g></g></g></svg>'
 		);
 
 		const data = svg[elementDataProperty];
@@ -81,7 +81,7 @@ describe('Testing rendering nodes', () => {
 				width: 24,
 				height: 24,
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" id="test" style="color: red; vertical-align: -0.1em;" data-icon="mdi:home" class="iconify my-icon iconify--mdi"><g></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" id="test" style="color: red; vertical-align: -0.1em;" data-icon="mdi:home" class="iconify my-icon iconify--mdi"><g></g></svg>'
 		);
 
 		const data = svg[elementDataProperty];
@@ -98,7 +98,7 @@ describe('Testing rendering nodes', () => {
 				width: 24,
 				height: 24,
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" style="vertical-align: 0" class="iconify-inline iconify iconify--mdi"><g></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:home" style="vertical-align: 0" class="iconify-inline iconify iconify--mdi"><g></g></svg>'
 		);
 
 		const data = svg[elementDataProperty];
@@ -115,7 +115,7 @@ describe('Testing rendering nodes', () => {
 				width: 24,
 				height: 24,
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="@provider:mdi-light:home-outline" style="color: red; vertical-align: -0.125em;" class="iconify-inline iconify iconify--provider iconify--mdi-light"><g></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="@provider:mdi-light:home-outline" style="color: red; vertical-align: -0.125em;" class="iconify-inline iconify iconify--provider iconify--mdi-light"><g></g></svg>'
 		);
 
 		const data = svg[elementDataProperty];
@@ -136,7 +136,7 @@ describe('Testing rendering nodes', () => {
 				width: 24,
 				height: 24,
 			},
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="@test:test:arrow-left" class="iconify iconify--test"><g></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="@test:test:arrow-left" class="iconify iconify--test"><g></g></svg>'
 		);
 
 		const data = svg[elementDataProperty];

packages/iconify/tests/scan-dom-test.ts

@@ -51,7 +51,7 @@ describe('Scanning DOM', () => {
 
 		// Check HTML
 		expect(document.body.innerHTML).toBe(
-			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
+			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
 		);
 		const svg = document.body.childNodes[0];
 		const svgData = svg[elementDataProperty];
@@ -110,7 +110,7 @@ describe('Scanning DOM', () => {
 
 		// Check HTML
 		expect(document.body.innerHTML).toBe(
-			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
+			`<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
 		);
 		const svg = document.body.childNodes[0];
 		const svgData = svg[elementDataProperty];

packages/react/src/iconify.ts

@@ -4,11 +4,7 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types';
 // Core
 import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
 import { stringToIcon } from '@iconify/utils/lib/icon/name';
-import type {
+import type { IconifyIconSize } from '@iconify/utils/lib/customisations';
-	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-} from '@iconify/utils/lib/customisations';
 import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
 import {
 	iconExists,
@@ -103,8 +99,6 @@ export { IconifyIcon, IconifyJSON, IconifyIconName };
 export {
 	IconifyIconCustomisations,
 	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
 	IconifyRenderMode,
 	IconifyIconProps,
 	IconProps,

packages/react/src/offline.ts

@@ -1,10 +1,6 @@
 import React from 'react';
 import type { IconifyIcon, IconifyJSON } from '@iconify/types';
-import type {
+import type { IconifyIconSize } from '@iconify/utils/lib/customisations';
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-	IconifyIconSize,
-} from '@iconify/utils/lib/customisations';
 import { fullIcon } from '@iconify/utils/lib/icon';
 import { parseIconSet } from '@iconify/utils/lib/icon-set/parse';
 import { quicklyValidateIconSet } from '@iconify/utils/lib/icon-set/validate-basic';
@@ -25,14 +21,7 @@ export { IconifyIconCustomisations, IconifyIconProps, IconProps };
 /**
  * Export types that could be used in component
  */
-export {
+export { IconifyIcon, IconifyJSON, IconifyIconSize, IconifyRenderMode };
-	IconifyIcon,
-	IconifyJSON,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-	IconifyIconSize,
-	IconifyRenderMode,
-};
 
 /**
  * Storage for icons referred by name

packages/react/src/props.ts

@@ -43,9 +43,8 @@ export interface IconifyIconProps extends IconifyIconCustomisations {
 	// Style
 	color?: string;
 
-	// Shorthand properties
+	// Flip shorthand
 	flip?: string;
-	align?: string;
 
 	// Unique id, used as base for ids for shapes. Use it to get consistent ids for server side rendering
 	id?: string;

packages/react/src/render.ts

@@ -6,10 +6,7 @@ import {
 	defaults,
 	mergeCustomisations,
 } from '@iconify/utils/lib/customisations';
-import {
+import { flipFromString } from '@iconify/utils/lib/customisations/flip';
-	flipFromString,
-	alignmentFromString,
-} from '@iconify/utils/lib/customisations/shorthand';
 import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';
 import { iconToSVG } from '@iconify/utils/lib/svg/build';
 import { replaceIDs } from '@iconify/utils/lib/svg/id';
@@ -135,13 +132,6 @@ export const render = (
 				}
 				break;
 
-			// Alignment as string
-			case 'align':
-				if (typeof value === 'string') {
-					alignmentFromString(customisations, value);
-				}
-				break;
-
 			// Color: copy to style
 			case 'color':
 				style.color = value;

packages/react/tests/api/20-rendering-from-api.test.js

@@ -73,7 +73,6 @@ describe('Rendering icon', () => {
 					},
 					'width': '1em',
 					'height': '1em',
-					'preserveAspectRatio': 'xMidYMid meet',
 					'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height,
 					className,
 				},
@@ -136,7 +135,6 @@ describe('Rendering icon', () => {
 								},
 								'width': '1em',
 								'height': '1em',
-								'preserveAspectRatio': 'xMidYMid meet',
 								'viewBox':
 									'0 0 ' +
 									iconData.width +

packages/react/tests/api/30-changing-props.test.js

@@ -87,7 +87,6 @@ describe('Rendering icon', () => {
 								},
 								'width': '1em',
 								'height': '1em',
-								'preserveAspectRatio': 'xMidYMid meet',
 								'viewBox':
 									'0 0 ' +
 									iconData.width +
@@ -149,7 +148,6 @@ describe('Rendering icon', () => {
 								},
 								'width': '1em',
 								'height': '1em',
-								'preserveAspectRatio': 'xMidYMid meet',
 								'viewBox':
 									'0 0 ' +
 									iconData2.width +
@@ -259,7 +257,6 @@ describe('Rendering icon', () => {
 								},
 								'width': '1em',
 								'height': '1em',
-								'preserveAspectRatio': 'xMidYMid meet',
 								'viewBox':
 									'0 0 ' +
 									iconData2.width +
@@ -341,7 +338,6 @@ describe('Rendering icon', () => {
 								},
 								'width': '1em',
 								'height': '1em',
-								'preserveAspectRatio': 'xMidYMid meet',
 								'viewBox':
 									'0 0 ' +
 									iconData.width +
@@ -377,7 +373,6 @@ describe('Rendering icon', () => {
 								},
 								'width': '1em',
 								'height': '1em',
-								'preserveAspectRatio': 'xMidYMid meet',
 								'viewBox':
 									'0 0 ' +
 									iconData.width +

packages/react/tests/iconify/10-basic.test.js

@@ -34,7 +34,6 @@ describe('Creating component using object', () => {
 				},
 				'width': '1em',
 				'height': '1em',
-				'preserveAspectRatio': 'xMidYMid meet',
 				'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height,
 			},
 			children: null,
@@ -60,7 +59,6 @@ describe('Creating component using object', () => {
 				},
 				'width': '1em',
 				'height': '1em',
-				'preserveAspectRatio': 'xMidYMid meet',
 				'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height,
 			},
 			children: null,

packages/react/tests/iconify/10-style-mode.test.js

@@ -26,7 +26,7 @@ describe('Rendering as span', () => {
 			type: 'span',
 			props: {
 				style: {
-					'--svg': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z' fill='currentColor'/%3E%3C/svg%3E")`,
+					'--svg': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z' fill='currentColor'/%3E%3C/svg%3E")`,
 					'width': '1em',
 					'height': '1em',
 					'display': 'inline-block',

packages/react/tests/iconify/20-attributes.test.js

@@ -74,15 +74,10 @@ describe('Passing attributes', () => {
 
 	test('attributes that cannot change', () => {
 		const component = renderer.create(
-			<InlineIcon
+			<InlineIcon icon={iconData} viewBox="0 0 0 0" />
-				icon={iconData}
-				viewBox="0 0 0 0"
-				preserveAspectRatio="none"
-			/>
 		);
 		const tree = component.toJSON();
 
 		expect(tree.props.viewBox).toStrictEqual('0 0 24 24');
-		expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMid meet');
 	});
 });

packages/react/tests/iconify/20-transformations.test.js

@@ -112,23 +112,3 @@ describe('Flip', () => {
 		expect(body).not.toMatch('scale(');
 	});
 });
-
-describe('Alignment and slice', () => {
-	test('vAlign and slice', () => {
-		const component = renderer.create(
-			<InlineIcon icon={iconData} vAlign="top" slice={true} />
-		);
-		const tree = component.toJSON();
-
-		expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMin slice');
-	});
-
-	test('string', () => {
-		const component = renderer.create(
-			<InlineIcon icon={iconData} align="left bottom" />
-		);
-		const tree = component.toJSON();
-
-		expect(tree.props.preserveAspectRatio).toStrictEqual('xMinYMax meet');
-	});
-});

packages/react/tests/offline/10-basic.test.js

@@ -3,8 +3,7 @@ import { Icon, InlineIcon } from '../../dist/offline';
 import renderer from 'react-test-renderer';
 
 const iconData = {
-	body:
+	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
-		'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
 	width: 24,
 	height: 24,
 };
@@ -27,7 +26,6 @@ describe('Creating component', () => {
 				},
 				'width': '1em',
 				'height': '1em',
-				'preserveAspectRatio': 'xMidYMid meet',
 				'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height,
 			},
 			children: null,
@@ -53,7 +51,6 @@ describe('Creating component', () => {
 				},
 				'width': '1em',
 				'height': '1em',
-				'preserveAspectRatio': 'xMidYMid meet',
 				'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height,
 			},
 			children: null,

packages/react/tests/offline/20-attributes.test.js

@@ -76,15 +76,10 @@ describe('Passing attributes', () => {
 
 	test('attributes that cannot change', () => {
 		const component = renderer.create(
-			<InlineIcon
+			<InlineIcon icon={iconData} viewBox="0 0 0 0" />
-				icon={iconData}
-				viewBox="0 0 0 0"
-				preserveAspectRatio="none"
-			/>
 		);
 		const tree = component.toJSON();
 
 		expect(tree.props.viewBox).toStrictEqual('0 0 24 24');
-		expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMid meet');
 	});
 });

packages/react/tests/offline/20-storage.test.js

@@ -3,8 +3,7 @@ import { Icon, addIcon, addCollection } from '../../dist/offline';
 import renderer from 'react-test-renderer';
 
 const iconData = {
-	body:
+	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
-		'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
 	width: 24,
 	height: 24,
 };
@@ -28,7 +27,6 @@ describe('Using storage', () => {
 				},
 				'width': '1em',
 				'height': '1em',
-				'preserveAspectRatio': 'xMidYMid meet',
 				'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height,
 			},
 			children: null,
@@ -40,12 +38,10 @@ describe('Using storage', () => {
 			prefix: 'mdi-light',
 			icons: {
 				account: {
-					body:
+					body: '<path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"/>',
-						'<path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"/>',
 				},
 				home: {
-					body:
+					body: '<path d="M16 8.414l-4.5-4.5L4.414 11H6v8h3v-6h5v6h3v-8h1.586L17 9.414V6h-1v2.414zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v7.998h-5v-6h-3v6H5V12H2z" fill="currentColor"/>',
-						'<path d="M16 8.414l-4.5-4.5L4.414 11H6v8h3v-6h5v6h3v-8h1.586L17 9.414V6h-1v2.414zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v7.998h-5v-6h-3v6H5V12H2z" fill="currentColor"/>',
 				},
 			},
 			width: 24,
@@ -69,7 +65,6 @@ describe('Using storage', () => {
 				},
 				'width': '1em',
 				'height': '1em',
-				'preserveAspectRatio': 'xMidYMid meet',
 				'viewBox': '0 0 ' + iconSet.width + ' ' + iconSet.height,
 			},
 			children: null,
@@ -81,12 +76,10 @@ describe('Using storage', () => {
 			prefix: 'mdi-light',
 			icons: {
 				'account-alert': {
-					body:
+					body: '<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
-						'<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
 				},
 				'link': {
-					body:
+					body: '<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
-						'<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
 				},
 			},
 			width: 24,
@@ -110,7 +103,6 @@ describe('Using storage', () => {
 				},
 				'width': '1em',
 				'height': '1em',
-				'preserveAspectRatio': 'xMidYMid meet',
 				'viewBox': '0 0 ' + iconSet.width + ' ' + iconSet.height,
 			},
 			children: null,

packages/react/tests/offline/20-transformations.test.js

@@ -112,23 +112,3 @@ describe('Flip', () => {
 		expect(body).not.toMatch('scale(');
 	});
 });
-
-describe('Alignment and slice', () => {
-	test('vAlign and slice', () => {
-		const component = renderer.create(
-			<InlineIcon icon={iconData} vAlign="top" slice={true} />
-		);
-		const tree = component.toJSON();
-
-		expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMin slice');
-	});
-
-	test('string', () => {
-		const component = renderer.create(
-			<InlineIcon icon={iconData} align="left bottom" />
-		);
-		const tree = component.toJSON();
-
-		expect(tree.props.preserveAspectRatio).toStrictEqual('xMinYMax meet');
-	});
-});

packages/svelte/src/functions.ts

@@ -3,11 +3,7 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types';
 // Core
 import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
 import { stringToIcon } from '@iconify/utils/lib/icon/name';
-import type {
+import type { IconifyIconSize } from '@iconify/utils/lib/customisations';
-	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-} from '@iconify/utils/lib/customisations';
 import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
 import {
 	iconExists,
@@ -101,8 +97,6 @@ export { IconifyIcon, IconifyJSON, IconifyIconName };
 export {
 	IconifyIconCustomisations,
 	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
 	IconifyRenderMode,
 	IconifyIconProps,
 	IconProps,

packages/svelte/src/iconify.ts

@@ -17,8 +17,6 @@ export { IconifyIcon, IconifyJSON, IconifyIconName } from './functions';
 export {
 	IconifyIconCustomisations,
 	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
 	IconifyIconProps,
 	IconProps,
 	IconifyRenderMode,

packages/svelte/src/offline-iconify.ts

@@ -1,10 +1,6 @@
 // Types
 export type { IconifyJSON, IconifyIcon } from '@iconify/types';
-export type {
+export type { IconifyIconSize } from '@iconify/utils/lib/customisations';
-	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-} from '@iconify/utils/lib/customisations';
 
 // Types from props.ts
 export type {

packages/svelte/src/props.ts

@@ -34,9 +34,8 @@ export interface IconifyIconProps extends IconifyIconCustomisations {
 	// Style
 	color?: string;
 
-	// Shorthand properties
+	// Flip shorthand
 	flip?: string;
-	align?: string;
 }
 
 /**

packages/svelte/src/render.ts

@@ -3,10 +3,7 @@ import {
 	defaults,
 	mergeCustomisations,
 } from '@iconify/utils/lib/customisations';
-import {
+import { flipFromString } from '@iconify/utils/lib/customisations/flip';
-	flipFromString,
-	alignmentFromString,
-} from '@iconify/utils/lib/customisations/shorthand';
 import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';
 import { iconToSVG } from '@iconify/utils/lib/svg/build';
 import { replaceIDs } from '@iconify/utils/lib/svg/id';
@@ -124,13 +121,6 @@ export function render(
 				}
 				break;
 
-			// Alignment as string
-			case 'align':
-				if (typeof value === 'string') {
-					alignmentFromString(customisations, value);
-				}
-				break;
-
 			// Color: copy to style, add extra ';' in case style is missing it
 			case 'color':
 				style =

packages/svelte/tests/api/20-rendering-from-api.test.ts

@@ -64,7 +64,7 @@ describe('Rendering icon', () => {
 
 			// Check HTML immediately
 			expect(html).toBe(
-				'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+				'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 					className +
 					'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 			);
@@ -132,7 +132,7 @@ describe('Rendering icon', () => {
 						expect(html).toBe(
 							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="test ' +
 								className +
-								'" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+								'" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 						);
 
 						done();

packages/svelte/tests/api/30-changing-props.test.ts

@@ -114,7 +114,7 @@ describe('Rendering icon', () => {
 
 								// Check HTML
 								expect(html).toBe(
-									'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+									'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 										className +
 										'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 								);
@@ -139,7 +139,7 @@ describe('Rendering icon', () => {
 
 								// Check HTML
 								expect(html).toBe(
-									'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
+									'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" class="' +
 										className +
 										'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
 								);
@@ -246,7 +246,7 @@ describe('Rendering icon', () => {
 
 						// Check HTML
 						expect(html).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
+							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" class="' +
 								className +
 								'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
 						);
@@ -332,7 +332,7 @@ describe('Rendering icon', () => {
 
 						// Check HTML
 						expect(html).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 								className +
 								'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 						);
@@ -350,7 +350,7 @@ describe('Rendering icon', () => {
 							.innerHTML;
 
 						expect(html).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 								className +
 								'"><g transform="translate(24 0) scale(-1 1)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
 						);

packages/svelte/tests/iconify/10-basic.test.ts

@@ -26,7 +26,7 @@ describe('Creating component', () => {
 
 		// Check HTML
 		expect(html).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 
 		// Make sure getAttribute() works, used in other tests

packages/svelte/tests/iconify/10-style-mode.test.ts

@@ -29,7 +29,7 @@ describe('Rendering as span', () => {
 
 		// Check HTML
 		expect(html).toBe(
-			"<span style=\"--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z' fill='currentColor'/%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: currentColor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%;\"></span>"
+			"<span style=\"--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z' fill='currentColor'/%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: currentColor; mask-image: var(--svg); mask-repeat: no-repeat; mask-size: 100% 100%;\"></span>"
 		);
 	});
 });

packages/svelte/tests/iconify/20-attributes.test.ts

@@ -70,10 +70,8 @@ describe('Padding attributes', () => {
 		const component = render(Icon, {
 			icon: iconData,
 			viewBox: '0 0 0 0',
-			preserveAspectRatio: 'none',
 		});
 		const node = component.container.querySelector('svg')!;
 		expect(node.getAttribute('viewBox')).toBe('0 0 24 24');
-		expect(node.getAttribute('preserveAspectRatio')).toBe('xMidYMid meet');
 	});
 });

packages/svelte/tests/iconify/20-transformations.test.ts

@@ -130,26 +130,3 @@ describe('Flip', () => {
 		expect(child.tagName).toBe('path');
 	});
 });
-
-describe('Alignment and slice', () => {
-	test('vAlign and slice', () => {
-		const component = render(Icon, {
-			icon: iconData,
-			vAlign: 'top',
-			slice: true,
-		});
-		const node = component.container.querySelector('svg')!;
-
-		expect(node.getAttribute('preserveAspectRatio')).toBe('xMidYMin slice');
-	});
-
-	test('string', () => {
-		const component = render(Icon, {
-			icon: iconData,
-			align: 'left bottom',
-		});
-		const node = component.container.querySelector('svg')!;
-
-		expect(node.getAttribute('preserveAspectRatio')).toBe('xMinYMax meet');
-	});
-});

packages/svelte/tests/offline/10-basic.test.ts

@@ -20,7 +20,7 @@ describe('Creating component', () => {
 
 		// Check HTML
 		expect(html).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 
 		// Make sure getAttribute() works, used in other tests

packages/svelte/tests/offline/20-attributes.test.ts

@@ -70,10 +70,8 @@ describe('Padding attributes', () => {
 		const component = render(Icon, {
 			icon: iconData,
 			viewBox: '0 0 0 0',
-			preserveAspectRatio: 'none',
 		});
 		const node = component.container.querySelector('svg')!;
 		expect(node.getAttribute('viewBox')).toBe('0 0 24 24');
-		expect(node.getAttribute('preserveAspectRatio')).toBe('xMidYMid meet');
 	});
 });

packages/svelte/tests/offline/20-storage.test.ts

@@ -19,7 +19,7 @@ describe('Using storage', () => {
 		const html = (node.parentNode as HTMLDivElement).innerHTML;
 
 		expect(html).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 
@@ -45,7 +45,7 @@ describe('Using storage', () => {
 		const html = (node.parentNode as HTMLDivElement).innerHTML;
 
 		expect(html).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
 		);
 	});
 
@@ -71,7 +71,7 @@ describe('Using storage', () => {
 		const html = (node.parentNode as HTMLDivElement).innerHTML;
 
 		expect(html).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
 		);
 	});
 

packages/svelte/tests/offline/20-transformations.test.ts

@@ -130,26 +130,3 @@ describe('Flip', () => {
 		expect(child.tagName).toBe('path');
 	});
 });
-
-describe('Alignment and slice', () => {
-	test('vAlign and slice', () => {
-		const component = render(Icon, {
-			icon: iconData,
-			vAlign: 'top',
-			slice: true,
-		});
-		const node = component.container.querySelector('svg')!;
-
-		expect(node.getAttribute('preserveAspectRatio')).toBe('xMidYMin slice');
-	});
-
-	test('string', () => {
-		const component = render(Icon, {
-			icon: iconData,
-			align: 'left bottom',
-		});
-		const node = component.container.querySelector('svg')!;
-
-		expect(node.getAttribute('preserveAspectRatio')).toBe('xMinYMax meet');
-	});
-});

packages/utils/package.json

@@ -62,6 +62,10 @@
 			"require": "./lib/customisations/index.cjs",
 			"import": "./lib/customisations/index.mjs"
 		},
+		"./lib/customisations/flip": {
+			"require": "./lib/customisations/flip.cjs",
+			"import": "./lib/customisations/flip.mjs"
+		},
 		"./lib/customisations/index": {
 			"require": "./lib/customisations/index.cjs",
 			"import": "./lib/customisations/index.mjs"
@@ -70,10 +74,6 @@
 			"require": "./lib/customisations/rotate.cjs",
 			"import": "./lib/customisations/rotate.mjs"
 		},
-		"./lib/customisations/shorthand": {
-			"require": "./lib/customisations/shorthand.cjs",
-			"import": "./lib/customisations/shorthand.mjs"
-		},
 		"./lib/icon-set/convert-info": {
 			"require": "./lib/icon-set/convert-info.cjs",
 			"import": "./lib/icon-set/convert-info.mjs"

packages/utils/src/customisations/flip.ts

@@ -0,0 +1,32 @@
+import type { IconifyIconCustomisations } from './index';
+
+const separator = /[\s,]+/;
+
+/**
+ * Additional shorthand customisations
+ */
+export interface ShorthandIconCustomisations {
+	// Sets both hFlip and vFlip
+	flip?: string;
+}
+
+/**
+ * Apply "flip" string to icon customisations
+ */
+export function flipFromString(
+	custom: IconifyIconCustomisations,
+	flip: string
+): void {
+	flip.split(separator).forEach((str) => {
+		const value = str.trim();
+		switch (value) {
+			case 'horizontal':
+				custom.hFlip = true;
+				break;
+
+			case 'vertical':
+				custom.vFlip = true;
+				break;
+		}
+	});
+}

packages/utils/src/customisations/index.ts

@@ -1,9 +1,3 @@
-/**
- * Icon alignment
- */
-export type IconifyHorizontalIconAlignment = 'left' | 'center' | 'right';
-export type IconifyVerticalIconAlignment = 'top' | 'middle' | 'bottom';
-
 /**
  * Icon size
  */
@@ -20,11 +14,6 @@ export interface IconifyIconCustomisations {
 	width?: IconifyIconSize;
 	height?: IconifyIconSize;
 
-	// Alignment
-	hAlign?: IconifyHorizontalIconAlignment;
-	vAlign?: IconifyVerticalIconAlignment;
-	slice?: boolean;
-
 	// Transformations
 	hFlip?: boolean;
 	vFlip?: boolean;
@@ -44,11 +33,6 @@ export const defaults: FullIconCustomisations = Object.freeze({
 	width: null,
 	height: null,
 
-	// Alignment
-	hAlign: 'center',
-	vAlign: 'middle',
-	slice: false,
-
 	// Transformations
 	hFlip: false,
 	vFlip: false,
@@ -86,7 +70,6 @@ export function mergeCustomisations(
 		switch (attr) {
 			// Boolean attributes that override old value
 			case 'inline':
-			case 'slice':
 				if (typeof value === 'boolean') {
 					result[attr] = value;
 				}
@@ -100,14 +83,6 @@ export function mergeCustomisations(
 				}
 				break;
 
-			// Non-empty string
-			case 'hAlign':
-			case 'vAlign':
-				if (typeof value === 'string' && value !== '') {
-					(result as Record<string, unknown>)[attr] = value;
-				}
-				break;
-
 			// Non-empty string / non-zero number / null
 			case 'width':
 			case 'height':

packages/utils/src/customisations/shorthand.ts

@@ -1,68 +0,0 @@
-import type { IconifyIconCustomisations } from './index';
-
-const separator = /[\s,]+/;
-
-/**
- * Additional shorthand customisations
- */
-export interface ShorthandIconCustomisations {
-	// Sets both hFlip and vFlip
-	flip?: string;
-
-	// Sets hAlign, vAlign and slice
-	align?: string;
-}
-
-/**
- * Apply "flip" string to icon customisations
- */
-export function flipFromString(
-	custom: IconifyIconCustomisations,
-	flip: string
-): void {
-	flip.split(separator).forEach((str) => {
-		const value = str.trim();
-		switch (value) {
-			case 'horizontal':
-				custom.hFlip = true;
-				break;
-
-			case 'vertical':
-				custom.vFlip = true;
-				break;
-		}
-	});
-}
-
-/**
- * Apply "align" string to icon customisations
- */
-export function alignmentFromString(
-	custom: IconifyIconCustomisations,
-	align: string
-): void {
-	align.split(separator).forEach((str) => {
-		const value = str.trim();
-		switch (value) {
-			case 'left':
-			case 'center':
-			case 'right':
-				custom.hAlign = value;
-				break;
-
-			case 'top':
-			case 'middle':
-			case 'bottom':
-				custom.vAlign = value;
-				break;
-
-			case 'slice':
-			case 'crop':
-				custom.slice = true;
-				break;
-
-			case 'meet':
-				custom.slice = false;
-		}
-	});
-}

packages/utils/src/index.ts

@@ -7,10 +7,7 @@ export {
 
 // Customisations: converting attributes in components
 export { toBoolean } from './customisations/bool';
-export {
+export { flipFromString } from './customisations/flip';
-	flipFromString,
-	alignmentFromString,
-} from './customisations/shorthand';
 export { rotateFromString } from './customisations/rotate';
 
 // Icon names

packages/utils/src/svg/build.ts

@@ -2,39 +2,6 @@ import type { FullIconifyIcon } from '../icon';
 import type { FullIconCustomisations } from '../customisations';
 import { calculateSize } from './size';
 
-/**
- * Get preserveAspectRatio value
- */
-function preserveAspectRatio(props: FullIconCustomisations): string {
-	let result = '';
-	switch (props.hAlign) {
-		case 'left':
-			result += 'xMin';
-			break;
-
-		case 'right':
-			result += 'xMax';
-			break;
-
-		default:
-			result += 'xMid';
-	}
-	switch (props.vAlign) {
-		case 'top':
-			result += 'YMin';
-			break;
-
-		case 'bottom':
-			result += 'YMax';
-			break;
-
-		default:
-			result += 'YMid';
-	}
-	result += props.slice ? ' slice' : ' meet';
-	return result;
-}
-
 /**
  * Interface for getSVGData() result
  */
@@ -43,7 +10,6 @@ export interface IconifyIconBuildResult {
 		// Attributes for <svg>
 		width: string;
 		height: string;
-		preserveAspectRatio: string;
 		viewBox: string;
 	};
 	// Content
@@ -230,7 +196,6 @@ export function iconToSVG(
 		attributes: {
 			width,
 			height,
-			preserveAspectRatio: preserveAspectRatio(customisations),
 			viewBox:
 				box.left.toString() +
 				' ' +

packages/utils/tests/svg-build-test.ts

@@ -14,7 +14,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '1em',
 				height: '1em',
-				preserveAspectRatio: 'xMidYMid meet',
 				viewBox: '0 0 16 16',
 			},
 			body: '',
@@ -26,7 +25,7 @@ describe('Testing iconToSVG', () => {
 		// Test HTML
 		const html = iconToHTML(result.body, result.attributes);
 		expect(html).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"></svg>'
 		);
 	});
 
@@ -42,7 +41,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '16',
 				height: '16',
-				preserveAspectRatio: 'xMidYMid meet',
 				viewBox: '0 0 16 16',
 			},
 			body: '<path d="" />',
@@ -63,7 +61,7 @@ describe('Testing iconToSVG', () => {
 		}
 		const html = iconToHTML(result.body, htmlProps);
 		expect(html).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="vertical-align: -0.125em;"><path d="" /></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 16 16" style="vertical-align: -0.125em;"><path d="" /></svg>'
 		);
 	});
 
@@ -79,7 +77,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '16',
 				height: '16',
-				preserveAspectRatio: 'xMidYMid meet',
 				viewBox: '0 0 16 16',
 			},
 			body: '<path d="" />',
@@ -90,11 +87,9 @@ describe('Testing iconToSVG', () => {
 		expect(result).toEqual(expected);
 	});
 
-	test('Custom size, alignment', () => {
+	test('Custom size', () => {
 		const custom: FullIconCustomisations = mergeCustomisations(defaults, {
 			height: 'auto',
-			hAlign: 'left',
-			slice: true,
 		});
 		const icon: FullIconifyIcon = fullIcon({
 			width: 20,
@@ -105,7 +100,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '20',
 				height: '16',
-				preserveAspectRatio: 'xMinYMid slice',
 				viewBox: '0 0 20 16',
 			},
 			body: '<path d="..." />',
@@ -115,10 +109,9 @@ describe('Testing iconToSVG', () => {
 		expect(result).toEqual(expected);
 	});
 
-	test('Rotation, alignment', () => {
+	test('Rotation', () => {
 		const custom: FullIconCustomisations = mergeCustomisations(defaults, {
 			height: '40px',
-			vAlign: 'bottom',
 			rotate: 1,
 		});
 		const icon: FullIconifyIcon = fullIcon({
@@ -130,7 +123,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '32px',
 				height: '40px',
-				preserveAspectRatio: 'xMidYMax meet',
 				viewBox: '0 0 16 20',
 			},
 			body: '<g transform="rotate(90 8 8)"><path d="..." /></g>',
@@ -154,7 +146,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '32px',
 				height: '40px',
-				preserveAspectRatio: 'xMidYMid meet',
 				viewBox: '0 0 16 20',
 			},
 			body: '<g transform="rotate(-90 10 10)"><path d="..." /></g>',
@@ -164,11 +155,9 @@ describe('Testing iconToSVG', () => {
 		expect(result).toEqual(expected);
 	});
 
-	test('Flip, alignment', () => {
+	test('Flip', () => {
 		const custom: FullIconCustomisations = mergeCustomisations(defaults, {
 			height: '32',
-			vAlign: 'top',
-			hAlign: 'right',
 			hFlip: true,
 		});
 		const icon: FullIconifyIcon = fullIcon({
@@ -180,7 +169,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '40',
 				height: '32',
-				preserveAspectRatio: 'xMaxYMin meet',
 				viewBox: '0 0 20 16',
 			},
 			body: '<g transform="translate(20 0) scale(-1 1)"><path d="..." /></g>',
@@ -204,7 +192,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '0.8em',
 				height: '1em',
-				preserveAspectRatio: 'xMidYMid meet',
 				viewBox: '0 0 16 20',
 			},
 			body: '<g transform="rotate(90 8 8) translate(20 0) scale(-1 1)"><path d="..." /></g>',
@@ -231,7 +218,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '0.8em',
 				height: '1em',
-				preserveAspectRatio: 'xMidYMid meet',
 				viewBox: '0 0 16 20',
 			},
 			body: '<g transform="translate(16 0) scale(-1 1)"><g transform="rotate(90 8 8)"><path d="..." /></g></g>',
@@ -258,7 +244,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '1em',
 				height: '16',
-				preserveAspectRatio: 'xMidYMid meet',
 				viewBox: '0 0 20 16',
 			},
 			body: '<path d="..." />',
@@ -286,7 +271,6 @@ describe('Testing iconToSVG', () => {
 			attributes: {
 				width: '1em',
 				height: '1em',
-				preserveAspectRatio: 'xMidYMid meet',
 				viewBox: '0 0 128 128',
 			},
 			body:

packages/vue/src/iconify.ts

@@ -13,11 +13,7 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types';
 // Core
 import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
 import { stringToIcon } from '@iconify/utils/lib/icon/name';
-import type {
+import type { IconifyIconSize } from '@iconify/utils/lib/customisations';
-	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-} from '@iconify/utils/lib/customisations';
 import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
 import {
 	iconExists,
@@ -111,8 +107,6 @@ export { IconifyIcon, IconifyJSON, IconifyIconName };
 export {
 	IconifyIconCustomisations,
 	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
 	IconifyRenderMode,
 	IconifyIconProps,
 	IconProps,

packages/vue/src/offline.ts

@@ -9,11 +9,7 @@ import type {
 	ComponentCustomProps,
 } from 'vue';
 import type { IconifyIcon, IconifyJSON } from '@iconify/types';
-import type {
+import type { IconifyIconSize } from '@iconify/utils/lib/customisations';
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-	IconifyIconSize,
-} from '@iconify/utils/lib/customisations';
 import { fullIcon } from '@iconify/utils/lib/icon';
 import { parseIconSet } from '@iconify/utils/lib/icon-set/parse';
 import { quicklyValidateIconSet } from '@iconify/utils/lib/icon-set/validate-basic';
@@ -33,14 +29,7 @@ export { IconifyIconCustomisations, IconifyIconProps, IconProps };
 /**
  * Export types that could be used in component
  */
-export {
+export { IconifyIcon, IconifyJSON, IconifyIconSize, IconifyRenderMode };
-	IconifyIcon,
-	IconifyJSON,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-	IconifyIconSize,
-	IconifyRenderMode,
-};
 
 /**
  * Storage for icons referred by name

packages/vue/src/props.ts

@@ -39,9 +39,8 @@ export interface IconifyIconProps extends IconifyIconCustomisations {
 	// Style
 	color?: string;
 
-	// Shorthand properties
+	// Shorthand flip
 	flip?: string;
-	align?: string;
 }
 
 /**

packages/vue/src/render.ts

@@ -6,10 +6,7 @@ import {
 	defaults,
 	mergeCustomisations,
 } from '@iconify/utils/lib/customisations';
-import {
+import { flipFromString } from '@iconify/utils/lib/customisations/flip';
-	flipFromString,
-	alignmentFromString,
-} from '@iconify/utils/lib/customisations/shorthand';
 import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';
 import { iconToSVG } from '@iconify/utils/lib/svg/build';
 import { replaceIDs } from '@iconify/utils/lib/svg/id';
@@ -66,25 +63,18 @@ for (const prefix in propsToAddTo) {
 
 /**
  * Aliases for customisations.
- * In Vue 'v-' properties are reserved, so v-align and v-flip must be renamed
+ * In Vue 'v-' properties are reserved, so v-flip must be renamed
  */
-let customisationAliases = {};
+const customisationAliases: Record<string, string> = {};
 ['horizontal', 'vertical'].forEach((prefix) => {
-	['Align', 'Flip'].forEach((suffix) => {
+	const attr = prefix.slice(0, 1) + 'Flip';
-		const attr = prefix.slice(0, 1) + suffix;
-		const value = {
-			attr,
-			boolean: suffix === 'Flip',
-		};
 
-		// vertical-align
+	// vertical-flip
-		customisationAliases[prefix + '-' + suffix.toLowerCase()] = value;
+	customisationAliases[prefix + '-flip'] = attr;
-		// v-align
+	// v-flip
-		customisationAliases[prefix.slice(0, 1) + '-' + suffix.toLowerCase()] =
+	customisationAliases[prefix.slice(0, 1) + '-flip'] = attr;
-			value;
+	// verticalFlip
-		// verticalAlign
+	customisationAliases[prefix + 'Flip'] = attr;
-		customisationAliases[prefix + suffix] = value;
-	});
 });
 
 /**
@@ -150,13 +140,6 @@ export const render = (
 				}
 				break;
 
-			// Alignment as string
-			case 'align':
-				if (typeof value === 'string') {
-					alignmentFromString(customisations, value);
-				}
-				break;
-
 			// Color: override style
 			case 'color':
 				style.color = value;
@@ -180,27 +163,18 @@ export const render = (
 				}
 				break;
 
-			default:
+			default: {
-				if (customisationAliases[key] !== void 0) {
+				const alias = customisationAliases[key];
-					// Aliases for customisations
+				if (alias) {
-					if (
+					// Aliases for boolean customisations
-						customisationAliases[key].boolean &&
+					if (value === true || value === 'true' || value === 1) {
-						(value === true || value === 'true' || value === 1)
+						customisations[alias] = true;
-					) {
-						// Check for boolean
-						customisations[customisationAliases[key].attr] = true;
-					} else if (
-						!customisationAliases[key].boolean &&
-						typeof value === 'string' &&
-						value !== ''
-					) {
-						// String
-						customisations[customisationAliases[key].attr] = value;
 					}
 				} else if (defaults[key] === void 0) {
 					// Copy missing property if it does not exist in customisations
 					componentProps[key] = value;
 				}
+			}
 		}
 	}
 

packages/vue/tests/api/20-rendering-from-api-test.ts

@@ -70,7 +70,7 @@ describe('Rendering icon', () => {
 					expect(html).toEqual(
 						'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="test ' +
 							className +
-							'" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+							'" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 					);
 
 					// Make sure onLoad has been called
@@ -136,7 +136,7 @@ describe('Rendering icon', () => {
 							).toEqual(
 								'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="foo ' +
 									className +
-									'" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+									'" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 							);
 
 							done();

packages/vue/tests/api/30-changing-props-test.ts

@@ -39,7 +39,7 @@ describe('Rendering icon', () => {
 							expect(
 								wrapper.html().replace(/\s*\n\s*/g, '')
 							).toEqual(
-								'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+								'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 									className +
 									'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 							);
@@ -62,7 +62,7 @@ describe('Rendering icon', () => {
 							expect(
 								wrapper.html().replace(/\s*\n\s*/g, '')
 							).toEqual(
-								'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
+								'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" class="' +
 									className +
 									'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
 							);
@@ -168,7 +168,7 @@ describe('Rendering icon', () => {
 							expect(
 								wrapper.html().replace(/\s*\n\s*/g, '')
 							).toEqual(
-								'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
+								'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" class="' +
 									className +
 									'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
 							);
@@ -265,7 +265,7 @@ describe('Rendering icon', () => {
 					await nextTick();
 
 					expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
-						'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+						'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 							className +
 							'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 					);
@@ -284,7 +284,7 @@ describe('Rendering icon', () => {
 
 					// Test
 					expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
-						'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+						'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 							className +
 							'" style="color: red;"><g transform="translate(24 0) scale(-1 1)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
 					);

packages/vue/tests/empty.ts

@@ -1,6 +1,6 @@
 // Default data for empty icon
 export const defaultIconResult =
-	'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"></svg>';
+	'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16"></svg>';
 
 // Empty string: could be '<!---->' (jsdom) or '' (happy-dom), depending on testing envronment
 export const emptyString = '<!---->';

packages/vue/tests/iconify/10-basic-test.ts

@@ -24,7 +24,7 @@ describe('Creating component', () => {
 		await nextTick();
 
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 
@@ -41,7 +41,7 @@ describe('Creating component', () => {
 		await nextTick();
 
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 });

packages/vue/tests/iconify/20-attributes-test.ts

@@ -141,7 +141,7 @@ describe('Passing attributes', () => {
 	test('attributes that cannot change', async () => {
 		const Wrapper = {
 			components: { Icon },
-			template: `<Icon :icon="icon" viewBox="0 0 0 0" preserveAspectRatio="none" />`,
+			template: `<Icon :icon="icon" viewBox="0 0 0 0" />`,
 			data() {
 				return {
 					icon: iconData,
@@ -154,7 +154,6 @@ describe('Passing attributes', () => {
 
 		const html = wrapper.html();
 		expect(html).not.toContain('viewBox="0 0 0 0"');
-		expect(html).not.toContain('preserveAspectRatio="none"');
 	});
 
 	test('class', async () => {

packages/vue/tests/iconify/20-transformations-test.ts

@@ -24,7 +24,7 @@ describe('Rotation', () => {
 		await nextTick();
 
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
 		);
 	});
 
@@ -175,58 +175,3 @@ describe('Flip', () => {
 		expect(wrapper.html()).not.toContain('<g transform="');
 	});
 });
-
-describe('Alignment and slice', () => {
-	test('vAlign and slice', async () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" vAlign="top" :slice="true" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		await nextTick();
-
-		expect(wrapper.html()).toContain(
-			'preserveAspectRatio="xMidYMin slice"'
-		);
-	});
-
-	test('string', async () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" align="left bottom" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		await nextTick();
-
-		expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"');
-	});
-
-	test('aliases', async () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" h-align="left" vertical-align="bottom" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		await nextTick();
-
-		expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"');
-	});
-});

packages/vue/tests/offline/10-basic-test.ts

@@ -22,7 +22,7 @@ describe('Creating component', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 
@@ -34,7 +34,7 @@ describe('Creating component', () => {
 		});
 
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 });

packages/vue/tests/offline/20-attributes-test.ts

@@ -126,7 +126,7 @@ describe('Passing attributes', () => {
 	test('attributes that cannot change', () => {
 		const Wrapper = {
 			components: { Icon },
-			template: `<Icon :icon="icon" viewBox="0 0 0 0" preserveAspectRatio="none" />`,
+			template: `<Icon :icon="icon" viewBox="0 0 0 0" />`,
 			data() {
 				return {
 					icon: iconData,
@@ -137,7 +137,6 @@ describe('Passing attributes', () => {
 		const wrapper = mount(Wrapper, {});
 		const html = wrapper.html();
 		expect(html).not.toContain('viewBox="0 0 0 0"');
-		expect(html).not.toContain('preserveAspectRatio="none"');
 	});
 
 	test('class', () => {

packages/vue/tests/offline/20-storage-test.ts

@@ -19,7 +19,7 @@ describe('Using storage', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 
@@ -52,7 +52,7 @@ describe('Using storage', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
 		);
 	});
 
@@ -80,7 +80,7 @@ describe('Using storage', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
 		);
 	});
 

packages/vue/tests/offline/20-transformations-test.ts

@@ -21,7 +21,7 @@ describe('Rotation', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
 		);
 	});
 
@@ -156,52 +156,3 @@ describe('Flip', () => {
 		expect(wrapper.html()).not.toContain('<g transform="');
 	});
 });
-
-describe('Alignment and slice', () => {
-	test('vAlign and slice', () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" vAlign="top" :slice="true" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		expect(wrapper.html()).toContain(
-			'preserveAspectRatio="xMidYMin slice"'
-		);
-	});
-
-	test('string', () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" align="left bottom" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"');
-	});
-
-	test('aliases', () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" h-align="left" vertical-align="bottom" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"');
-	});
-});

packages/vue2/src/iconify.ts

@@ -6,11 +6,7 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types';
 // Core
 import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
 import { stringToIcon } from '@iconify/utils/lib/icon/name';
-import type {
+import type { IconifyIconSize } from '@iconify/utils/lib/customisations';
-	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-} from '@iconify/utils/lib/customisations';
 import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
 import {
 	iconExists,
@@ -99,8 +95,6 @@ export { IconifyIcon, IconifyJSON, IconifyIconName };
 export {
 	IconifyIconCustomisations,
 	IconifyIconSize,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
 	IconifyIconProps,
 	IconProps,
 	IconifyIconOnLoad,

packages/vue2/src/offline.ts

@@ -2,11 +2,7 @@ import Vue from 'vue';
 import type { CreateElement, VNode } from 'vue';
 import type { ExtendedVue } from 'vue/types/vue';
 import type { IconifyIcon, IconifyJSON } from '@iconify/types';
-import type {
+import type { IconifyIconSize } from '@iconify/utils/lib/customisations';
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
-	IconifyIconSize,
-} from '@iconify/utils/lib/customisations';
 import { fullIcon } from '@iconify/utils/lib/icon';
 import { parseIconSet } from '@iconify/utils/lib/icon-set/parse';
 import { quicklyValidateIconSet } from '@iconify/utils/lib/icon-set/validate-basic';
@@ -28,8 +24,6 @@ export { IconifyIconCustomisations, IconifyIconProps, IconProps };
 export {
 	IconifyIcon,
 	IconifyJSON,
-	IconifyHorizontalIconAlignment,
-	IconifyVerticalIconAlignment,
 	IconifyIconSize,
 };
 

packages/vue2/src/props.ts

@@ -26,9 +26,8 @@ export interface IconifyIconProps extends IconifyIconCustomisations {
 	// Style
 	color?: string;
 
-	// Shorthand properties
+	// Shorthand flip
 	flip?: string;
-	align?: string;
 }
 
 /**

packages/vue2/src/render.ts

@@ -6,10 +6,7 @@ import {
 	defaults,
 	mergeCustomisations,
 } from '@iconify/utils/lib/customisations';
-import {
+import { flipFromString } from '@iconify/utils/lib/customisations/flip';
-	flipFromString,
-	alignmentFromString,
-} from '@iconify/utils/lib/customisations/shorthand';
 import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';
 import { iconToSVG } from '@iconify/utils/lib/svg/build';
 import { replaceIDs } from '@iconify/utils/lib/svg/id';
@@ -27,26 +24,20 @@ const svgDefaults: Record<string, unknown> = {
 
 /**
  * Aliases for customisations.
- * In Vue 'v-' properties are reserved, so v-align and v-flip must be renamed
+ * In Vue 'v-' properties are reserved, so v-flip must be renamed
  */
-let customisationAliases = {};
+ const customisationAliases: Record<string, string> = {};
-['horizontal', 'vertical'].forEach((prefix) => {
+ ['horizontal', 'vertical'].forEach((prefix) => {
-	['Align', 'Flip'].forEach((suffix) => {
+	 const attr = prefix.slice(0, 1) + 'Flip';
-		const attr = prefix.slice(0, 1) + suffix;
+ 
-		const value = {
+	 // vertical-flip
-			attr,
+	 customisationAliases[prefix + '-flip'] = attr;
-			boolean: suffix === 'Flip',
+	 // v-flip
-		};
+	 customisationAliases[prefix.slice(0, 1) + '-flip'] = attr;
-
+	 // verticalFlip
-		// vertical-align
+	 customisationAliases[prefix + 'Flip'] = attr;
-		customisationAliases[prefix + '-' + suffix.toLowerCase()] = value;
+ });
-		// v-align
+ 
-		customisationAliases[prefix.slice(0, 1) + '-' + suffix.toLowerCase()] =
-			value;
-		// verticalAlign
-		customisationAliases[prefix + suffix] = value;
-	});
-});
 
 /**
  * Render icon
@@ -101,13 +92,6 @@ export const render = (
 				}
 				break;
 
-			// Alignment as string
-			case 'align':
-				if (typeof value === 'string') {
-					alignmentFromString(customisations, value);
-				}
-				break;
-
 			// Color: override style
 			case 'color':
 				style.color = value;
@@ -132,21 +116,11 @@ export const render = (
 				break;
 
 			default:
-				if (customisationAliases[key] !== void 0) {
+				const alias = customisationAliases[key];
-					// Aliases for customisations
+				if (alias) {
-					if (
+					// Aliases for boolean customisations
-						customisationAliases[key].boolean &&
+					if (value === true || value === 'true' || value === 1) {
-						(value === true || value === 'true' || value === 1)
+						customisations[alias] = true;
-					) {
-						// Check for boolean
-						customisations[customisationAliases[key].attr] = true;
-					} else if (
-						!customisationAliases[key].boolean &&
-						typeof value === 'string' &&
-						value !== ''
-					) {
-						// String
-						customisations[customisationAliases[key].attr] = value;
 					}
 				} else if (defaults[key] === void 0) {
 					// Copy missing property if it does not exist in customisations

packages/vue2/tests/api/20-rendering-from-api.test.js

@@ -71,7 +71,7 @@ describe('Rendering icon', () => {
 			// Check HTML on next tick
 			Vue.nextTick(() => {
 				expect(html).toBe(
-					'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="test ' +
+					'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="test ' +
 						className +
 						'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 				);
@@ -133,7 +133,7 @@ describe('Rendering icon', () => {
 					Vue.nextTick(() => {
 						// Check HTML
 						expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 								className +
 								// 'foo' is appended because of weird Vue 2 behavior. Fixed in Vue 3
 								' foo"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'

packages/vue2/tests/api/30-changing-props.test.js

@@ -42,7 +42,7 @@ describe('Rendering icon', () => {
 					// Wait 1 tick, then test rendered icon
 					Vue.nextTick(() => {
 						expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 								className +
 								'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 						);
@@ -63,7 +63,7 @@ describe('Rendering icon', () => {
 					// Wait 1 tick, then test rendered icon
 					Vue.nextTick(() => {
 						expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
+							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" class="' +
 								className +
 								'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
 						);
@@ -168,7 +168,7 @@ describe('Rendering icon', () => {
 					// Wait 1 tick, then test rendered icon
 					Vue.nextTick(() => {
 						expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
+							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" class="' +
 								className +
 								'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
 						);
@@ -262,7 +262,7 @@ describe('Rendering icon', () => {
 			// Wait 1 tick, test rendered icon
 			Vue.nextTick(() => {
 				expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-					'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+					'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 						className +
 						'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 				);
@@ -279,7 +279,7 @@ describe('Rendering icon', () => {
 				// Wait for 1 tick and test again
 				Vue.nextTick(() => {
 					expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-						'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
+						'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
 							className +
 							'" style="color: red;"><g transform="translate(24 0) scale(-1 1)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
 					);

packages/vue2/tests/empty.js

@@ -1,3 +1,3 @@
 // Default data for empty icon
 export const defaultIconResult =
-	'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"></svg>';
+	'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16"></svg>';

packages/vue2/tests/iconify/10-basic.test.js

@@ -25,7 +25,7 @@ describe('Creating component', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 
@@ -41,7 +41,7 @@ describe('Creating component', () => {
 		});
 
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 });

packages/vue2/tests/iconify/20-attributes.test.js

@@ -131,7 +131,7 @@ describe('Passing attributes', () => {
 	test('attributes that cannot change', () => {
 		const Wrapper = {
 			components: { Icon },
-			template: `<Icon :icon="icon" viewBox="0 0 0 0" preserveAspectRatio="none" />`,
+			template: `<Icon :icon="icon" viewBox="0 0 0 0" />`,
 			data() {
 				return {
 					icon: iconData,
@@ -142,7 +142,6 @@ describe('Passing attributes', () => {
 		const wrapper = mount(Wrapper, {});
 		const html = wrapper.html();
 		expect(html).not.toContain('viewBox="0 0 0 0"');
-		expect(html).not.toContain('preserveAspectRatio="none"');
 	});
 
 	test('class', () => {

packages/vue2/tests/iconify/20-transformations.test.js

@@ -25,7 +25,7 @@ describe('Rotation', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
 		);
 	});
 
@@ -160,52 +160,3 @@ describe('Flip', () => {
 		expect(wrapper.html()).not.toContain('<g transform="');
 	});
 });
-
-describe('Alignment and slice', () => {
-	test('vAlign and slice', () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" vAlign="top" :slice="true" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		expect(wrapper.html()).toContain(
-			'preserveAspectRatio="xMidYMin slice"'
-		);
-	});
-
-	test('string', () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" align="left bottom" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"');
-	});
-
-	test('aliases', () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" h-align="left" vertical-align="bottom" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"');
-	});
-});

packages/vue2/tests/offline/10-basic.test.js

@@ -26,7 +26,7 @@ describe('Creating component', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 
@@ -38,7 +38,7 @@ describe('Creating component', () => {
 		});
 
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 });

packages/vue2/tests/offline/20-attributes.test.js

@@ -132,7 +132,7 @@ describe('Passing attributes', () => {
 	test('attributes that cannot change', () => {
 		const Wrapper = {
 			components: { Icon },
-			template: `<Icon :icon="icon" viewBox="0 0 0 0" preserveAspectRatio="none" />`,
+			template: `<Icon :icon="icon" viewBox="0 0 0 0" />`,
 			data() {
 				return {
 					icon: iconData,
@@ -143,7 +143,6 @@ describe('Passing attributes', () => {
 		const wrapper = mount(Wrapper, {});
 		const html = wrapper.html();
 		expect(html).not.toContain('viewBox="0 0 0 0"');
-		expect(html).not.toContain('preserveAspectRatio="none"');
 	});
 
 	test('class', () => {

packages/vue2/tests/offline/20-storage.test.js

@@ -22,7 +22,7 @@ describe('Using storage', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
 
@@ -57,7 +57,7 @@ describe('Using storage', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
 		);
 	});
 
@@ -87,7 +87,7 @@ describe('Using storage', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
 		);
 	});
 

packages/vue2/tests/offline/20-transformations.test.js

@@ -25,7 +25,7 @@ describe('Rotation', () => {
 
 		const wrapper = mount(Wrapper, {});
 		expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
-			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
 		);
 	});
 
@@ -160,52 +160,3 @@ describe('Flip', () => {
 		expect(wrapper.html()).not.toContain('<g transform="');
 	});
 });
-
-describe('Alignment and slice', () => {
-	test('vAlign and slice', () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" vAlign="top" :slice="true" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		expect(wrapper.html()).toContain(
-			'preserveAspectRatio="xMidYMin slice"'
-		);
-	});
-
-	test('string', () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" align="left bottom" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"');
-	});
-
-	test('aliases', () => {
-		const Wrapper = {
-			components: { Icon },
-			template: `<Icon :icon="icon" h-align="left" vertical-align="bottom" />`,
-			data() {
-				return {
-					icon: iconData,
-				};
-			},
-		};
-
-		const wrapper = mount(Wrapper, {});
-		expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"');
-	});
-});