agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-09 23:00:56 +00:00
Code Issues Releases Activity

Remove alignment from customisations

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-04-30 23:12:34 +03:00
parent 956d57bd13
commit 8e12f8614c
86 changed files with 211 additions and 937 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/ember/src/component.ts
View File

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

1
packages/ember/src/iconify-icon.hbs
View File

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 362 B

After

Width:  |  Height:  |  Size: 307 B

8
packages/ember/src/iconify-icon.ts
View File

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

3
packages/ember/src/props.ts
View File

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

13
packages/ember/src/render.ts
View File

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

8
packages/icon/src/attributes/customisations.ts
View File

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

3
packages/icon/src/attributes/types.ts
View File

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

1
packages/icon/src/component.ts
View File

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

9
packages/icon/src/index.ts
View File

@ -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 {

6
packages/icon/tests/component-test.ts
View File

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

7
packages/icon/tests/customisations-test.ts
View File

@ -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 =
'<span align="left top" width="auto" height=""></span>';
// Dimensions, empty value
node.innerHTML = '<span 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);

8
packages/icon/tests/render-icon-test.ts
View File

@ -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>`
);
});
});

10
packages/iconify/src/iconify.ts
View File

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

10
packages/iconify/src/iconify.without-api.ts
View File

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

27
packages/iconify/src/scanner/get-props.ts
View File

@ -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<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
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

10
packages/iconify/tests/changing-modes-test.ts
View File

@ -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>`
);
});
});

78
packages/iconify/tests/element-props-test.ts
View File

@ -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,
});
});
});

12
packages/iconify/tests/observing-changes-test.ts
View File

@ -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>`
);
});
});

22
packages/iconify/tests/re-render-node-test.ts
View File

@ -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];

12
packages/iconify/tests/render-bg-test.ts
View File

@ -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];

12
packages/iconify/tests/render-node-test.ts
View File

@ -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];

4
packages/iconify/tests/scan-dom-test.ts
View File

@ -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];

8
packages/react/src/iconify.ts
View File

@ -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,

15
packages/react/src/offline.ts
View File

@ -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

3
packages/react/src/props.ts
View File

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

12
packages/react/src/render.ts
View File

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

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

@ -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 +

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

@ -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 +

2
packages/react/tests/iconify/10-basic.test.js
View File

@ -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,

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

@ -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',

7
packages/react/tests/iconify/20-attributes.test.js
View File

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

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

@ -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');
});
});

5
packages/react/tests/offline/10-basic.test.js
View File

@ -3,8 +3,7 @@ import { Icon, InlineIcon } from '../../dist/offline';
import renderer from 'react-test-renderer';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<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,

7
packages/react/tests/offline/20-attributes.test.js
View File

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

18
packages/react/tests/offline/20-storage.test.js
View File

@ -3,8 +3,7 @@ import { Icon, addIcon, addCollection } from '../../dist/offline';
import renderer from 'react-test-renderer';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<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:
'<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"/>',
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"/>',
},
home: {
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"/>',
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"/>',
},
},
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:
'<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"/>',
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"/>',
},
'link': {
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"/>',
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"/>',
},
},
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,

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

@ -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');
});
});

8
packages/svelte/src/functions.ts
View File

@ -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,

2
packages/svelte/src/iconify.ts
View File

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

6
packages/svelte/src/offline-iconify.ts
View File

@ -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 {

3
packages/svelte/src/props.ts
View File

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

12
packages/svelte/src/render.ts
View File

@ -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 =

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

@ -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();

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

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

2
packages/svelte/tests/iconify/10-basic.test.ts
View File

@ -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

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

@ -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>"
);
});
});

2
packages/svelte/tests/iconify/20-attributes.test.ts
View File

@ -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');
});
});

23
packages/svelte/tests/iconify/20-transformations.test.ts
View File

@ -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');
});
});

2
packages/svelte/tests/offline/10-basic.test.ts
View File

@ -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

2
packages/svelte/tests/offline/20-attributes.test.ts
View File

@ -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');
});
});

6
packages/svelte/tests/offline/20-storage.test.ts
View File

@ -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>'
);
});

23
packages/svelte/tests/offline/20-transformations.test.ts
View File

@ -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');
});
});

8
packages/utils/package.json
View File

@ -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"

32
packages/utils/src/customisations/flip.ts Normal file
View File

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

25
packages/utils/src/customisations/index.ts
View File

@ -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':

68
packages/utils/src/customisations/shorthand.ts
View File

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

5
packages/utils/src/index.ts
View File

@ -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

35
packages/utils/src/svg/build.ts
View File

@ -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() +
' ' +

26
packages/utils/tests/svg-build-test.ts
View File

@ -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:

8
packages/vue/src/iconify.ts
View File

@ -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,

15
packages/vue/src/offline.ts
View File

@ -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

3
packages/vue/src/props.ts
View File

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

60
packages/vue/src/render.ts
View File

@ -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<string, string> = {};
['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,22 +163,12 @@ 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
@ -203,6 +176,7 @@ export const render = (
}
}
}
}
// Generate icon
const item = iconToSVG(icon, customisations);

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

@ -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();

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

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

2
packages/vue/tests/empty.ts
View File

@ -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 = '<!---->';

4
packages/vue/tests/iconify/10-basic-test.ts
View File

@ -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>'
);
});
});

3
packages/vue/tests/iconify/20-attributes-test.ts
View File

@ -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 () => {

57
packages/vue/tests/iconify/20-transformations-test.ts
View File

@ -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"');
});
});

4
packages/vue/tests/offline/10-basic-test.ts
View File

@ -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>'
);
});
});

3
packages/vue/tests/offline/20-attributes-test.ts
View File

@ -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', () => {

6
packages/vue/tests/offline/20-storage-test.ts
View File

@ -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>'
);
});

51
packages/vue/tests/offline/20-transformations-test.ts
View File

@ -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"');
});
});

8
packages/vue2/src/iconify.ts
View File

@ -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,

8
packages/vue2/src/offline.ts
View File

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

3
packages/vue2/src/props.ts
View File

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

58
packages/vue2/src/render.ts
View File

@ -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,27 +24,21 @@ 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) => {
['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;
});
/**
* 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

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

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

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

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

2
packages/vue2/tests/empty.js
View File

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

4
packages/vue2/tests/iconify/10-basic.test.js
View File

@ -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>'
);
});
});

3
packages/vue2/tests/iconify/20-attributes.test.js
View File

@ -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', () => {

51
packages/vue2/tests/iconify/20-transformations.test.js
View File

@ -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"');
});
});

4
packages/vue2/tests/offline/10-basic.test.js
View File

@ -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>'
);
});
});

3
packages/vue2/tests/offline/20-attributes.test.js
View File

@ -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', () => {

6
packages/vue2/tests/offline/20-storage.test.js
View File

@ -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>'
);
});

51
packages/vue2/tests/offline/20-transformations.test.js
View File

@ -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"');
});
});