diff --git a/iconify-icon/icon/README.md b/iconify-icon/icon/README.md index 569fac5..bbc3606 100644 --- a/iconify-icon/icon/README.md +++ b/iconify-icon/icon/README.md @@ -21,13 +21,13 @@ Iconify Icon web component renders icons. Add this line to your page to load IconifyIcon (you can add it to `` section of the page or before ``): ```html - + ``` or ```html - + ``` 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: diff --git a/iconify-icon/icon/package-lock.json b/iconify-icon/icon/package-lock.json index b443f60..4e291e6 100644 --- a/iconify-icon/icon/package-lock.json +++ b/iconify-icon/icon/package-lock.json @@ -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" diff --git a/iconify-icon/icon/package.json b/iconify-icon/icon/package.json index 03dcdfd..8707c27 100644 --- a/iconify-icon/icon/package.json +++ b/iconify-icon/icon/package.json @@ -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 (https://iconify.design)", - "version": "0.0.5", + "version": "0.0.6", "license": "MIT", "main": "./dist/iconify-icon.cjs", "types": "./dist/iconify-icon.d.ts", diff --git a/iconify-icon/icon/src/attributes/customisations.ts b/iconify-icon/icon/src/attributes/customisations.ts index aabc7bb..791e78c 100644 --- a/iconify-icon/icon/src/attributes/customisations.ts +++ b/iconify-icon/icon/src/attributes/customisations.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', '') diff --git a/iconify-icon/icon/src/attributes/types.ts b/iconify-icon/icon/src/attributes/types.ts index f57988e..0cae2b2 100644 --- a/iconify-icon/icon/src/attributes/types.ts +++ b/iconify-icon/icon/src/attributes/types.ts @@ -4,7 +4,6 @@ import type { IconifyIcon } from '@iconify/types'; * SVG attributes that can be overwritten */ export interface IconifyIconSVGAttributes { - viewBox: string; preserveAspectRatio: string; } diff --git a/iconify-icon/icon/src/render/icon.ts b/iconify-icon/icon/src/render/icon.ts index 5084bd1..cea3881 100644 --- a/iconify-icon/icon/src/render/icon.ts +++ b/iconify-icon/icon/src/render/icon.ts @@ -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 = {}; - 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) { diff --git a/iconify-icon/icon/tests/customisations-test.ts b/iconify-icon/icon/tests/customisations-test.ts index dfff5ac..cedb04f 100644 --- a/iconify-icon/icon/tests/customisations-test.ts +++ b/iconify-icon/icon/tests/customisations-test.ts @@ -71,32 +71,6 @@ describe('Testing customisations', () => { ); expect(getInline(testNode)).toBe(false); - // viewBox - node.innerHTML = ''; - 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 = ''; - 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 = ''; testNode = node.lastChild as HTMLSpanElement; diff --git a/iconify-icon/icon/tests/render-icon-test.ts b/iconify-icon/icon/tests/render-icon-test.ts index da2994d..9c872f2 100644 --- a/iconify-icon/icon/tests/render-icon-test.ts +++ b/iconify-icon/icon/tests/render-icon-test.ts @@ -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( - `` - ); - - // Replace icon content - renderIcon(node, { - rendered: true, - icon: { - value: 'whatever', - data: { - ...iconDefaults, - width: 24, - height: 24, - body: '', - }, - }, - renderedMode: 'svg', - inline: false, - customisations: { - ...defaultCustomisations, - rotate: 1, - height: 'auto', - }, - }); - - // Test HTML - expect(node.innerHTML).toBe( - `` + `` ); }); diff --git a/iconify-icon/solid/src/iconify.tsx b/iconify-icon/solid/src/iconify.tsx index 02c36e5..47b550b 100644 --- a/iconify-icon/solid/src/iconify.tsx +++ b/iconify-icon/solid/src/iconify.tsx @@ -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} />