Fix rendering icons that have customisations

packages/core/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/core",
 	"description": "Reusable files used by multiple Iconify packages",
 	"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
-	"version": "1.0.0-beta.0",
+	"version": "1.0.0-beta.1",
 	"license": "(Apache-2.0 OR GPL-2.0)",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",

packages/core/src/builder/index.ts

@@ -86,10 +86,12 @@ export function iconToSVG(
 
 	// Apply transformations
 	const transformations: string[] = [];
-	let rotation = customisations.rotate;
+	const hFlip = customisations.hFlip !== icon.hFlip;
+	const vFlip = customisations.vFlip !== icon.vFlip;
+	let rotation = customisations.rotate + icon.rotate;
 
-	if (customisations.hFlip) {
+	if (hFlip) {
-		if (customisations.vFlip) {
+		if (vFlip) {
 			rotation += 2;
 		} else {
 			// Horizontal flip
@@ -103,7 +105,7 @@ export function iconToSVG(
 			transformations.push('scale(-1 1)');
 			box.top = box.left = 0;
 		}
-	} else if (customisations.vFlip) {
+	} else if (vFlip) {
 		// Vertical flip
 		transformations.push(
 			'translate(' + (0 - box.left) + ' ' + (box.height + box.top) + ')'

packages/core/tests/10-basic/storage-test.ts

@@ -400,4 +400,60 @@ describe('Testing storage', () => {
 		};
 		expect(getIcon(storage, 'alias2z3')).to.be.eql(expected);
 	});
+
+	it('Icon set with aliases that use transformations', () => {
+		const storage = newStorage('arty-animated');
+		const iconBody =
+			'<g stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd"><path d="M40 64l48-48" class="animation-delay-0 animation-duration-10 animate-stroke stroke-length-102"/><path d="M40 64l48 48" class="animation-delay-0 animation-duration-10 animate-stroke stroke-length-102"/></g>';
+
+		expect(
+			addIconSet(storage, {
+				prefix: 'arty-animated',
+				icons: {
+					'16-chevron-left': {
+						body: iconBody,
+					},
+				},
+				aliases: {
+					'16-chevron-right': {
+						parent: '16-chevron-left',
+						hFlip: true,
+					},
+				},
+				width: 128,
+				height: 128,
+			})
+		).to.be.equal(true);
+
+		expect(Object.keys(storage.icons)).to.be.eql([
+			'16-chevron-left',
+			'16-chevron-right',
+		]);
+
+		// Test icon
+		let expected: FullIconifyIcon = {
+			body: iconBody,
+			width: 128,
+			height: 128,
+			top: 0,
+			left: 0,
+			hFlip: false,
+			vFlip: false,
+			rotate: 0,
+		};
+		expect(getIcon(storage, '16-chevron-left')).to.be.eql(expected);
+
+		// Test alias
+		expected = {
+			body: iconBody,
+			width: 128,
+			height: 128,
+			top: 0,
+			left: 0,
+			hFlip: true,
+			vFlip: false,
+			rotate: 0,
+		};
+		expect(getIcon(storage, '16-chevron-right')).to.be.eql(expected);
+	});
 });

packages/core/tests/20-builder/icon-to-svg-test.ts

@@ -200,4 +200,32 @@ describe('Testing iconToSVG', () => {
 		const result = iconToSVG(icon, custom);
 		expect(result).to.be.eql(expected);
 	});
+
+	it('Flip with real icon', () => {
+		const iconBody =
+			'<g stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd"><path d="M40 64l48-48" class="animation-delay-0 animation-duration-10 animate-stroke stroke-length-102"/><path d="M40 64l48 48" class="animation-delay-0 animation-duration-10 animate-stroke stroke-length-102"/></g>';
+
+		const custom: FullIconCustomisations = fullCustomisations({});
+		const icon: FullIconifyIcon = fullIcon({
+			body: iconBody,
+			width: 128,
+			height: 128,
+			hFlip: true,
+		});
+		const expected: IconifyIconBuildResult = {
+			attributes: {
+				width: '1em',
+				height: '1em',
+				preserveAspectRatio: 'xMidYMid meet',
+				viewBox: '0 0 128 128',
+			},
+			body:
+				'<g transform="translate(128 0) scale(-1 1)">' +
+				iconBody +
+				'</g>',
+		};
+
+		const result = iconToSVG(icon, custom);
+		expect(result).to.be.eql(expected);
+	});
 });

packages/iconify/README.md

@@ -21,7 +21,13 @@ Iconify SVG framework is designed to be as easy to use as possible.
 Add this line to your page to load Iconify SVG framework (you can add it to `<head>` section of page or before `</body>`):
 
 ```html
-<script src="https://code.iconify.design/2/2.0.0-beta1/iconify.min.js"></script>
+<script src="https://code.iconify.design/2/2.0.0-beta.2/iconify.min.js"></script>
+```
+
+or
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@iconify/iconify@2.0.0-beta.2/dist/iconify.min.js"></script>
 ```
 
 or, if you are building a project with something like WebPack or Rollup, you can include the script by installing `@iconify/iconify` as a dependency and importing it in your project:

packages/iconify/package.json

@@ -1,8 +1,8 @@
 {
 	"name": "@iconify/iconify",
-	"description": "Iconify common modules, used in multiple packages",
+	"description": "Unified SVG framework with over 50,000 icons to choose from",
 	"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
-	"version": "2.0.0-beta.1",
+	"version": "2.0.0-beta.2",
 	"license": "(Apache-2.0 OR GPL-2.0)",
 	"main": "./dist/iconify.min.js",
 	"types": "./dist/iconify.d.ts",

packages/react/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/react",
 	"description": "Iconify icon component for React.",
 	"author": "Vjacheslav Trushkin",
-	"version": "2.0.0-beta.0",
+	"version": "2.0.0-beta.1",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",

packages/svelte/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/svelte",
 	"description": "Iconify icon component for Svelte.",
 	"author": "Vjacheslav Trushkin",
-	"version": "1.0.0-beta.0",
+	"version": "1.0.0-beta.1",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://github.com/iconify/iconify",

packages/vue/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/vue",
 	"description": "Iconify icon component for Vue.",
 	"author": "Vjacheslav Trushkin",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",