diff --git a/components/svg-framework/src/common.ts b/components/svg-framework/src/common.ts index e21afc9..fe2ba3d 100644 --- a/components/svg-framework/src/common.ts +++ b/components/svg-framework/src/common.ts @@ -1,10 +1,7 @@ import type { IconifyJSON } from '@iconify/types'; import { stringToIcon } from '@iconify/utils/lib/icon/name'; -import type { IconifyIconCustomisations } from '@iconify/utils/lib/customisations'; -import { - defaults, - mergeCustomisations, -} from '@iconify/utils/lib/customisations'; +import type { IconifyIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; +import { mergeCustomisations } from '@iconify/utils/lib/customisations/merge'; import { getIconData, addCollection, @@ -15,6 +12,7 @@ import { initObserver } from './observer/index'; import { scanDOM, scanElement } from './scanner/index'; import { addBodyNode } from './observer/root'; import { renderInlineSVG } from './render/svg'; +import { defaultExtendedIconCustomisations } from './scanner/config'; /** * Generate icon @@ -45,8 +43,8 @@ function generateIcon( // Clean up customisations const changes = mergeCustomisations( - defaults, - typeof customisations === 'object' ? customisations : {} + defaultExtendedIconCustomisations, + customisations || {} ); // Get data @@ -166,8 +164,8 @@ export function renderIcon( // Clean up customisations const changes = mergeCustomisations( - defaults, - typeof customisations === 'object' ? customisations : {} + defaultExtendedIconCustomisations, + customisations || {} ); // Get data diff --git a/components/svg-framework/src/iconify.ts b/components/svg-framework/src/iconify.ts index 0555aec..fa2f172 100644 --- a/components/svg-framework/src/iconify.ts +++ b/components/svg-framework/src/iconify.ts @@ -1,10 +1,7 @@ // Core import type { IconifyJSON, IconifyIcon } from '@iconify/types'; import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; -import type { - IconifyIconCustomisations, - IconifyIconSize, -} from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build'; import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions'; import { @@ -72,7 +69,10 @@ import { pauseObserver, resumeObserver, } from './observer/index'; -import type { IconifyRenderMode } from './scanner/config'; +import type { + IconifyRenderMode, + ExtendedIconifyIconCustomisations as IconifyIconCustomisations, +} from './scanner/config'; /** * Export required types diff --git a/components/svg-framework/src/iconify.without-api.ts b/components/svg-framework/src/iconify.without-api.ts index 69e7d9f..27a3ec3 100644 --- a/components/svg-framework/src/iconify.without-api.ts +++ b/components/svg-framework/src/iconify.without-api.ts @@ -1,10 +1,7 @@ // Core import type { IconifyJSON, IconifyIcon } from '@iconify/types'; import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; -import type { - IconifyIconCustomisations, - IconifyIconSize, -} from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build'; import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions'; import { @@ -28,7 +25,10 @@ import { pauseObserver, resumeObserver, } from './observer/index'; -import type { IconifyRenderMode } from './scanner/config'; +import type { + IconifyRenderMode, + ExtendedIconifyIconCustomisations as IconifyIconCustomisations, +} from './scanner/config'; /** * Export required types @@ -40,7 +40,7 @@ export { IconifyStorageFunctions, IconifyBuilderFunctions }; export { IconifyIcon, IconifyJSON, IconifyIconName }; // Customisations -export { IconifyIconCustomisations, IconifyIconSize, IconifyRenderMode }; +export { IconifyIconSize, IconifyRenderMode, IconifyIconCustomisations }; // Build export { IconifyIconBuildResult }; diff --git a/components/svg-framework/src/render/bg.ts b/components/svg-framework/src/render/bg.ts index da4a1e1..664537b 100644 --- a/components/svg-framework/src/render/bg.ts +++ b/components/svg-framework/src/render/bg.ts @@ -1,4 +1,4 @@ -import type { FullIconifyIcon } from '@iconify/utils/lib/icon'; +import type { FullIconifyIcon } from '@iconify/utils/lib/icon/defaults'; import { iconToSVG } from '@iconify/utils/lib/svg/build'; import { iconToHTML } from '@iconify/utils/lib/svg/html'; import { svgToURL } from '@iconify/utils/lib/svg/url'; @@ -58,9 +58,8 @@ export function renderBackground( useMask: boolean ): IconifyElement { // Generate data to render - const renderData = iconToSVG(iconData, { - ...props.customisations, - }); + const customisations = props.customisations; + const renderData = iconToSVG(iconData, customisations); const renderAttribs = renderData.attributes; // Get old data @@ -90,7 +89,7 @@ export function renderBackground( ...commonProps, ...(useMask ? monotoneProps : coloredProps), }; - if (renderData.inline) { + if (customisations.inline) { newStyles['vertical-align'] = '-0.125em'; } diff --git a/components/svg-framework/src/render/svg.ts b/components/svg-framework/src/render/svg.ts index 149a8b5..b40c976 100644 --- a/components/svg-framework/src/render/svg.ts +++ b/components/svg-framework/src/render/svg.ts @@ -1,4 +1,4 @@ -import type { FullIconifyIcon } from '@iconify/utils/lib/icon'; +import type { FullIconifyIcon } from '@iconify/utils/lib/icon/defaults'; import { iconToSVG } from '@iconify/utils/lib/svg/build'; import { replaceIDs } from '@iconify/utils/lib/svg/id'; import { iconToHTML } from '@iconify/utils/lib/svg/html'; @@ -28,7 +28,8 @@ export function renderInlineSVG( } // Generate data to render - const renderData = iconToSVG(iconData, props.customisations); + const customisations = props.customisations; + const renderData = iconToSVG(iconData, customisations); // Get old data const oldData = element[elementDataProperty]; @@ -66,7 +67,7 @@ export function renderInlineSVG( // Update style const addedStyles = applyStyle( svg, - renderData.inline + customisations.inline ? { 'vertical-align': '-0.125em', } diff --git a/components/svg-framework/src/scanner/compare.ts b/components/svg-framework/src/scanner/compare.ts index a05392a..27bebec 100644 --- a/components/svg-framework/src/scanner/compare.ts +++ b/components/svg-framework/src/scanner/compare.ts @@ -1,5 +1,7 @@ -import type { IconifyElementProps } from './config'; -import { defaults } from '@iconify/utils/lib/customisations'; +import { + defaultExtendedIconCustomisations, + IconifyElementProps, +} from './config'; /** * Compare props @@ -14,7 +16,7 @@ export function propsChanged( const customisations1 = props1.customisations; const customisations2 = props2.customisations; - for (const key in defaults) { + for (const key in defaultExtendedIconCustomisations) { if (customisations1[key] !== customisations2[key]) { return true; } diff --git a/components/svg-framework/src/scanner/config.ts b/components/svg-framework/src/scanner/config.ts index 79069a0..188f35c 100644 --- a/components/svg-framework/src/scanner/config.ts +++ b/components/svg-framework/src/scanner/config.ts @@ -1,5 +1,21 @@ import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; -import type { IconifyIconCustomisations } from '@iconify/utils/lib/customisations'; +import { + defaultIconCustomisations, + IconifyIconCustomisations, +} from '@iconify/utils/lib/customisations/defaults'; + +/** + * Add inline to customisations + */ +export interface ExtendedIconifyIconCustomisations + extends IconifyIconCustomisations { + inline?: boolean; +} + +export const defaultExtendedIconCustomisations = { + ...defaultIconCustomisations, + inline: false, +}; /** * Class names @@ -28,7 +44,7 @@ export interface IconifyElementProps { icon: IconifyIconName; // Customisations - customisations: Required; + customisations: Required; // Render mode mode?: IconifyRenderMode; diff --git a/components/svg-framework/src/scanner/get-props.ts b/components/svg-framework/src/scanner/get-props.ts index a091d2e..64b292b 100644 --- a/components/svg-framework/src/scanner/get-props.ts +++ b/components/svg-framework/src/scanner/get-props.ts @@ -1,20 +1,28 @@ 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 { flipFromString } from '@iconify/utils/lib/customisations/flip'; -import { IconifyRenderMode, inlineClass } from './config'; -import type { IconifyElementProps } from './config'; +import { + defaultExtendedIconCustomisations, + IconifyRenderMode, + inlineClass, +} from './config'; +import type { + IconifyElementProps, + ExtendedIconifyIconCustomisations, +} from './config'; /** * Size attributes */ -const sizeAttributes: (keyof IconifyIconCustomisations)[] = ['width', 'height']; +const sizeAttributes: (keyof ExtendedIconifyIconCustomisations)[] = [ + 'width', + 'height', +]; /** * Boolean attributes */ -const booleanAttributes: (keyof IconifyIconCustomisations)[] = [ +const booleanAttributes: (keyof ExtendedIconifyIconCustomisations)[] = [ 'inline', 'hFlip', 'vFlip', @@ -44,15 +52,12 @@ export function getElementProps(element: Element): IconifyElementProps | null { return null; } - // Get defaults + // Get defaults and inline const customisations = { - ...defaults, + ...defaultExtendedIconCustomisations, + inline: element.classList && element.classList.contains(inlineClass), }; - // Get inline status - customisations.inline = - element.classList && element.classList.contains(inlineClass); - // Get dimensions sizeAttributes.forEach((attr) => { const value = element.getAttribute('data-' + attr); diff --git a/components/svg-framework/src/scanner/index.ts b/components/svg-framework/src/scanner/index.ts index 9139833..c07eb93 100644 --- a/components/svg-framework/src/scanner/index.ts +++ b/components/svg-framework/src/scanner/index.ts @@ -11,7 +11,7 @@ import { } from './config'; import { scanRootNode } from './find'; import type { IconifyIconName } from '../iconify'; -import type { FullIconifyIcon } from '@iconify/utils/lib/icon'; +import type { FullIconifyIcon } from '@iconify/utils/lib/icon/defaults'; import { observe, pauseObservingNode, diff --git a/components/svg-framework/tests/changing-modes-test.ts b/components/svg-framework/tests/changing-modes-test.ts index 58c24a8..6ffc5b7 100644 --- a/components/svg-framework/tests/changing-modes-test.ts +++ b/components/svg-framework/tests/changing-modes-test.ts @@ -7,7 +7,6 @@ import { resetState, mockAPIData, awaitUntil, - nextTick, } from './helpers'; import { addBodyNode } from '../src/observer/root'; import { scanDOM } from '../src/scanner/index'; diff --git a/components/svg-framework/tests/element-props-test.ts b/components/svg-framework/tests/element-props-test.ts index e800dd2..40e0371 100644 --- a/components/svg-framework/tests/element-props-test.ts +++ b/components/svg-framework/tests/element-props-test.ts @@ -1,7 +1,7 @@ import { cleanupGlobals, setupDOM } from './helpers'; import { getElementProps } from '../src/scanner/get-props'; import { propsChanged } from '../src/scanner/compare'; -import { defaults } from '@iconify/utils/lib/customisations'; +import { defaultExtendedIconCustomisations } from '../src/scanner/config'; describe('Testing element properties', () => { beforeEach(() => { @@ -25,7 +25,7 @@ describe('Testing element properties', () => { name: 'home', }, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, }, // Value is null because that is what getAttribute() returns, but type and value are not // checked because it does not actually matter. In render it compares to string, any other @@ -44,7 +44,7 @@ describe('Testing element properties', () => { name: 'icon-name', }, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, }, mode: null, }); @@ -61,7 +61,7 @@ describe('Testing element properties', () => { name: 'home', }, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, }, mode: null, }); @@ -91,7 +91,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, inline: false, }, mode: null, @@ -104,7 +104,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, inline: true, }, mode: null, @@ -118,7 +118,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, inline: false, }, mode: null, @@ -133,7 +133,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, inline: true, }, mode: null, @@ -147,7 +147,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, inline: false, }, mode: null, @@ -160,7 +160,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, inline: true, }, mode: null, @@ -173,7 +173,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, inline: false, }, mode: null, @@ -197,7 +197,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, width: null, height: null, }, @@ -210,7 +210,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, width: '200', height: null, }, @@ -223,7 +223,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, width: '200', height: '1em', }, @@ -236,7 +236,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, width: null, height: '1em', }, @@ -261,7 +261,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, rotate: 0, }, mode: null, @@ -273,7 +273,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, rotate: 1, }, mode: null, @@ -285,7 +285,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, rotate: 2, }, mode: null, @@ -297,7 +297,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, rotate: 3, }, mode: null, @@ -309,7 +309,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, rotate: 3, }, mode: null, @@ -321,7 +321,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, }, mode: null, }); @@ -331,7 +331,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, }, mode: null, }); @@ -341,7 +341,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, }, mode: null, }); @@ -351,7 +351,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, }, mode: null, }); @@ -374,7 +374,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, hFlip: false, vFlip: false, }, @@ -387,7 +387,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, hFlip: true, }, mode: null, @@ -399,7 +399,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, hFlip: true, vFlip: true, }, @@ -413,7 +413,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, vFlip: true, }, mode: null, @@ -426,7 +426,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, }, mode: null, }); @@ -438,7 +438,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, hFlip: true, vFlip: true, }, @@ -452,7 +452,7 @@ describe('Testing element properties', () => { name, icon, customisations: { - ...defaults, + ...defaultExtendedIconCustomisations, }, mode: null, }); diff --git a/components/svg-framework/tests/mock-api-test.ts b/components/svg-framework/tests/mock-api-test.ts index f51f0f1..d06db42 100644 --- a/components/svg-framework/tests/mock-api-test.ts +++ b/components/svg-framework/tests/mock-api-test.ts @@ -1,6 +1,6 @@ import { iconExists } from '@iconify/core/lib/storage/functions'; import { loadIcon } from '@iconify/core/lib/api/icons'; -import { iconDefaults } from '@iconify/utils/lib/icon'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; import { fakeAPI, nextPrefix, mockAPIData } from './helpers'; describe('Testing mock API', () => { @@ -34,7 +34,7 @@ describe('Testing mock API', () => { // Load icon const data = await loadIcon(iconName); expect(data).toEqual({ - ...iconDefaults, + ...defaultIconProps, body: '', }); }); diff --git a/components/svg-framework/tests/re-render-node-test.ts b/components/svg-framework/tests/re-render-node-test.ts index 9da5271..7af43a8 100644 --- a/components/svg-framework/tests/re-render-node-test.ts +++ b/components/svg-framework/tests/re-render-node-test.ts @@ -1,8 +1,8 @@ -import { iconDefaults } from '@iconify/utils/lib/icon'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; import { cleanupGlobals, setupDOM, waitDOMReady } from './helpers'; import { scanRootNode } from '../src/scanner/find'; import { renderInlineSVG } from '../src/render/svg'; -import type { IconifyIcon } from '@iconify/utils/lib/icon'; +import type { IconifyIcon } from '@iconify/utils/lib/icon/defaults'; import { elementDataProperty, IconifyElement } from '../src/scanner/config'; describe('Testing re-rendering nodes', () => { @@ -33,7 +33,7 @@ describe('Testing re-rendering nodes', () => { // Get node and render it const { node, props } = items[0]; const svg = renderInlineSVG(node, props, { - ...iconDefaults, + ...defaultIconProps, ...data, }); diff --git a/components/svg-framework/tests/render-bg-test.ts b/components/svg-framework/tests/render-bg-test.ts index 39bfd83..7a73365 100644 --- a/components/svg-framework/tests/render-bg-test.ts +++ b/components/svg-framework/tests/render-bg-test.ts @@ -1,8 +1,8 @@ -import { iconDefaults } from '@iconify/utils/lib/icon'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; import { cleanupGlobals, setupDOM, waitDOMReady } from './helpers'; import { scanRootNode } from '../src/scanner/find'; import { renderBackground } from '../src/render/bg'; -import type { IconifyIcon } from '@iconify/utils/lib/icon'; +import type { IconifyIcon } from '@iconify/utils/lib/icon/defaults'; import { elementDataProperty, IconifyElement } from '../src/scanner/config'; describe('Testing rendering nodes as background', () => { @@ -40,7 +40,7 @@ describe('Testing rendering nodes as background', () => { node, props, { - ...iconDefaults, + ...defaultIconProps, ...data, }, data.body.indexOf('currentColor') !== -1 diff --git a/components/svg-framework/tests/render-node-test.ts b/components/svg-framework/tests/render-node-test.ts index da7d9b7..d646dbe 100644 --- a/components/svg-framework/tests/render-node-test.ts +++ b/components/svg-framework/tests/render-node-test.ts @@ -1,8 +1,8 @@ -import { iconDefaults } from '@iconify/utils/lib/icon'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; import { cleanupGlobals, setupDOM, waitDOMReady } from './helpers'; import { scanRootNode } from '../src/scanner/find'; import { renderInlineSVG } from '../src/render/svg'; -import type { IconifyIcon } from '@iconify/utils/lib/icon'; +import type { IconifyIcon } from '@iconify/utils/lib/icon/defaults'; import { elementDataProperty, IconifyElement } from '../src/scanner/config'; describe('Testing rendering nodes', () => { @@ -25,7 +25,10 @@ describe('Testing rendering nodes', () => { // Get node and render it const { node, props } = items[0]; - const svg = renderInlineSVG(node, props, { ...iconDefaults, ...data }); + const svg = renderInlineSVG(node, props, { + ...defaultIconProps, + ...data, + }); // Find SVG in DOM expect(root.childNodes.length).toBe(1); diff --git a/packages/utils/src/customisations/merge.ts b/packages/utils/src/customisations/merge.ts index bbe1092..2861e36 100644 --- a/packages/utils/src/customisations/merge.ts +++ b/packages/utils/src/customisations/merge.ts @@ -9,10 +9,10 @@ import { /** * Convert IconifyIconCustomisations to FullIconCustomisations */ -export function mergeCustomisations( - defaults: FullIconCustomisations, +export function mergeCustomisations( + defaults: T, item: IconifyIconCustomisations -): FullIconCustomisations { +): T { // Merge transformations const result = mergeIconTransformations(defaults, item);