mirror of
https://github.com/iconify/iconify.git
synced 2024-12-12 13:47:49 +00:00
Undo viewBox addition to web component: causes mess when used with transformations
This commit is contained in:
Vjacheslav Trushkin
parent
63322d9e0a
commit
49f4f67e44
@ -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>`):
|
||||
|
||||
```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
|
||||
|
||||
```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:
|
||||
|
||||
4
iconify-icon/icon/package-lock.json
generated
4
iconify-icon/icon/package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "iconify-icon",
|
||||
"version": "0.0.5",
|
||||
"version": "0.0.6",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "iconify-icon",
|
||||
"version": "0.0.5",
|
||||
"version": "0.0.6",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@iconify/types": "^1.1.0"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "iconify-icon",
|
||||
"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)",
|
||||
"version": "0.0.5",
|
||||
"version": "0.0.6",
|
||||
"license": "MIT",
|
||||
"main": "./dist/iconify-icon.cjs",
|
||||
"types": "./dist/iconify-icon.d.ts",
|
||||
|
||||
@ -17,7 +17,6 @@ export type RenderedIconCustomisations = Omit<
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { inline, ...defaultCustomisations } = {
|
||||
...defaults,
|
||||
viewBox: '',
|
||||
preserveAspectRatio: '',
|
||||
} as IconifyIconSVGAttributes & FullIconCustomisations;
|
||||
export { defaultCustomisations };
|
||||
@ -44,7 +43,6 @@ export function getCustomisations(node: Element): RenderedIconCustomisations {
|
||||
flipFromString(customisations, attr('flip', ''));
|
||||
|
||||
// SVG attributes
|
||||
customisations.viewBox = attr('viewBox', attr('viewbox', ''));
|
||||
customisations.preserveAspectRatio = attr(
|
||||
'preserveAspectRatio',
|
||||
attr('preserveaspectratio', '')
|
||||
|
||||
@ -4,7 +4,6 @@ import type { IconifyIcon } from '@iconify/types';
|
||||
* SVG attributes that can be overwritten
|
||||
*/
|
||||
export interface IconifyIconSVGAttributes {
|
||||
viewBox: string;
|
||||
preserveAspectRatio: string;
|
||||
}
|
||||
|
||||
|
||||
@ -1,46 +1,18 @@
|
||||
import type { IconifyIcon } from '@iconify/types';
|
||||
import { iconToSVG } from '@iconify/utils/lib/svg/build';
|
||||
import type { RenderedState } from '../state';
|
||||
import { renderSPAN } from './span';
|
||||
import { renderSVG } from './svg';
|
||||
|
||||
// viewBox properties order
|
||||
const viewBoxProps: (keyof IconifyIcon)[] = ['left', 'top', 'width', 'height'];
|
||||
|
||||
/**
|
||||
* Render icon
|
||||
*/
|
||||
export function renderIcon(parent: Element | ShadowRoot, state: RenderedState) {
|
||||
const iconData = {
|
||||
...state.icon.data,
|
||||
};
|
||||
const iconData = state.icon.data;
|
||||
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
|
||||
const renderData = iconToSVG(iconData, {
|
||||
...state.customisations,
|
||||
...customisations,
|
||||
inline: state.inline,
|
||||
});
|
||||
if (customisations.preserveAspectRatio) {
|
||||
|
||||
@ -71,32 +71,6 @@ describe('Testing customisations', () => {
|
||||
);
|
||||
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
|
||||
node.innerHTML = '<span preserveAspectRatio="xMidYMid meet"></span>';
|
||||
testNode = node.lastChild as HTMLSpanElement;
|
||||
|
||||
@ -69,7 +69,7 @@ describe('Testing rendering loaded icon', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('SVG with custom attributes', () => {
|
||||
it('SVG with custom preserveAspectRatio', () => {
|
||||
// Setup DOM
|
||||
const doc = setupDOM('').window.document;
|
||||
|
||||
@ -91,40 +91,13 @@ describe('Testing rendering loaded icon', () => {
|
||||
inline: false,
|
||||
customisations: {
|
||||
...defaultCustomisations,
|
||||
viewBox: '0 0 48 24',
|
||||
preserveAspectRatio: 'xMidYMid meet',
|
||||
},
|
||||
});
|
||||
|
||||
// Test HTML
|
||||
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>`
|
||||
);
|
||||
|
||||
// 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>`
|
||||
`<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>`
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -96,7 +96,6 @@ export function Icon(props: IconifyIconProps): JSX.Element {
|
||||
flip,
|
||||
width,
|
||||
height,
|
||||
viewBox,
|
||||
preserveAspectRatio,
|
||||
} = props;
|
||||
|
||||
@ -115,7 +114,6 @@ export function Icon(props: IconifyIconProps): JSX.Element {
|
||||
attr:flip={flip}
|
||||
attr:width={width}
|
||||
attr:height={height}
|
||||
attr:viewBox={viewBox}
|
||||
attr:preserveAspectRatio={preserveAspectRatio}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user