agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-08 06:15:24 +00:00
Code Issues Releases Activity

Update SVG framework

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-06-19 18:22:42 +03:00
parent c892879e90
commit 9ad23abd6a
16 changed files with 115 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/svg-framework/src/common.ts
View File

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

10
components/svg-framework/src/iconify.ts
View File

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

12
components/svg-framework/src/iconify.without-api.ts
View File

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

9
components/svg-framework/src/render/bg.ts
View File

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

7
components/svg-framework/src/render/svg.ts
View File

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

8
components/svg-framework/src/scanner/compare.ts
View File

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

20
components/svg-framework/src/scanner/config.ts
View File

@ -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<IconifyIconCustomisations>;
customisations: Required<ExtendedIconifyIconCustomisations>;
// Render mode
mode?: IconifyRenderMode;

29
components/svg-framework/src/scanner/get-props.ts
View File

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

2
components/svg-framework/src/scanner/index.ts
View File

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

1
components/svg-framework/tests/changing-modes-test.ts
View File

@ -7,7 +7,6 @@ import {
resetState,
mockAPIData,
awaitUntil,
nextTick,
} from './helpers';
import { addBodyNode } from '../src/observer/root';
import { scanDOM } from '../src/scanner/index';

62
components/svg-framework/tests/element-props-test.ts
View File

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

4
components/svg-framework/tests/mock-api-test.ts
View File

@ -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: '<g />',
});
});

6
components/svg-framework/tests/re-render-node-test.ts
View File

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

6
components/svg-framework/tests/render-bg-test.ts
View File

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

9
components/svg-framework/tests/render-node-test.ts
View File

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

6
packages/utils/src/customisations/merge.ts
View File

@ -9,10 +9,10 @@ import {
/**
* Convert IconifyIconCustomisations to FullIconCustomisations
*/
export function mergeCustomisations(
defaults: FullIconCustomisations,
export function mergeCustomisations<T extends FullIconCustomisations>(
defaults: T,
item: IconifyIconCustomisations
): FullIconCustomisations {
): T {
// Merge transformations
const result = mergeIconTransformations(defaults, item);