agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-05 23:10:40 +00:00
Code Issues Releases Activity

Undo viewBox addition to web component: causes mess when used with transformations

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-05-20 22:47:05 +03:00
parent 63322d9e0a
commit 49f4f67e44
9 changed files with 9 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
iconify-icon/icon/README.md
View File

@ -21,13 +21,13 @@ Iconify Icon web component renders icons.
Add this line to your page to load IconifyIcon (you can add it to `<head>` section of the page or before `</body>`): Add this line to your page to load IconifyIcon (you can add it to `<head>` section of the page or before `</body>`):
```html ```html
<script src="https://code.iconify.design/iconify-icon/0.0.5/iconify-icon.min.js"></script> <script src="https://code.iconify.design/iconify-icon/0.0.6/iconify-icon.min.js"></script>
``` ```
or or
```html ```html
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@0.0.5/dist/iconify-icon.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/iconify-icon@0.0.6/dist/iconify-icon.min.js"></script>
``` ```
or, if you are building a project with something like WebPack or Rollup, you can include the script by installing `iconify-icon` as a dependency and importing it in your project: or, if you are building a project with something like WebPack or Rollup, you can include the script by installing `iconify-icon` as a dependency and importing it in your project:

4
iconify-icon/icon/package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "iconify-icon", "name": "iconify-icon",
"version": "0.0.5", "version": "0.0.6",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "iconify-icon", "name": "iconify-icon",
"version": "0.0.5", "version": "0.0.6",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@iconify/types": "^1.1.0" "@iconify/types": "^1.1.0"

2
iconify-icon/icon/package.json
View File

@ -2,7 +2,7 @@
"name": "iconify-icon", "name": "iconify-icon",
"description": "Icon web component that loads icon data on demand. Over 100,000 icons to choose from", "description": "Icon web component that loads icon data on demand. Over 100,000 icons to choose from",
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)", "author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
"version": "0.0.5", "version": "0.0.6",
"license": "MIT", "license": "MIT",
"main": "./dist/iconify-icon.cjs", "main": "./dist/iconify-icon.cjs",
"types": "./dist/iconify-icon.d.ts", "types": "./dist/iconify-icon.d.ts",

2
iconify-icon/icon/src/attributes/customisations.ts
View File

@ -17,7 +17,6 @@ export type RenderedIconCustomisations = Omit<
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { inline, ...defaultCustomisations } = { const { inline, ...defaultCustomisations } = {
...defaults, ...defaults,
viewBox: '',
preserveAspectRatio: '', preserveAspectRatio: '',
} as IconifyIconSVGAttributes & FullIconCustomisations; } as IconifyIconSVGAttributes & FullIconCustomisations;
export { defaultCustomisations }; export { defaultCustomisations };
@ -44,7 +43,6 @@ export function getCustomisations(node: Element): RenderedIconCustomisations {
flipFromString(customisations, attr('flip', '')); flipFromString(customisations, attr('flip', ''));
// SVG attributes // SVG attributes
customisations.viewBox = attr('viewBox', attr('viewbox', ''));
customisations.preserveAspectRatio = attr( customisations.preserveAspectRatio = attr(
'preserveAspectRatio', 'preserveAspectRatio',
attr('preserveaspectratio', '') attr('preserveaspectratio', '')

1
iconify-icon/icon/src/attributes/types.ts
View File

@ -4,7 +4,6 @@ import type { IconifyIcon } from '@iconify/types';
* SVG attributes that can be overwritten * SVG attributes that can be overwritten
*/ */
export interface IconifyIconSVGAttributes { export interface IconifyIconSVGAttributes {
viewBox: string;
preserveAspectRatio: string; preserveAspectRatio: string;
} }

32
iconify-icon/icon/src/render/icon.ts
View File

@ -1,46 +1,18 @@
import type { IconifyIcon } from '@iconify/types';
import { iconToSVG } from '@iconify/utils/lib/svg/build'; import { iconToSVG } from '@iconify/utils/lib/svg/build';
import type { RenderedState } from '../state'; import type { RenderedState } from '../state';
import { renderSPAN } from './span'; import { renderSPAN } from './span';
import { renderSVG } from './svg'; import { renderSVG } from './svg';
// viewBox properties order
const viewBoxProps: (keyof IconifyIcon)[] = ['left', 'top', 'width', 'height'];
/** /**
* Render icon * Render icon
*/ */
export function renderIcon(parent: Element | ShadowRoot, state: RenderedState) { export function renderIcon(parent: Element | ShadowRoot, state: RenderedState) {
const iconData = { const iconData = state.icon.data;
...state.icon.data,
};
const customisations = state.customisations; const customisations = state.customisations;
// Custom viewBox
const viewBox = customisations.viewBox;
if (viewBox) {
const parts = viewBox.split(/\s+/);
const customisedViewBox: Partial<IconifyIcon> = {};
let failed = false;
if (parts.length === 4) {
for (let i = 0; i < 4; i++) {
const num = parseFloat(parts[i]);
if (isNaN(num)) {
failed = true;
} else {
customisedViewBox[viewBoxProps[i] as 'left'] = num;
}
}
if (!failed) {
Object.assign(iconData, customisedViewBox);
}
}
}
// Render icon // Render icon
const renderData = iconToSVG(iconData, { const renderData = iconToSVG(iconData, {
...state.customisations, ...customisations,
inline: state.inline, inline: state.inline,
}); });
if (customisations.preserveAspectRatio) { if (customisations.preserveAspectRatio) {

26
iconify-icon/icon/tests/customisations-test.ts
View File

@ -71,32 +71,6 @@ describe('Testing customisations', () => {
); );
expect(getInline(testNode)).toBe(false); expect(getInline(testNode)).toBe(false);
// viewBox
node.innerHTML = '<span viewBox="0 0 24 24"></span>';
testNode = node.lastChild as HTMLSpanElement;
const test4 = getCustomisations(testNode);
expect(test4).toEqual({
...defaultCustomisations,
viewBox: '0 0 24 24',
});
expect(haveCustomisationsChanged(test4, emptyCustomisations)).toBe(
true
);
node.innerHTML = '<span viewbox="0 0 32 32"></span>';
testNode = node.lastChild as HTMLSpanElement;
const test5 = getCustomisations(testNode);
expect(test5).toEqual({
...defaultCustomisations,
viewBox: '0 0 32 32',
});
expect(haveCustomisationsChanged(test5, test4)).toBe(true);
expect(haveCustomisationsChanged(test5, emptyCustomisations)).toBe(
true
);
// preserveAspectRatio // preserveAspectRatio
node.innerHTML = '<span preserveAspectRatio="xMidYMid meet"></span>'; node.innerHTML = '<span preserveAspectRatio="xMidYMid meet"></span>';
testNode = node.lastChild as HTMLSpanElement; testNode = node.lastChild as HTMLSpanElement;

31
iconify-icon/icon/tests/render-icon-test.ts
View File

@ -69,7 +69,7 @@ describe('Testing rendering loaded icon', () => {
); );
}); });
it('SVG with custom attributes', () => { it('SVG with custom preserveAspectRatio', () => {
// Setup DOM // Setup DOM
const doc = setupDOM('').window.document; const doc = setupDOM('').window.document;
@ -91,40 +91,13 @@ describe('Testing rendering loaded icon', () => {
inline: false, inline: false,
customisations: { customisations: {
...defaultCustomisations, ...defaultCustomisations,
viewBox: '0 0 48 24',
preserveAspectRatio: 'xMidYMid meet', preserveAspectRatio: 'xMidYMid meet',
}, },
}); });
// Test HTML // Test HTML
expect(node.innerHTML).toBe( expect(node.innerHTML).toBe(
`<style>${expectedBlock}</style><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="1em" viewBox="0 0 48 24" preserveAspectRatio="xMidYMid meet"><g></g></svg>` `<style>${expectedBlock}</style><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet"><g></g></svg>`
);
// Replace icon content
renderIcon(node, {
rendered: true,
icon: {
value: 'whatever',
data: {
...iconDefaults,
width: 24,
height: 24,
body: '<g><path d="" /></g>',
},
},
renderedMode: 'svg',
inline: false,
customisations: {
...defaultCustomisations,
rotate: 1,
height: 'auto',
},
});
// Test HTML
expect(node.innerHTML).toBe(
`<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>`
); );
}); });

2
iconify-icon/solid/src/iconify.tsx
View File

@ -96,7 +96,6 @@ export function Icon(props: IconifyIconProps): JSX.Element {
flip, flip,
width, width,
height, height,
viewBox,
preserveAspectRatio, preserveAspectRatio,
} = props; } = props;
@ -115,7 +114,6 @@ export function Icon(props: IconifyIconProps): JSX.Element {
attr:flip={flip} attr:flip={flip}
attr:width={width} attr:width={width}
attr:height={height} attr:height={height}
attr:viewBox={viewBox}
attr:preserveAspectRatio={preserveAspectRatio} attr:preserveAspectRatio={preserveAspectRatio}
{...props} {...props}
/> />