From 8e12f8614c0649deab8f7403237f79cd8d5043cc Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Sat, 30 Apr 2022 23:12:34 +0300 Subject: [PATCH] Remove alignment from customisations --- packages/ember/src/component.ts | 1 - packages/ember/src/iconify-icon.hbs | 1 - packages/ember/src/iconify-icon.ts | 8 +- packages/ember/src/props.ts | 3 +- packages/ember/src/render.ts | 13 +--- .../icon/src/attributes/customisations.ts | 8 +- packages/icon/src/attributes/types.ts | 3 - packages/icon/src/component.ts | 1 - packages/icon/src/index.ts | 9 +-- packages/icon/tests/component-test.ts | 6 +- packages/icon/tests/customisations-test.ts | 7 +- packages/icon/tests/render-icon-test.ts | 8 +- packages/iconify/src/iconify.ts | 10 +-- packages/iconify/src/iconify.without-api.ts | 10 +-- packages/iconify/src/scanner/get-props.ts | 27 ++----- packages/iconify/tests/changing-modes-test.ts | 10 +-- packages/iconify/tests/element-props-test.ts | 78 ------------------- .../iconify/tests/observing-changes-test.ts | 12 +-- packages/iconify/tests/re-render-node-test.ts | 22 +++--- packages/iconify/tests/render-bg-test.ts | 12 +-- packages/iconify/tests/render-node-test.ts | 12 +-- packages/iconify/tests/scan-dom-test.ts | 4 +- packages/react/src/iconify.ts | 8 +- packages/react/src/offline.ts | 15 +--- packages/react/src/props.ts | 3 +- packages/react/src/render.ts | 12 +-- .../tests/api/20-rendering-from-api.test.js | 2 - .../react/tests/api/30-changing-props.test.js | 5 -- packages/react/tests/iconify/10-basic.test.js | 2 - .../react/tests/iconify/10-style-mode.test.js | 2 +- .../react/tests/iconify/20-attributes.test.js | 7 +- .../tests/iconify/20-transformations.test.js | 20 ----- packages/react/tests/offline/10-basic.test.js | 5 +- .../react/tests/offline/20-attributes.test.js | 7 +- .../react/tests/offline/20-storage.test.js | 18 ++--- .../tests/offline/20-transformations.test.js | 20 ----- packages/svelte/src/functions.ts | 8 +- packages/svelte/src/iconify.ts | 2 - packages/svelte/src/offline-iconify.ts | 6 +- packages/svelte/src/props.ts | 3 +- packages/svelte/src/render.ts | 12 +-- .../tests/api/20-rendering-from-api.test.ts | 4 +- .../tests/api/30-changing-props.test.ts | 10 +-- .../svelte/tests/iconify/10-basic.test.ts | 2 +- .../tests/iconify/10-style-mode.test.ts | 2 +- .../tests/iconify/20-attributes.test.ts | 2 - .../tests/iconify/20-transformations.test.ts | 23 ------ .../svelte/tests/offline/10-basic.test.ts | 2 +- .../tests/offline/20-attributes.test.ts | 2 - .../svelte/tests/offline/20-storage.test.ts | 6 +- .../tests/offline/20-transformations.test.ts | 23 ------ packages/utils/package.json | 8 +- packages/utils/src/customisations/flip.ts | 32 ++++++++ packages/utils/src/customisations/index.ts | 25 ------ .../utils/src/customisations/shorthand.ts | 68 ---------------- packages/utils/src/index.ts | 5 +- packages/utils/src/svg/build.ts | 35 --------- packages/utils/tests/svg-build-test.ts | 26 ++----- packages/vue/src/iconify.ts | 8 +- packages/vue/src/offline.ts | 15 +--- packages/vue/src/props.ts | 3 +- packages/vue/src/render.ts | 60 ++++---------- .../tests/api/20-rendering-from-api-test.ts | 4 +- .../vue/tests/api/30-changing-props-test.ts | 10 +-- packages/vue/tests/empty.ts | 2 +- packages/vue/tests/iconify/10-basic-test.ts | 4 +- .../vue/tests/iconify/20-attributes-test.ts | 3 +- .../tests/iconify/20-transformations-test.ts | 57 +------------- packages/vue/tests/offline/10-basic-test.ts | 4 +- .../vue/tests/offline/20-attributes-test.ts | 3 +- packages/vue/tests/offline/20-storage-test.ts | 6 +- .../tests/offline/20-transformations-test.ts | 51 +----------- packages/vue2/src/iconify.ts | 8 +- packages/vue2/src/offline.ts | 8 +- packages/vue2/src/props.ts | 3 +- packages/vue2/src/render.ts | 64 +++++---------- .../tests/api/20-rendering-from-api.test.js | 4 +- .../vue2/tests/api/30-changing-props.test.js | 10 +-- packages/vue2/tests/empty.js | 2 +- packages/vue2/tests/iconify/10-basic.test.js | 4 +- .../vue2/tests/iconify/20-attributes.test.js | 3 +- .../tests/iconify/20-transformations.test.js | 51 +----------- packages/vue2/tests/offline/10-basic.test.js | 4 +- .../vue2/tests/offline/20-attributes.test.js | 3 +- .../vue2/tests/offline/20-storage.test.js | 6 +- .../tests/offline/20-transformations.test.js | 51 +----------- 86 files changed, 211 insertions(+), 937 deletions(-) create mode 100644 packages/utils/src/customisations/flip.ts delete mode 100644 packages/utils/src/customisations/shorthand.ts diff --git a/packages/ember/src/component.ts b/packages/ember/src/component.ts index c2285bd..b4e82b5 100644 --- a/packages/ember/src/component.ts +++ b/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: '', diff --git a/packages/ember/src/iconify-icon.hbs b/packages/ember/src/iconify-icon.hbs index 634de8c..971778a 100644 --- a/packages/ember/src/iconify-icon.hbs +++ b/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}} diff --git a/packages/ember/src/iconify-icon.ts b/packages/ember/src/iconify-icon.ts index bf0576e..490a565 100644 --- a/packages/ember/src/iconify-icon.ts +++ b/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 { - IconifyIconSize, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, -} from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } 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, }; diff --git a/packages/ember/src/props.ts b/packages/ember/src/props.ts index fcd6fad..a205111 100644 --- a/packages/ember/src/props.ts +++ b/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; diff --git a/packages/ember/src/render.ts b/packages/ember/src/render.ts index 2d589a2..30746bd 100644 --- a/packages/ember/src/render.ts +++ b/packages/ember/src/render.ts @@ -6,10 +6,7 @@ import { defaults, mergeCustomisations, } from '@iconify/utils/lib/customisations'; -import { - flipFromString, - alignmentFromString, -} from '@iconify/utils/lib/customisations/shorthand'; +import { flipFromString } from '@iconify/utils/lib/customisations/flip'; 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 + ';'; diff --git a/packages/icon/src/attributes/customisations.ts b/packages/icon/src/attributes/customisations.ts index f4a3a0d..710e11a 100644 --- a/packages/icon/src/attributes/customisations.ts +++ b/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 { - flipFromString, - alignmentFromString, -} from '@iconify/utils/lib/customisations/shorthand'; +import { flipFromString } from '@iconify/utils/lib/customisations/flip'; // 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; } diff --git a/packages/icon/src/attributes/types.ts b/packages/icon/src/attributes/types.ts index 2721635..26e6157 100644 --- a/packages/icon/src/attributes/types.ts +++ b/packages/icon/src/attributes/types.ts @@ -27,9 +27,6 @@ export type IconifyIconCustomisationAttributes = { // Transformations rotate?: string | number; flip?: string; - - // Alignment - align?: string; }; /** diff --git a/packages/icon/src/component.ts b/packages/icon/src/component.ts index 91dec51..be1a8f1 100644 --- a/packages/icon/src/component.ts +++ b/packages/icon/src/component.ts @@ -85,7 +85,6 @@ export function defineIconifyIcon( 'height', 'rotate', 'flip', - 'align', ]; /** diff --git a/packages/icon/src/index.ts b/packages/icon/src/index.ts index b460afd..bd91b88 100644 --- a/packages/icon/src/index.ts +++ b/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 { - IconifyIconCustomisations, - IconifyIconSize, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, -}; +export { IconifyIconCustomisations, IconifyIconSize }; // API export { diff --git a/packages/icon/tests/component-test.ts b/packages/icon/tests/component-test.ts index e3f073b..dab5e1b 100644 --- a/packages/icon/tests/component-test.ts +++ b/packages/icon/tests/component-test.ts @@ -59,7 +59,7 @@ describe('Testing icon component', () => { // Should render SVG const blankSVG = - ''; + ''; expect(node._shadowRoot.innerHTML).toBe( `${blankSVG}` ); @@ -112,7 +112,7 @@ describe('Testing icon component', () => { // Should render SPAN, with comment const renderedIconWithComment = - ""; + ""; const html1 = node._shadowRoot.innerHTML; expect(html1.replace(/-- [0-9]+ --/, '-- --')).toBe( `${renderedIconWithComment}` @@ -178,7 +178,7 @@ describe('Testing icon component', () => { // Should render SVG const renderedIcon = - ''; + ''; const html1 = node._shadowRoot.innerHTML; const svg1 = node._shadowRoot.lastChild as SVGSVGElement; const setCurrentTimeSupported = !!svg1.setCurrentTime; diff --git a/packages/icon/tests/customisations-test.ts b/packages/icon/tests/customisations-test.ts index 0e74740..6462e95 100644 --- a/packages/icon/tests/customisations-test.ts +++ b/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 - node.innerHTML = - ''; + // Dimensions, empty value + node.innerHTML = ''; 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); diff --git a/packages/icon/tests/render-icon-test.ts b/packages/icon/tests/render-icon-test.ts index 20fd395..d5c8fe6 100644 --- a/packages/icon/tests/render-icon-test.ts +++ b/packages/icon/tests/render-icon-test.ts @@ -39,7 +39,7 @@ describe('Testing rendering loaded icon', () => { // Test HTML expect(node.innerHTML).toBe( - `` + `` ); // Replace icon content @@ -65,7 +65,7 @@ describe('Testing rendering loaded icon', () => { // Test HTML expect(node.innerHTML).toBe( - `` + `` ); }); @@ -96,7 +96,7 @@ describe('Testing rendering loaded icon', () => { // Test HTML expect(node.innerHTML).toBe( - `` + `` ); // Change mode to background, add some customisations @@ -119,7 +119,7 @@ describe('Testing rendering loaded icon', () => { // Test HTML expect(node.innerHTML).toBe( - `` + `` ); }); }); diff --git a/packages/iconify/src/iconify.ts b/packages/iconify/src/iconify.ts index 99c961a..28d91ce 100644 --- a/packages/iconify/src/iconify.ts +++ b/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 { - IconifyIconCustomisations, - IconifyIconSize, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, - IconifyRenderMode, -}; +export { IconifyIconCustomisations, IconifyIconSize, IconifyRenderMode }; // Build export { IconifyIconBuildResult }; diff --git a/packages/iconify/src/iconify.without-api.ts b/packages/iconify/src/iconify.without-api.ts index 4539f82..93aa4e6 100644 --- a/packages/iconify/src/iconify.without-api.ts +++ b/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 { - IconifyIconCustomisations, - IconifyIconSize, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, - IconifyRenderMode, -}; +export { IconifyIconCustomisations, IconifyIconSize, IconifyRenderMode }; // Build export { IconifyIconBuildResult }; diff --git a/packages/iconify/src/scanner/get-props.ts b/packages/iconify/src/scanner/get-props.ts index 5b09b9e..a091d2e 100644 --- a/packages/iconify/src/scanner/get-props.ts +++ b/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 { - alignmentFromString, - flipFromString, -} from '@iconify/utils/lib/customisations/shorthand'; +import { flipFromString } from '@iconify/utils/lib/customisations/flip'; 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 = { - 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 - for (const attr in combinedAttributes) { - const value = element.getAttribute('data-' + attr); - if (typeof value === 'string') { - combinedAttributes[attr](customisations, value); - } + // Get flip shorthand + const flip = element.getAttribute('data-flip'); + if (typeof flip === 'string') { + flipFromString(customisations, flip); } // Boolean attributes diff --git a/packages/iconify/tests/changing-modes-test.ts b/packages/iconify/tests/changing-modes-test.ts index 5b08444..58c24a8 100644 --- a/packages/iconify/tests/changing-modes-test.ts +++ b/packages/iconify/tests/changing-modes-test.ts @@ -66,7 +66,7 @@ describe('Changing render modes', () => { // Check HTML expect(document.body.innerHTML).toBe( - `` + `` ); 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( - `` + `` ); 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( - `` + `` ); 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( - `` + `` ); 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( - `` + `` ); }); }); diff --git a/packages/iconify/tests/element-props-test.ts b/packages/iconify/tests/element-props-test.ts index 986dd11..e800dd2 100644 --- a/packages/iconify/tests/element-props-test.ts +++ b/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, - }); - }); }); diff --git a/packages/iconify/tests/observing-changes-test.ts b/packages/iconify/tests/observing-changes-test.ts index 3d3907c..d32147b 100644 --- a/packages/iconify/tests/observing-changes-test.ts +++ b/packages/iconify/tests/observing-changes-test.ts @@ -62,7 +62,7 @@ describe('Observing DOM changes', () => { // Check HTML expect(document.body.innerHTML).toBe( - `` + `` ); 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( - `` + `` ); }); @@ -142,7 +142,7 @@ describe('Observing DOM changes', () => { // Check HTML expect(document.body.innerHTML).toBe( - `` + `` ); 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( - `` + `` ); 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( - `` + `` ); }); @@ -285,7 +285,7 @@ describe('Observing DOM changes', () => { ); expect(document.body.innerHTML).toBe( - `` + `` ); }); }); diff --git a/packages/iconify/tests/re-render-node-test.ts b/packages/iconify/tests/re-render-node-test.ts index 09dbf31..9da5271 100644 --- a/packages/iconify/tests/re-render-node-test.ts +++ b/packages/iconify/tests/re-render-node-test.ts @@ -77,7 +77,7 @@ describe('Testing re-rendering nodes', () => { width: 24, height: 24, }, - '', + '', (svg) => { const data = svg[elementDataProperty]; expect(data.status).toBe('loaded'); @@ -94,7 +94,7 @@ describe('Testing re-rendering nodes', () => { height: 32, }; }, - '' + '' ); const data = svg[elementDataProperty]; @@ -113,7 +113,7 @@ describe('Testing re-rendering nodes', () => { const svg = await testIcon( '', iconData, - '', + '', (svg) => { const data = svg[elementDataProperty]; expect(data.status).toBe('loaded'); @@ -125,7 +125,7 @@ describe('Testing re-rendering nodes', () => { return iconData; }, - '', + '', (svg) => { const data = svg[elementDataProperty]; expect(data.status).toBe('loaded'); @@ -137,7 +137,7 @@ describe('Testing re-rendering nodes', () => { return iconData; }, - '' + '' ); const data = svg[elementDataProperty]; @@ -156,7 +156,7 @@ describe('Testing re-rendering nodes', () => { const svg = await testIcon( '', iconData, - '', + '', (svg) => { const data = svg[elementDataProperty]; expect(data.status).toBe('loaded'); @@ -168,7 +168,7 @@ describe('Testing re-rendering nodes', () => { return iconData; }, - '', + '', (svg) => { const data = svg[elementDataProperty]; expect(data.status).toBe('loaded'); @@ -180,7 +180,7 @@ describe('Testing re-rendering nodes', () => { return iconData; }, - '' + '' ); const data = svg[elementDataProperty]; @@ -197,7 +197,7 @@ describe('Testing re-rendering nodes', () => { width: 24, height: 24, }, - '', + '', (svg) => { const data = svg[elementDataProperty]; expect(data.status).toBe('loaded'); @@ -214,7 +214,7 @@ describe('Testing re-rendering nodes', () => { height: 32, }; }, - '', + '', (svg) => { const data = svg[elementDataProperty]; expect(data.status).toBe('loaded'); @@ -229,7 +229,7 @@ describe('Testing re-rendering nodes', () => { body: '', }; }, - '' + '' ); const data = svg[elementDataProperty]; diff --git a/packages/iconify/tests/render-bg-test.ts b/packages/iconify/tests/render-bg-test.ts index 334e1f6..d72fcea 100644 --- a/packages/iconify/tests/render-bg-test.ts +++ b/packages/iconify/tests/render-bg-test.ts @@ -64,7 +64,7 @@ describe('Testing rendering nodes as background', () => { width: 24, height: 24, }, - `` + `` ); const data = svg[elementDataProperty]; @@ -81,7 +81,7 @@ describe('Testing rendering nodes as background', () => { width: 24, height: 24, }, - `` + `` ); const data = svg[elementDataProperty]; @@ -101,7 +101,7 @@ describe('Testing rendering nodes as background', () => { width: 24, height: 24, }, - `` + `` ); const data = svg[elementDataProperty]; @@ -118,7 +118,7 @@ describe('Testing rendering nodes as background', () => { width: 24, height: 24, }, - `` + `` ); const data = svg[elementDataProperty]; @@ -135,7 +135,7 @@ describe('Testing rendering nodes as background', () => { width: 24, height: 24, }, - `` + `` ); const data = svg[elementDataProperty]; @@ -159,7 +159,7 @@ describe('Testing rendering nodes as background', () => { width: 24, height: 24, }, - `` + `` ); const data = svg[elementDataProperty]; diff --git a/packages/iconify/tests/render-node-test.ts b/packages/iconify/tests/render-node-test.ts index e708790..da7d9b7 100644 --- a/packages/iconify/tests/render-node-test.ts +++ b/packages/iconify/tests/render-node-test.ts @@ -47,7 +47,7 @@ describe('Testing rendering nodes', () => { width: 24, height: 24, }, - '' + '' ); const data = svg[elementDataProperty]; @@ -64,7 +64,7 @@ describe('Testing rendering nodes', () => { width: 24, height: 24, }, - '' + '' ); const data = svg[elementDataProperty]; @@ -81,7 +81,7 @@ describe('Testing rendering nodes', () => { width: 24, height: 24, }, - '' + '' ); const data = svg[elementDataProperty]; @@ -98,7 +98,7 @@ describe('Testing rendering nodes', () => { width: 24, height: 24, }, - '' + '' ); const data = svg[elementDataProperty]; @@ -115,7 +115,7 @@ describe('Testing rendering nodes', () => { width: 24, height: 24, }, - '' + '' ); const data = svg[elementDataProperty]; @@ -136,7 +136,7 @@ describe('Testing rendering nodes', () => { width: 24, height: 24, }, - '' + '' ); const data = svg[elementDataProperty]; diff --git a/packages/iconify/tests/scan-dom-test.ts b/packages/iconify/tests/scan-dom-test.ts index 3f54967..d7d95fa 100644 --- a/packages/iconify/tests/scan-dom-test.ts +++ b/packages/iconify/tests/scan-dom-test.ts @@ -51,7 +51,7 @@ describe('Scanning DOM', () => { // Check HTML expect(document.body.innerHTML).toBe( - `` + `` ); const svg = document.body.childNodes[0]; const svgData = svg[elementDataProperty]; @@ -110,7 +110,7 @@ describe('Scanning DOM', () => { // Check HTML expect(document.body.innerHTML).toBe( - `` + `` ); const svg = document.body.childNodes[0]; const svgData = svg[elementDataProperty]; diff --git a/packages/react/src/iconify.ts b/packages/react/src/iconify.ts index fcbc915..f6f2d9d 100644 --- a/packages/react/src/iconify.ts +++ b/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 { - IconifyIconSize, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, -} from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } 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, diff --git a/packages/react/src/offline.ts b/packages/react/src/offline.ts index 9423b6e..fe34fc8 100644 --- a/packages/react/src/offline.ts +++ b/packages/react/src/offline.ts @@ -1,10 +1,6 @@ import React from 'react'; import type { IconifyIcon, IconifyJSON } from '@iconify/types'; -import type { - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, - IconifyIconSize, -} from '@iconify/utils/lib/customisations'; +import type { 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 { - IconifyIcon, - IconifyJSON, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, - IconifyIconSize, - IconifyRenderMode, -}; +export { IconifyIcon, IconifyJSON, IconifyIconSize, IconifyRenderMode }; /** * Storage for icons referred by name diff --git a/packages/react/src/props.ts b/packages/react/src/props.ts index e4818ef..ecc89b4 100644 --- a/packages/react/src/props.ts +++ b/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; diff --git a/packages/react/src/render.ts b/packages/react/src/render.ts index f54c818..cfa8f40 100644 --- a/packages/react/src/render.ts +++ b/packages/react/src/render.ts @@ -6,10 +6,7 @@ import { defaults, mergeCustomisations, } from '@iconify/utils/lib/customisations'; -import { - flipFromString, - alignmentFromString, -} from '@iconify/utils/lib/customisations/shorthand'; +import { flipFromString } from '@iconify/utils/lib/customisations/flip'; 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; diff --git a/packages/react/tests/api/20-rendering-from-api.test.js b/packages/react/tests/api/20-rendering-from-api.test.js index d7e3123..21ae61b 100644 --- a/packages/react/tests/api/20-rendering-from-api.test.js +++ b/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 + diff --git a/packages/react/tests/api/30-changing-props.test.js b/packages/react/tests/api/30-changing-props.test.js index 70af601..6e70efb 100644 --- a/packages/react/tests/api/30-changing-props.test.js +++ b/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 + diff --git a/packages/react/tests/iconify/10-basic.test.js b/packages/react/tests/iconify/10-basic.test.js index d439a30..11b4165 100644 --- a/packages/react/tests/iconify/10-basic.test.js +++ b/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, diff --git a/packages/react/tests/iconify/10-style-mode.test.js b/packages/react/tests/iconify/10-style-mode.test.js index bc386b4..f51e424 100644 --- a/packages/react/tests/iconify/10-style-mode.test.js +++ b/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', diff --git a/packages/react/tests/iconify/20-attributes.test.js b/packages/react/tests/iconify/20-attributes.test.js index aa69dc7..334c82c 100644 --- a/packages/react/tests/iconify/20-attributes.test.js +++ b/packages/react/tests/iconify/20-attributes.test.js @@ -74,15 +74,10 @@ describe('Passing attributes', () => { test('attributes that cannot change', () => { const component = renderer.create( - + ); const tree = component.toJSON(); expect(tree.props.viewBox).toStrictEqual('0 0 24 24'); - expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMid meet'); }); }); diff --git a/packages/react/tests/iconify/20-transformations.test.js b/packages/react/tests/iconify/20-transformations.test.js index 6af727c..344fa07 100644 --- a/packages/react/tests/iconify/20-transformations.test.js +++ b/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( - - ); - const tree = component.toJSON(); - - expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMin slice'); - }); - - test('string', () => { - const component = renderer.create( - - ); - const tree = component.toJSON(); - - expect(tree.props.preserveAspectRatio).toStrictEqual('xMinYMax meet'); - }); -}); diff --git a/packages/react/tests/offline/10-basic.test.js b/packages/react/tests/offline/10-basic.test.js index e78fdbf..d9fdf33 100644 --- a/packages/react/tests/offline/10-basic.test.js +++ b/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: '', 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, diff --git a/packages/react/tests/offline/20-attributes.test.js b/packages/react/tests/offline/20-attributes.test.js index 1e6ab5f..0bacef0 100644 --- a/packages/react/tests/offline/20-attributes.test.js +++ b/packages/react/tests/offline/20-attributes.test.js @@ -76,15 +76,10 @@ describe('Passing attributes', () => { test('attributes that cannot change', () => { const component = renderer.create( - + ); const tree = component.toJSON(); expect(tree.props.viewBox).toStrictEqual('0 0 24 24'); - expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMid meet'); }); }); diff --git a/packages/react/tests/offline/20-storage.test.js b/packages/react/tests/offline/20-storage.test.js index 22769d0..cf7c138 100644 --- a/packages/react/tests/offline/20-storage.test.js +++ b/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: '', 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: '', }, home: { - body: - '', + body: '', }, }, 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: '', }, 'link': { - body: - '', + body: '', }, }, 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, diff --git a/packages/react/tests/offline/20-transformations.test.js b/packages/react/tests/offline/20-transformations.test.js index 6981462..3611ca0 100644 --- a/packages/react/tests/offline/20-transformations.test.js +++ b/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( - - ); - const tree = component.toJSON(); - - expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMin slice'); - }); - - test('string', () => { - const component = renderer.create( - - ); - const tree = component.toJSON(); - - expect(tree.props.preserveAspectRatio).toStrictEqual('xMinYMax meet'); - }); -}); diff --git a/packages/svelte/src/functions.ts b/packages/svelte/src/functions.ts index eab9eaf..879dc3f 100644 --- a/packages/svelte/src/functions.ts +++ b/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 { - IconifyIconSize, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, -} from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } 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, diff --git a/packages/svelte/src/iconify.ts b/packages/svelte/src/iconify.ts index 22da786..a64b12b 100644 --- a/packages/svelte/src/iconify.ts +++ b/packages/svelte/src/iconify.ts @@ -17,8 +17,6 @@ export { IconifyIcon, IconifyJSON, IconifyIconName } from './functions'; export { IconifyIconCustomisations, IconifyIconSize, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, IconifyIconProps, IconProps, IconifyRenderMode, diff --git a/packages/svelte/src/offline-iconify.ts b/packages/svelte/src/offline-iconify.ts index efa8f95..91100ea 100644 --- a/packages/svelte/src/offline-iconify.ts +++ b/packages/svelte/src/offline-iconify.ts @@ -1,10 +1,6 @@ // Types export type { IconifyJSON, IconifyIcon } from '@iconify/types'; -export type { - IconifyIconSize, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, -} from '@iconify/utils/lib/customisations'; +export type { IconifyIconSize } from '@iconify/utils/lib/customisations'; // Types from props.ts export type { diff --git a/packages/svelte/src/props.ts b/packages/svelte/src/props.ts index 68b4879..8c8e6a6 100644 --- a/packages/svelte/src/props.ts +++ b/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; } /** diff --git a/packages/svelte/src/render.ts b/packages/svelte/src/render.ts index 199067b..231ebdb 100644 --- a/packages/svelte/src/render.ts +++ b/packages/svelte/src/render.ts @@ -3,10 +3,7 @@ import { defaults, mergeCustomisations, } from '@iconify/utils/lib/customisations'; -import { - flipFromString, - alignmentFromString, -} from '@iconify/utils/lib/customisations/shorthand'; +import { flipFromString } from '@iconify/utils/lib/customisations/flip'; 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 = diff --git a/packages/svelte/tests/api/20-rendering-from-api.test.ts b/packages/svelte/tests/api/20-rendering-from-api.test.ts index 1ed273a..c4f6147 100644 --- a/packages/svelte/tests/api/20-rendering-from-api.test.ts +++ b/packages/svelte/tests/api/20-rendering-from-api.test.ts @@ -64,7 +64,7 @@ describe('Rendering icon', () => { // Check HTML immediately expect(html).toBe( - '' ); @@ -132,7 +132,7 @@ describe('Rendering icon', () => { expect(html).toBe( '' + '" width="1em" height="1em" viewBox="0 0 24 24">' ); done(); diff --git a/packages/svelte/tests/api/30-changing-props.test.ts b/packages/svelte/tests/api/30-changing-props.test.ts index 9d9d7ae..26ad86c 100644 --- a/packages/svelte/tests/api/30-changing-props.test.ts +++ b/packages/svelte/tests/api/30-changing-props.test.ts @@ -114,7 +114,7 @@ describe('Rendering icon', () => { // Check HTML expect(html).toBe( - '' ); @@ -139,7 +139,7 @@ describe('Rendering icon', () => { // Check HTML expect(html).toBe( - '' ); @@ -246,7 +246,7 @@ describe('Rendering icon', () => { // Check HTML expect(html).toBe( - '' ); @@ -332,7 +332,7 @@ describe('Rendering icon', () => { // Check HTML expect(html).toBe( - '' ); @@ -350,7 +350,7 @@ describe('Rendering icon', () => { .innerHTML; expect(html).toBe( - '' ); diff --git a/packages/svelte/tests/iconify/10-basic.test.ts b/packages/svelte/tests/iconify/10-basic.test.ts index 1d8418e..fb65872 100644 --- a/packages/svelte/tests/iconify/10-basic.test.ts +++ b/packages/svelte/tests/iconify/10-basic.test.ts @@ -26,7 +26,7 @@ describe('Creating component', () => { // Check HTML expect(html).toBe( - '' + '' ); // Make sure getAttribute() works, used in other tests diff --git a/packages/svelte/tests/iconify/10-style-mode.test.ts b/packages/svelte/tests/iconify/10-style-mode.test.ts index 0ffd720..91f932f 100644 --- a/packages/svelte/tests/iconify/10-style-mode.test.ts +++ b/packages/svelte/tests/iconify/10-style-mode.test.ts @@ -29,7 +29,7 @@ describe('Rendering as span', () => { // Check HTML expect(html).toBe( - "" + "" ); }); }); diff --git a/packages/svelte/tests/iconify/20-attributes.test.ts b/packages/svelte/tests/iconify/20-attributes.test.ts index f124f8c..f8e6b78 100644 --- a/packages/svelte/tests/iconify/20-attributes.test.ts +++ b/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'); }); }); diff --git a/packages/svelte/tests/iconify/20-transformations.test.ts b/packages/svelte/tests/iconify/20-transformations.test.ts index 8e110c1..fb59bd0 100644 --- a/packages/svelte/tests/iconify/20-transformations.test.ts +++ b/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'); - }); -}); diff --git a/packages/svelte/tests/offline/10-basic.test.ts b/packages/svelte/tests/offline/10-basic.test.ts index 7e69ee4..82d9503 100644 --- a/packages/svelte/tests/offline/10-basic.test.ts +++ b/packages/svelte/tests/offline/10-basic.test.ts @@ -20,7 +20,7 @@ describe('Creating component', () => { // Check HTML expect(html).toBe( - '' + '' ); // Make sure getAttribute() works, used in other tests diff --git a/packages/svelte/tests/offline/20-attributes.test.ts b/packages/svelte/tests/offline/20-attributes.test.ts index 1348ece..9167695 100644 --- a/packages/svelte/tests/offline/20-attributes.test.ts +++ b/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'); }); }); diff --git a/packages/svelte/tests/offline/20-storage.test.ts b/packages/svelte/tests/offline/20-storage.test.ts index f84e916..3984c72 100644 --- a/packages/svelte/tests/offline/20-storage.test.ts +++ b/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( - '' + '' ); }); @@ -45,7 +45,7 @@ describe('Using storage', () => { const html = (node.parentNode as HTMLDivElement).innerHTML; expect(html).toBe( - '' + '' ); }); @@ -71,7 +71,7 @@ describe('Using storage', () => { const html = (node.parentNode as HTMLDivElement).innerHTML; expect(html).toBe( - '' + '' ); }); diff --git a/packages/svelte/tests/offline/20-transformations.test.ts b/packages/svelte/tests/offline/20-transformations.test.ts index 500b901..3e4be1a 100644 --- a/packages/svelte/tests/offline/20-transformations.test.ts +++ b/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'); - }); -}); diff --git a/packages/utils/package.json b/packages/utils/package.json index 2ccdba3..220b35f 100644 --- a/packages/utils/package.json +++ b/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" diff --git a/packages/utils/src/customisations/flip.ts b/packages/utils/src/customisations/flip.ts new file mode 100644 index 0000000..2f50afe --- /dev/null +++ b/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; + } + }); +} diff --git a/packages/utils/src/customisations/index.ts b/packages/utils/src/customisations/index.ts index d63c68b..45b89c1 100644 --- a/packages/utils/src/customisations/index.ts +++ b/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)[attr] = value; - } - break; - // Non-empty string / non-zero number / null case 'width': case 'height': diff --git a/packages/utils/src/customisations/shorthand.ts b/packages/utils/src/customisations/shorthand.ts deleted file mode 100644 index 3ae6364..0000000 --- a/packages/utils/src/customisations/shorthand.ts +++ /dev/null @@ -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; - } - }); -} diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index a16917c..1c0284c 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -7,10 +7,7 @@ export { // Customisations: converting attributes in components export { toBoolean } from './customisations/bool'; -export { - flipFromString, - alignmentFromString, -} from './customisations/shorthand'; +export { flipFromString } from './customisations/flip'; export { rotateFromString } from './customisations/rotate'; // Icon names diff --git a/packages/utils/src/svg/build.ts b/packages/utils/src/svg/build.ts index 65744c7..5866438 100644 --- a/packages/utils/src/svg/build.ts +++ b/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 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() + ' ' + diff --git a/packages/utils/tests/svg-build-test.ts b/packages/utils/tests/svg-build-test.ts index 1fb2363..396d68a 100644 --- a/packages/utils/tests/svg-build-test.ts +++ b/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( - '' + '' ); }); @@ -42,7 +41,6 @@ describe('Testing iconToSVG', () => { attributes: { width: '16', height: '16', - preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 16 16', }, body: '', @@ -63,7 +61,7 @@ describe('Testing iconToSVG', () => { } const html = iconToHTML(result.body, htmlProps); expect(html).toBe( - '' + '' ); }); @@ -79,7 +77,6 @@ describe('Testing iconToSVG', () => { attributes: { width: '16', height: '16', - preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 16 16', }, body: '', @@ -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: '', @@ -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: '', @@ -154,7 +146,6 @@ describe('Testing iconToSVG', () => { attributes: { width: '32px', height: '40px', - preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 16 20', }, body: '', @@ -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: '', @@ -204,7 +192,6 @@ describe('Testing iconToSVG', () => { attributes: { width: '0.8em', height: '1em', - preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 16 20', }, body: '', @@ -231,7 +218,6 @@ describe('Testing iconToSVG', () => { attributes: { width: '0.8em', height: '1em', - preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 16 20', }, body: '', @@ -258,7 +244,6 @@ describe('Testing iconToSVG', () => { attributes: { width: '1em', height: '16', - preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 20 16', }, body: '', @@ -286,7 +271,6 @@ describe('Testing iconToSVG', () => { attributes: { width: '1em', height: '1em', - preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 128 128', }, body: diff --git a/packages/vue/src/iconify.ts b/packages/vue/src/iconify.ts index 0231d7c..5d34b75 100644 --- a/packages/vue/src/iconify.ts +++ b/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 { - IconifyIconSize, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, -} from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } 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, diff --git a/packages/vue/src/offline.ts b/packages/vue/src/offline.ts index 0f69c44..a321a03 100644 --- a/packages/vue/src/offline.ts +++ b/packages/vue/src/offline.ts @@ -9,11 +9,7 @@ import type { ComponentCustomProps, } from 'vue'; import type { IconifyIcon, IconifyJSON } from '@iconify/types'; -import type { - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, - IconifyIconSize, -} from '@iconify/utils/lib/customisations'; +import type { 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 { - IconifyIcon, - IconifyJSON, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, - IconifyIconSize, - IconifyRenderMode, -}; +export { IconifyIcon, IconifyJSON, IconifyIconSize, IconifyRenderMode }; /** * Storage for icons referred by name diff --git a/packages/vue/src/props.ts b/packages/vue/src/props.ts index 459700c..662d019 100644 --- a/packages/vue/src/props.ts +++ b/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; } /** diff --git a/packages/vue/src/render.ts b/packages/vue/src/render.ts index d093fe2..aead9b1 100644 --- a/packages/vue/src/render.ts +++ b/packages/vue/src/render.ts @@ -6,10 +6,7 @@ import { defaults, mergeCustomisations, } from '@iconify/utils/lib/customisations'; -import { - flipFromString, - alignmentFromString, -} from '@iconify/utils/lib/customisations/shorthand'; +import { flipFromString } from '@iconify/utils/lib/customisations/flip'; 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 = {}; ['horizontal', 'vertical'].forEach((prefix) => { - ['Align', 'Flip'].forEach((suffix) => { - const attr = prefix.slice(0, 1) + suffix; - const value = { - attr, - boolean: suffix === 'Flip', - }; + const attr = prefix.slice(0, 1) + 'Flip'; - // vertical-align - customisationAliases[prefix + '-' + suffix.toLowerCase()] = value; - // v-align - customisationAliases[prefix.slice(0, 1) + '-' + suffix.toLowerCase()] = - value; - // verticalAlign - customisationAliases[prefix + suffix] = value; - }); + // vertical-flip + customisationAliases[prefix + '-flip'] = attr; + // v-flip + customisationAliases[prefix.slice(0, 1) + '-flip'] = attr; + // verticalFlip + customisationAliases[prefix + 'Flip'] = attr; }); /** @@ -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: - if (customisationAliases[key] !== void 0) { - // Aliases for customisations - if ( - customisationAliases[key].boolean && - (value === true || value === 'true' || value === 1) - ) { - // Check for boolean - customisations[customisationAliases[key].attr] = true; - } else if ( - !customisationAliases[key].boolean && - typeof value === 'string' && - value !== '' - ) { - // String - customisations[customisationAliases[key].attr] = value; + default: { + const alias = customisationAliases[key]; + if (alias) { + // Aliases for boolean customisations + if (value === true || value === 'true' || value === 1) { + customisations[alias] = true; } } else if (defaults[key] === void 0) { // Copy missing property if it does not exist in customisations componentProps[key] = value; } + } } } diff --git a/packages/vue/tests/api/20-rendering-from-api-test.ts b/packages/vue/tests/api/20-rendering-from-api-test.ts index d2d7bc7..5c4cc07 100644 --- a/packages/vue/tests/api/20-rendering-from-api-test.ts +++ b/packages/vue/tests/api/20-rendering-from-api-test.ts @@ -70,7 +70,7 @@ describe('Rendering icon', () => { expect(html).toEqual( '' + '" width="1em" height="1em" viewBox="0 0 24 24">' ); // Make sure onLoad has been called @@ -136,7 +136,7 @@ describe('Rendering icon', () => { ).toEqual( '' + '" width="1em" height="1em" viewBox="0 0 24 24">' ); done(); diff --git a/packages/vue/tests/api/30-changing-props-test.ts b/packages/vue/tests/api/30-changing-props-test.ts index 31396af..0ed5ca7 100644 --- a/packages/vue/tests/api/30-changing-props-test.ts +++ b/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( - '' ); @@ -62,7 +62,7 @@ describe('Rendering icon', () => { expect( wrapper.html().replace(/\s*\n\s*/g, '') ).toEqual( - '' ); @@ -168,7 +168,7 @@ describe('Rendering icon', () => { expect( wrapper.html().replace(/\s*\n\s*/g, '') ).toEqual( - '' ); @@ -265,7 +265,7 @@ describe('Rendering icon', () => { await nextTick(); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( - '' ); @@ -284,7 +284,7 @@ describe('Rendering icon', () => { // Test expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual( - '' ); diff --git a/packages/vue/tests/empty.ts b/packages/vue/tests/empty.ts index 353eae5..f0c173e 100644 --- a/packages/vue/tests/empty.ts +++ b/packages/vue/tests/empty.ts @@ -1,6 +1,6 @@ // Default data for empty icon export const defaultIconResult = - ''; + ''; // Empty string: could be '' (jsdom) or '' (happy-dom), depending on testing envronment export const emptyString = ''; diff --git a/packages/vue/tests/iconify/10-basic-test.ts b/packages/vue/tests/iconify/10-basic-test.ts index 0755000..00bc1de 100644 --- a/packages/vue/tests/iconify/10-basic-test.ts +++ b/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( - '' + '' ); }); @@ -41,7 +41,7 @@ describe('Creating component', () => { await nextTick(); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( - '' + '' ); }); }); diff --git a/packages/vue/tests/iconify/20-attributes-test.ts b/packages/vue/tests/iconify/20-attributes-test.ts index 0034e5c..9ca360e 100644 --- a/packages/vue/tests/iconify/20-attributes-test.ts +++ b/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: ``, + template: ``, 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 () => { diff --git a/packages/vue/tests/iconify/20-transformations-test.ts b/packages/vue/tests/iconify/20-transformations-test.ts index 6f1fc7d..f31d9a2 100644 --- a/packages/vue/tests/iconify/20-transformations-test.ts +++ b/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( - '' + '' ); }); @@ -175,58 +175,3 @@ describe('Flip', () => { expect(wrapper.html()).not.toContain('`, - 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: ``, - 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: ``, - data() { - return { - icon: iconData, - }; - }, - }; - - const wrapper = mount(Wrapper, {}); - await nextTick(); - - expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"'); - }); -}); diff --git a/packages/vue/tests/offline/10-basic-test.ts b/packages/vue/tests/offline/10-basic-test.ts index d94b092..52f996f 100644 --- a/packages/vue/tests/offline/10-basic-test.ts +++ b/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( - '' + '' ); }); @@ -34,7 +34,7 @@ describe('Creating component', () => { }); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( - '' + '' ); }); }); diff --git a/packages/vue/tests/offline/20-attributes-test.ts b/packages/vue/tests/offline/20-attributes-test.ts index 0b7b565..dd72f08 100644 --- a/packages/vue/tests/offline/20-attributes-test.ts +++ b/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: ``, + template: ``, 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', () => { diff --git a/packages/vue/tests/offline/20-storage-test.ts b/packages/vue/tests/offline/20-storage-test.ts index c5afed3..502f7aa 100644 --- a/packages/vue/tests/offline/20-storage-test.ts +++ b/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( - '' + '' ); }); @@ -52,7 +52,7 @@ describe('Using storage', () => { const wrapper = mount(Wrapper, {}); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( - '' + '' ); }); @@ -80,7 +80,7 @@ describe('Using storage', () => { const wrapper = mount(Wrapper, {}); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( - '' + '' ); }); diff --git a/packages/vue/tests/offline/20-transformations-test.ts b/packages/vue/tests/offline/20-transformations-test.ts index e9aa397..9e19d30 100644 --- a/packages/vue/tests/offline/20-transformations-test.ts +++ b/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( - '' + '' ); }); @@ -156,52 +156,3 @@ describe('Flip', () => { expect(wrapper.html()).not.toContain('`, - data() { - return { - icon: iconData, - }; - }, - }; - - const wrapper = mount(Wrapper, {}); - expect(wrapper.html()).toContain( - 'preserveAspectRatio="xMidYMin slice"' - ); - }); - - test('string', () => { - const Wrapper = { - components: { Icon }, - template: ``, - data() { - return { - icon: iconData, - }; - }, - }; - - const wrapper = mount(Wrapper, {}); - expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"'); - }); - - test('aliases', () => { - const Wrapper = { - components: { Icon }, - template: ``, - data() { - return { - icon: iconData, - }; - }, - }; - - const wrapper = mount(Wrapper, {}); - expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"'); - }); -}); diff --git a/packages/vue2/src/iconify.ts b/packages/vue2/src/iconify.ts index 598a019..7162ed5 100644 --- a/packages/vue2/src/iconify.ts +++ b/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 { - IconifyIconSize, - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, -} from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } 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, diff --git a/packages/vue2/src/offline.ts b/packages/vue2/src/offline.ts index ea1e085..50430ba 100644 --- a/packages/vue2/src/offline.ts +++ b/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 { - IconifyHorizontalIconAlignment, - IconifyVerticalIconAlignment, - IconifyIconSize, -} from '@iconify/utils/lib/customisations'; +import type { 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, }; diff --git a/packages/vue2/src/props.ts b/packages/vue2/src/props.ts index 7cc2681..4756673 100644 --- a/packages/vue2/src/props.ts +++ b/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; } /** diff --git a/packages/vue2/src/render.ts b/packages/vue2/src/render.ts index 803bbaa..3f4f53d 100644 --- a/packages/vue2/src/render.ts +++ b/packages/vue2/src/render.ts @@ -6,10 +6,7 @@ import { defaults, mergeCustomisations, } from '@iconify/utils/lib/customisations'; -import { - flipFromString, - alignmentFromString, -} from '@iconify/utils/lib/customisations/shorthand'; +import { flipFromString } from '@iconify/utils/lib/customisations/flip'; 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 = { /** * 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 = {}; -['horizontal', 'vertical'].forEach((prefix) => { - ['Align', 'Flip'].forEach((suffix) => { - const attr = prefix.slice(0, 1) + suffix; - const value = { - attr, - boolean: suffix === 'Flip', - }; - - // vertical-align - customisationAliases[prefix + '-' + suffix.toLowerCase()] = value; - // v-align - customisationAliases[prefix.slice(0, 1) + '-' + suffix.toLowerCase()] = - value; - // verticalAlign - customisationAliases[prefix + suffix] = value; - }); -}); + const customisationAliases: Record = {}; + ['horizontal', 'vertical'].forEach((prefix) => { + const attr = prefix.slice(0, 1) + 'Flip'; + + // vertical-flip + customisationAliases[prefix + '-flip'] = attr; + // v-flip + customisationAliases[prefix.slice(0, 1) + '-flip'] = attr; + // verticalFlip + customisationAliases[prefix + 'Flip'] = attr; + }); + /** * 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) { - // Aliases for customisations - if ( - customisationAliases[key].boolean && - (value === true || value === 'true' || value === 1) - ) { - // Check for boolean - customisations[customisationAliases[key].attr] = true; - } else if ( - !customisationAliases[key].boolean && - typeof value === 'string' && - value !== '' - ) { - // String - customisations[customisationAliases[key].attr] = value; + const alias = customisationAliases[key]; + if (alias) { + // Aliases for boolean customisations + if (value === true || value === 'true' || value === 1) { + customisations[alias] = true; } } else if (defaults[key] === void 0) { // Copy missing property if it does not exist in customisations diff --git a/packages/vue2/tests/api/20-rendering-from-api.test.js b/packages/vue2/tests/api/20-rendering-from-api.test.js index 7a8791a..0c3bc67 100644 --- a/packages/vue2/tests/api/20-rendering-from-api.test.js +++ b/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( - '' ); @@ -133,7 +133,7 @@ describe('Rendering icon', () => { Vue.nextTick(() => { // Check HTML expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( - '' diff --git a/packages/vue2/tests/api/30-changing-props.test.js b/packages/vue2/tests/api/30-changing-props.test.js index 08186c5..b800bed 100644 --- a/packages/vue2/tests/api/30-changing-props.test.js +++ b/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( - '' ); @@ -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( - '' ); @@ -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( - '' ); @@ -262,7 +262,7 @@ describe('Rendering icon', () => { // Wait 1 tick, test rendered icon Vue.nextTick(() => { expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( - '' ); @@ -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( - '' ); diff --git a/packages/vue2/tests/empty.js b/packages/vue2/tests/empty.js index a04d493..9d5b13a 100644 --- a/packages/vue2/tests/empty.js +++ b/packages/vue2/tests/empty.js @@ -1,3 +1,3 @@ // Default data for empty icon export const defaultIconResult = - ''; + ''; diff --git a/packages/vue2/tests/iconify/10-basic.test.js b/packages/vue2/tests/iconify/10-basic.test.js index 4976e71..37d1439 100644 --- a/packages/vue2/tests/iconify/10-basic.test.js +++ b/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( - '' + '' ); }); @@ -41,7 +41,7 @@ describe('Creating component', () => { }); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( - '' + '' ); }); }); diff --git a/packages/vue2/tests/iconify/20-attributes.test.js b/packages/vue2/tests/iconify/20-attributes.test.js index 7b39b86..1d53fb6 100644 --- a/packages/vue2/tests/iconify/20-attributes.test.js +++ b/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: ``, + template: ``, 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', () => { diff --git a/packages/vue2/tests/iconify/20-transformations.test.js b/packages/vue2/tests/iconify/20-transformations.test.js index 791fbb3..c9c939c 100644 --- a/packages/vue2/tests/iconify/20-transformations.test.js +++ b/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( - '' + '' ); }); @@ -160,52 +160,3 @@ describe('Flip', () => { expect(wrapper.html()).not.toContain('`, - data() { - return { - icon: iconData, - }; - }, - }; - - const wrapper = mount(Wrapper, {}); - expect(wrapper.html()).toContain( - 'preserveAspectRatio="xMidYMin slice"' - ); - }); - - test('string', () => { - const Wrapper = { - components: { Icon }, - template: ``, - data() { - return { - icon: iconData, - }; - }, - }; - - const wrapper = mount(Wrapper, {}); - expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"'); - }); - - test('aliases', () => { - const Wrapper = { - components: { Icon }, - template: ``, - data() { - return { - icon: iconData, - }; - }, - }; - - const wrapper = mount(Wrapper, {}); - expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"'); - }); -}); diff --git a/packages/vue2/tests/offline/10-basic.test.js b/packages/vue2/tests/offline/10-basic.test.js index c83fd82..1bb649e 100644 --- a/packages/vue2/tests/offline/10-basic.test.js +++ b/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( - '' + '' ); }); @@ -38,7 +38,7 @@ describe('Creating component', () => { }); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( - '' + '' ); }); }); diff --git a/packages/vue2/tests/offline/20-attributes.test.js b/packages/vue2/tests/offline/20-attributes.test.js index 23a0faa..b9b12d7 100644 --- a/packages/vue2/tests/offline/20-attributes.test.js +++ b/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: ``, + template: ``, 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', () => { diff --git a/packages/vue2/tests/offline/20-storage.test.js b/packages/vue2/tests/offline/20-storage.test.js index 2e76270..1dc2688 100644 --- a/packages/vue2/tests/offline/20-storage.test.js +++ b/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( - '' + '' ); }); @@ -57,7 +57,7 @@ describe('Using storage', () => { const wrapper = mount(Wrapper, {}); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( - '' + '' ); }); @@ -87,7 +87,7 @@ describe('Using storage', () => { const wrapper = mount(Wrapper, {}); expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe( - '' + '' ); }); diff --git a/packages/vue2/tests/offline/20-transformations.test.js b/packages/vue2/tests/offline/20-transformations.test.js index 98854d0..ef78a01 100644 --- a/packages/vue2/tests/offline/20-transformations.test.js +++ b/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( - '' + '' ); }); @@ -160,52 +160,3 @@ describe('Flip', () => { expect(wrapper.html()).not.toContain('`, - data() { - return { - icon: iconData, - }; - }, - }; - - const wrapper = mount(Wrapper, {}); - expect(wrapper.html()).toContain( - 'preserveAspectRatio="xMidYMin slice"' - ); - }); - - test('string', () => { - const Wrapper = { - components: { Icon }, - template: ``, - data() { - return { - icon: iconData, - }; - }, - }; - - const wrapper = mount(Wrapper, {}); - expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"'); - }); - - test('aliases', () => { - const Wrapper = { - components: { Icon }, - template: ``, - data() { - return { - icon: iconData, - }; - }, - }; - - const wrapper = mount(Wrapper, {}); - expect(wrapper.html()).toContain('preserveAspectRatio="xMinYMax meet"'); - }); -});