From ce135b6cf53973e6eb111a230b93ff2ffd4dda37 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Sun, 19 Jun 2022 19:16:11 +0300 Subject: [PATCH] Update components --- components/ember/src/component.ts | 6 ++-- components/ember/src/iconify-icon.ts | 5 ++-- components/ember/src/props.ts | 17 +++++++---- components/ember/src/render.ts | 13 ++++---- components/react/src/iconify.ts | 9 +++--- components/react/src/offline.ts | 8 ++--- components/react/src/props.ts | 20 ++++++++----- components/react/src/render.ts | 30 +++++++++++-------- components/svelte/src/functions.ts | 9 +++--- components/svelte/src/iconify.ts | 2 +- components/svelte/src/offline-functions.ts | 6 ++-- components/svelte/src/offline-iconify.ts | 2 +- components/svelte/src/props.ts | 17 +++++++---- components/svelte/src/render.ts | 21 ++++++++----- components/svg-framework/src/iconify.ts | 2 +- .../svg-framework/src/iconify.without-api.ts | 2 +- .../svg-framework/src/scanner/config.ts | 12 ++++---- .../svg-framework/src/scanner/get-props.ts | 12 ++------ components/vue/src/iconify.ts | 14 ++++----- components/vue/src/offline.ts | 8 ++--- components/vue/src/props.ts | 17 +++++++---- components/vue/src/render.ts | 17 +++++------ components/vue2/src/iconify.ts | 14 ++++----- components/vue2/src/offline.ts | 8 ++--- components/vue2/src/props.ts | 17 +++++++---- components/vue2/src/render.ts | 15 +++++----- 26 files changed, 163 insertions(+), 140 deletions(-) diff --git a/components/ember/src/component.ts b/components/ember/src/component.ts index b4e82b5..92a7d3c 100644 --- a/components/ember/src/component.ts +++ b/components/ember/src/component.ts @@ -5,8 +5,8 @@ import { tracked } from '@glimmer/tracking'; import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; import { stringToIcon } from '@iconify/utils/lib/icon/name'; import { getIconData } from '@iconify/core/lib/storage/functions'; -import type { FullIconifyIcon } from '@iconify/utils/lib/icon'; -import { fullIcon } from '@iconify/utils/lib/icon'; +import type { FullIconifyIcon } from '@iconify/utils/lib/icon/defaults'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; // API import { loadIcon } from '@iconify/core/lib/api/icons'; @@ -68,7 +68,7 @@ export class IconifyIconComponent extends Component { this._icon = null; // Render object - return render(fullIcon(icon), this.args, ''); + return render({ ...defaultIconProps, ...icon }, this.args, ''); } // Already loaded diff --git a/components/ember/src/iconify-icon.ts b/components/ember/src/iconify-icon.ts index c1f77de..30ac93e 100644 --- a/components/ember/src/iconify-icon.ts +++ b/components/ember/src/iconify-icon.ts @@ -2,7 +2,7 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types'; // Core import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; -import type { IconifyIconSize } from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions'; import { iconExists, @@ -64,7 +64,6 @@ import type { // Properties import type { - RawIconCustomisations, IconifyIconOnLoad, IconifyIconCustomisations, IconifyIconProps, @@ -111,7 +110,7 @@ export { }; // Builder functions -export { RawIconCustomisations, IconifyIconBuildResult }; +export { IconifyIconBuildResult }; /* Browser cache */ export { IconifyBrowserCacheType }; diff --git a/components/ember/src/props.ts b/components/ember/src/props.ts index a205111..c22fa4f 100644 --- a/components/ember/src/props.ts +++ b/components/ember/src/props.ts @@ -1,14 +1,21 @@ import type { IconifyIcon } from '@iconify/types'; -import type { IconifyIconCustomisations as RawIconCustomisations } from '@iconify/utils/lib/customisations'; +import type { IconifyIconCustomisations as RawIconifyIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; +import { defaultIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; -export { RawIconCustomisations }; - -// Allow rotation to be string /** * Icon customisations */ -export type IconifyIconCustomisations = RawIconCustomisations & { +export type IconifyIconCustomisations = RawIconifyIconCustomisations & { + // Allow rotation to be string rotate?: string | number; + + // Inline mode + inline?: boolean; +}; + +export const defaultExtendedIconCustomisations = { + ...defaultIconCustomisations, + inline: false, }; /** diff --git a/components/ember/src/render.ts b/components/ember/src/render.ts index 30746bd..714eb66 100644 --- a/components/ember/src/render.ts +++ b/components/ember/src/render.ts @@ -1,16 +1,13 @@ // @ts-ignore import { htmlSafe } from '@ember/template'; import type { IconifyIcon } from '@iconify/types'; -import type { FullIconCustomisations } from '@iconify/utils/lib/customisations'; -import { - defaults, - mergeCustomisations, -} from '@iconify/utils/lib/customisations'; +import { mergeCustomisations } from '@iconify/utils/lib/customisations/merge'; import { flipFromString } from '@iconify/utils/lib/customisations/flip'; import { rotateFromString } from '@iconify/utils/lib/customisations/rotate'; import { iconToSVG } from '@iconify/utils/lib/svg/build'; import { replaceIDs } from '@iconify/utils/lib/svg/id'; import type { IconifyIconCustomisations, IconifyIconProps } from './props'; +import { defaultExtendedIconCustomisations } from './props'; /** * Render result @@ -39,9 +36,9 @@ export const render = ( ): RenderResult => { // Get all customisations const customisations = mergeCustomisations( - defaults, + defaultExtendedIconCustomisations, props as IconifyIconCustomisations - ) as FullIconCustomisations; + ); // Create empty style let style = ''; @@ -109,7 +106,7 @@ export const render = ( ); // Add inline - if (item.inline) { + if (customisations.inline) { style += 'vertical-align: -0.125em;'; } diff --git a/components/react/src/iconify.ts b/components/react/src/iconify.ts index bc3956e..0ab40be 100644 --- a/components/react/src/iconify.ts +++ b/components/react/src/iconify.ts @@ -4,7 +4,7 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types'; // Core import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; import { stringToIcon } from '@iconify/utils/lib/icon/name'; -import type { IconifyIconSize } from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions'; import { iconExists, @@ -20,7 +20,7 @@ import { buildIcon } from '@iconify/core/lib/builder/functions'; import { replaceIDs } from '@iconify/utils/lib/svg/id'; import { calculateSize } from '@iconify/utils/lib/svg/size'; import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build'; -import { fullIcon } from '@iconify/utils/lib/icon'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; // API import type { @@ -68,7 +68,6 @@ import type { // Properties import type { - RawIconCustomisations, IconifyIconOnLoad, IconifyIconCustomisations, IconifyIconProps, @@ -120,7 +119,7 @@ export { }; // Builder functions -export { RawIconCustomisations, IconifyIconBuildResult }; +export { IconifyIconBuildResult }; /* Browser cache */ export { IconifyBrowserCacheType }; @@ -293,7 +292,7 @@ class IconComponent extends React.Component< if (changed || state.icon === null) { // Set data if it was changed this._setData({ - data: fullIcon(icon), + data: { ...defaultIconProps, ...icon }, }); } return; diff --git a/components/react/src/offline.ts b/components/react/src/offline.ts index fe34fc8..53b93c8 100644 --- a/components/react/src/offline.ts +++ b/components/react/src/offline.ts @@ -1,7 +1,7 @@ import React from 'react'; import type { IconifyIcon, IconifyJSON } from '@iconify/types'; -import type { IconifyIconSize } from '@iconify/utils/lib/customisations'; -import { fullIcon } from '@iconify/utils/lib/icon'; +import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; import { parseIconSet } from '@iconify/utils/lib/icon-set/parse'; import { quicklyValidateIconSet } from '@iconify/utils/lib/icon-set/validate-basic'; import type { @@ -41,7 +41,7 @@ function component( typeof props.icon === 'string' ? storage[props.icon] : typeof props.icon === 'object' - ? fullIcon(props.icon) + ? { ...defaultIconProps, ...props.icon } : null; // Validate icon object @@ -89,7 +89,7 @@ export const InlineIcon = React.forwardRef( * @param data */ export function addIcon(name: string, data: IconifyIcon): void { - storage[name] = fullIcon(data); + storage[name] = { ...defaultIconProps, ...data }; } /** diff --git a/components/react/src/props.ts b/components/react/src/props.ts index ecc89b4..dfbfa08 100644 --- a/components/react/src/props.ts +++ b/components/react/src/props.ts @@ -1,8 +1,7 @@ import type { SVGProps, RefAttributes } from 'react'; import type { IconifyIcon } from '@iconify/types'; -import type { IconifyIconCustomisations as RawIconCustomisations } from '@iconify/utils/lib/customisations'; - -export { RawIconCustomisations }; +import type { IconifyIconCustomisations as RawIconifyIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; +import { defaultIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; /** * Icon render mode @@ -14,15 +13,20 @@ export { RawIconCustomisations }; */ export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg'; -// Allow rotation to be string /** * Icon customisations */ -export type IconifyIconCustomisations = Omit< - RawIconCustomisations, - 'rotate' -> & { +export type IconifyIconCustomisations = RawIconifyIconCustomisations & { + // Allow rotation to be string rotate?: string | number; + + // Inline mode + inline?: boolean; +}; + +export const defaultExtendedIconCustomisations = { + ...defaultIconCustomisations, + inline: false, }; /** diff --git a/components/react/src/render.ts b/components/react/src/render.ts index 60fabf0..d48d435 100644 --- a/components/react/src/render.ts +++ b/components/react/src/render.ts @@ -1,18 +1,20 @@ import React from 'react'; import type { SVGProps } from 'react'; import type { IconifyIcon } from '@iconify/types'; -import type { FullIconCustomisations } from '@iconify/utils/lib/customisations'; -import { - defaults, - mergeCustomisations, -} from '@iconify/utils/lib/customisations'; +import { mergeCustomisations } from '@iconify/utils/lib/customisations/merge'; import { flipFromString } from '@iconify/utils/lib/customisations/flip'; import { rotateFromString } from '@iconify/utils/lib/customisations/rotate'; import { iconToSVG } from '@iconify/utils/lib/svg/build'; import { replaceIDs } from '@iconify/utils/lib/svg/id'; import { iconToHTML } from '@iconify/utils/lib/svg/html'; import { svgToURL } from '@iconify/utils/lib/svg/url'; -import type { IconifyRenderMode, IconProps, IconRef } from './props'; +import type { + IconifyIconCustomisations, + IconifyRenderMode, + IconProps, + IconRef, +} from './props'; +import { defaultExtendedIconCustomisations } from './props'; /** * Default SVG attributes @@ -60,7 +62,10 @@ for (const prefix in propsToAddTo) { /** * Default values for customisations for inline icon */ -const inlineDefaults: FullIconCustomisations = { ...defaults, inline: true }; +const inlineDefaults: Required = { + ...defaultExtendedIconCustomisations, + inline: true, +}; /** * Fix size: add 'px' to numbers @@ -86,13 +91,12 @@ export const render = ( ref?: IconRef ): JSX.Element => { // Get default properties - const defaultProps = inline ? inlineDefaults : defaults; + const defaultProps = inline + ? inlineDefaults + : defaultExtendedIconCustomisations; // Get all customisations - const customisations = mergeCustomisations( - defaultProps, - props as FullIconCustomisations - ); + const customisations = mergeCustomisations(defaultProps, props); // Check mode const mode: IconifyRenderMode = props.mode || 'svg'; @@ -174,7 +178,7 @@ export const render = ( const renderAttribs = item.attributes; // Inline display - if (item.inline) { + if (customisations.inline) { style.verticalAlign = '-0.125em'; } diff --git a/components/svelte/src/functions.ts b/components/svelte/src/functions.ts index 73dd28a..cfb5b56 100644 --- a/components/svelte/src/functions.ts +++ b/components/svelte/src/functions.ts @@ -3,7 +3,7 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types'; // Core import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; import { stringToIcon } from '@iconify/utils/lib/icon/name'; -import type { IconifyIconSize } from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions'; import { iconExists, @@ -19,7 +19,7 @@ import { buildIcon } from '@iconify/core/lib/builder/functions'; import { replaceIDs } from '@iconify/utils/lib/svg/id'; import { calculateSize } from '@iconify/utils/lib/svg/size'; import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build'; -import { fullIcon } from '@iconify/utils/lib/icon'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; // API import type { @@ -67,7 +67,6 @@ import type { // Properties import type { - RawIconCustomisations, IconProps, IconifyIconCustomisations, IconifyIconProps, @@ -117,7 +116,7 @@ export { }; // Builder functions -export { RawIconCustomisations, IconifyIconBuildResult }; +export { IconifyIconBuildResult }; /* Browser cache */ export { IconifyBrowserCacheType }; @@ -275,7 +274,7 @@ export function checkIconState( // Stop loading state.name = ''; abortLoading(); - return { data: fullIcon(icon) }; + return { data: { ...defaultIconProps, ...icon } }; } // Invalid icon? diff --git a/components/svelte/src/iconify.ts b/components/svelte/src/iconify.ts index a43bfd5..f6f569b 100644 --- a/components/svelte/src/iconify.ts +++ b/components/svelte/src/iconify.ts @@ -37,7 +37,7 @@ export { } from './functions'; // Builder functions -export { RawIconCustomisations, IconifyIconBuildResult } from './functions'; +export { IconifyIconBuildResult } from './functions'; // Browser cache export { IconifyBrowserCacheType } from './functions'; diff --git a/components/svelte/src/offline-functions.ts b/components/svelte/src/offline-functions.ts index 647d510..54a65e8 100644 --- a/components/svelte/src/offline-functions.ts +++ b/components/svelte/src/offline-functions.ts @@ -1,5 +1,5 @@ import type { IconifyIcon, IconifyJSON } from '@iconify/types'; -import { fullIcon } from '@iconify/utils/lib/icon'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; import { parseIconSet } from '@iconify/utils/lib/icon-set/parse'; import { quicklyValidateIconSet } from '@iconify/utils/lib/icon-set/validate-basic'; import { render } from './render'; @@ -20,7 +20,7 @@ export function generateIcon(props: IconProps): RenderResult | null { typeof props.icon === 'string' ? storage[props.icon] : typeof props.icon === 'object' - ? fullIcon(props.icon) + ? { ...defaultIconProps, ...props.icon } : null; // Validate icon object @@ -42,7 +42,7 @@ export function generateIcon(props: IconProps): RenderResult | null { * @param data */ export function addIcon(name: string, data: IconifyIcon): void { - storage[name] = fullIcon(data); + storage[name] = { ...defaultIconProps, ...data }; } /** diff --git a/components/svelte/src/offline-iconify.ts b/components/svelte/src/offline-iconify.ts index 91100ea..c823826 100644 --- a/components/svelte/src/offline-iconify.ts +++ b/components/svelte/src/offline-iconify.ts @@ -1,6 +1,6 @@ // Types export type { IconifyJSON, IconifyIcon } from '@iconify/types'; -export type { IconifyIconSize } from '@iconify/utils/lib/customisations'; +export type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; // Types from props.ts export type { diff --git a/components/svelte/src/props.ts b/components/svelte/src/props.ts index 8c8e6a6..53182d7 100644 --- a/components/svelte/src/props.ts +++ b/components/svelte/src/props.ts @@ -1,7 +1,6 @@ import type { IconifyIcon } from '@iconify/types'; -import type { IconifyIconCustomisations as RawIconCustomisations } from '@iconify/utils/lib/customisations'; - -export { RawIconCustomisations }; +import type { IconifyIconCustomisations as RawIconifyIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; +import { defaultIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; /** * Icon render mode @@ -13,12 +12,20 @@ export { RawIconCustomisations }; */ export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg'; -// Allow rotation to be string /** * Icon customisations */ -export type IconifyIconCustomisations = RawIconCustomisations & { +export type IconifyIconCustomisations = RawIconifyIconCustomisations & { + // Allow rotation to be string rotate?: string | number; + + // Inline mode + inline?: boolean; +}; + +export const defaultExtendedIconCustomisations = { + ...defaultIconCustomisations, + inline: false, }; /** diff --git a/components/svelte/src/render.ts b/components/svelte/src/render.ts index a190e01..1e71ed7 100644 --- a/components/svelte/src/render.ts +++ b/components/svelte/src/render.ts @@ -1,8 +1,5 @@ import type { IconifyIcon } from '@iconify/types'; -import { - defaults, - mergeCustomisations, -} from '@iconify/utils/lib/customisations'; +import { mergeCustomisations } from '@iconify/utils/lib/customisations/merge'; import { flipFromString } from '@iconify/utils/lib/customisations/flip'; import { rotateFromString } from '@iconify/utils/lib/customisations/rotate'; import { iconToSVG } from '@iconify/utils/lib/svg/build'; @@ -10,6 +7,7 @@ import { replaceIDs } from '@iconify/utils/lib/svg/id'; import { iconToHTML } from '@iconify/utils/lib/svg/html'; import { svgToURL } from '@iconify/utils/lib/svg/url'; import type { IconProps, IconifyRenderMode } from './props'; +import { defaultExtendedIconCustomisations } from './props'; /** * Default SVG attributes @@ -85,8 +83,8 @@ export function render( props: IconProps ): RenderResult { const customisations = mergeCustomisations( - defaults, - props as typeof defaults + defaultExtendedIconCustomisations, + props ); // Check mode @@ -163,7 +161,14 @@ export function render( break; } // Copy missing property if it does not exist in customisations - if ((defaults as Record)[key] === void 0) { + if ( + ( + defaultExtendedIconCustomisations as Record< + string, + unknown + > + )[key] === void 0 + ) { componentProps[key] = value; } } @@ -174,7 +179,7 @@ export function render( const renderAttribs = item.attributes; // Inline display - if (item.inline) { + if (customisations.inline) { // Style overrides it style = 'vertical-align: -0.125em; ' + style; } diff --git a/components/svg-framework/src/iconify.ts b/components/svg-framework/src/iconify.ts index fa2f172..4191327 100644 --- a/components/svg-framework/src/iconify.ts +++ b/components/svg-framework/src/iconify.ts @@ -71,7 +71,7 @@ import { } from './observer/index'; import type { IconifyRenderMode, - ExtendedIconifyIconCustomisations as IconifyIconCustomisations, + IconifyIconCustomisations, } from './scanner/config'; /** diff --git a/components/svg-framework/src/iconify.without-api.ts b/components/svg-framework/src/iconify.without-api.ts index 27a3ec3..934ed50 100644 --- a/components/svg-framework/src/iconify.without-api.ts +++ b/components/svg-framework/src/iconify.without-api.ts @@ -27,7 +27,7 @@ import { } from './observer/index'; import type { IconifyRenderMode, - ExtendedIconifyIconCustomisations as IconifyIconCustomisations, + IconifyIconCustomisations, } from './scanner/config'; /** diff --git a/components/svg-framework/src/scanner/config.ts b/components/svg-framework/src/scanner/config.ts index 188f35c..829bed2 100644 --- a/components/svg-framework/src/scanner/config.ts +++ b/components/svg-framework/src/scanner/config.ts @@ -1,14 +1,12 @@ import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; -import { - defaultIconCustomisations, - IconifyIconCustomisations, -} from '@iconify/utils/lib/customisations/defaults'; +import type { IconifyIconCustomisations as RawIconifyIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; +import { defaultIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; /** * Add inline to customisations */ -export interface ExtendedIconifyIconCustomisations - extends IconifyIconCustomisations { +export interface IconifyIconCustomisations + extends RawIconifyIconCustomisations { inline?: boolean; } @@ -44,7 +42,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 64b292b..26932c4 100644 --- a/components/svg-framework/src/scanner/get-props.ts +++ b/components/svg-framework/src/scanner/get-props.ts @@ -6,23 +6,17 @@ import { IconifyRenderMode, inlineClass, } from './config'; -import type { - IconifyElementProps, - ExtendedIconifyIconCustomisations, -} from './config'; +import type { IconifyElementProps, IconifyIconCustomisations } from './config'; /** * Size attributes */ -const sizeAttributes: (keyof ExtendedIconifyIconCustomisations)[] = [ - 'width', - 'height', -]; +const sizeAttributes: (keyof IconifyIconCustomisations)[] = ['width', 'height']; /** * Boolean attributes */ -const booleanAttributes: (keyof ExtendedIconifyIconCustomisations)[] = [ +const booleanAttributes: (keyof IconifyIconCustomisations)[] = [ 'inline', 'hFlip', 'vFlip', diff --git a/components/vue/src/iconify.ts b/components/vue/src/iconify.ts index 0d71193..ffac7fc 100644 --- a/components/vue/src/iconify.ts +++ b/components/vue/src/iconify.ts @@ -13,7 +13,7 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types'; // Core import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; import { stringToIcon } from '@iconify/utils/lib/icon/name'; -import type { IconifyIconSize } from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions'; import { iconExists, @@ -29,7 +29,7 @@ import { buildIcon } from '@iconify/core/lib/builder/functions'; import { replaceIDs } from '@iconify/utils/lib/svg/id'; import { calculateSize } from '@iconify/utils/lib/svg/size'; import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build'; -import { fullIcon } from '@iconify/utils/lib/icon'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; // API import type { @@ -77,7 +77,6 @@ import type { // Properties import type { - RawIconCustomisations, IconifyIconOnLoad, IconProps, IconifyIconCustomisations, @@ -128,7 +127,7 @@ export { }; // Builder functions -export { RawIconCustomisations, IconifyIconBuildResult }; +export { IconifyIconBuildResult }; /* Browser cache */ export { IconifyBrowserCacheType }; @@ -226,9 +225,10 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') { /** * Empty icon data, rendered when icon is not available */ -const emptyIcon = fullIcon({ +const emptyIcon = { + ...defaultIconProps, body: '', -}); +}; /** * Component @@ -291,7 +291,7 @@ export const Icon = defineComponent({ this._name = ''; this.abortLoading(); return { - data: fullIcon(icon), + data: { ...defaultIconProps, ...icon }, }; } diff --git a/components/vue/src/offline.ts b/components/vue/src/offline.ts index a321a03..0fd366e 100644 --- a/components/vue/src/offline.ts +++ b/components/vue/src/offline.ts @@ -9,8 +9,8 @@ import type { ComponentCustomProps, } from 'vue'; import type { IconifyIcon, IconifyJSON } from '@iconify/types'; -import type { IconifyIconSize } from '@iconify/utils/lib/customisations'; -import { fullIcon } from '@iconify/utils/lib/icon'; +import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; import { parseIconSet } from '@iconify/utils/lib/icon-set/parse'; import { quicklyValidateIconSet } from '@iconify/utils/lib/icon-set/validate-basic'; import type { @@ -43,7 +43,7 @@ const storage: Record> = Object.create(null); * @param data */ export function addIcon(name: string, data: IconifyIcon): void { - storage[name] = fullIcon(data); + storage[name] = { ...defaultIconProps, ...data }; } /** @@ -86,7 +86,7 @@ export const Icon = defineComponent({ typeof props.icon === 'string' ? storage[props.icon] : typeof props.icon === 'object' - ? fullIcon(props.icon) + ? { ...defaultIconProps, ...props.icon } : null; // Validate icon object diff --git a/components/vue/src/props.ts b/components/vue/src/props.ts index 662d019..50fc4dd 100644 --- a/components/vue/src/props.ts +++ b/components/vue/src/props.ts @@ -1,7 +1,6 @@ import type { IconifyIcon } from '@iconify/types'; -import type { IconifyIconCustomisations as RawIconCustomisations } from '@iconify/utils/lib/customisations'; - -export { RawIconCustomisations }; +import type { IconifyIconCustomisations as RawIconifyIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; +import { defaultIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; /** * Icon render mode @@ -13,12 +12,20 @@ export { RawIconCustomisations }; */ export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg'; -// Allow rotation to be string /** * Icon customisations */ -export type IconifyIconCustomisations = RawIconCustomisations & { +export type IconifyIconCustomisations = RawIconifyIconCustomisations & { + // Allow rotation to be string rotate?: string | number; + + // Inline mode + inline?: boolean; +}; + +export const defaultExtendedIconCustomisations = { + ...defaultIconCustomisations, + inline: false, }; /** diff --git a/components/vue/src/render.ts b/components/vue/src/render.ts index 21c889a..ccb39ae 100644 --- a/components/vue/src/render.ts +++ b/components/vue/src/render.ts @@ -1,11 +1,7 @@ import { h } from 'vue'; import type { VNode } from 'vue'; import type { IconifyIcon } from '@iconify/types'; -import type { FullIconCustomisations } from '@iconify/utils/lib/customisations'; -import { - defaults, - mergeCustomisations, -} from '@iconify/utils/lib/customisations'; +import { mergeCustomisations } from '@iconify/utils/lib/customisations/merge'; import { flipFromString } from '@iconify/utils/lib/customisations/flip'; import { rotateFromString } from '@iconify/utils/lib/customisations/rotate'; import { iconToSVG } from '@iconify/utils/lib/svg/build'; @@ -17,6 +13,7 @@ import type { IconifyRenderMode, IconProps, } from './props'; +import { defaultExtendedIconCustomisations } from './props'; /** * Default SVG attributes @@ -102,9 +99,9 @@ export const render = ( ): VNode => { // Split properties const customisations = mergeCustomisations( - defaults, - props as IconifyIconCustomisations - ) as FullIconCustomisations; + defaultExtendedIconCustomisations, + props + ); const componentProps = { ...svgDefaults }; // Check mode @@ -177,7 +174,7 @@ export const render = ( if (value === true || value === 'true' || value === 1) { customisations[alias] = true; } - } else if (defaults[key] === void 0) { + } else if (defaultExtendedIconCustomisations[key] === void 0) { // Copy missing property if it does not exist in customisations componentProps[key] = value; } @@ -190,7 +187,7 @@ export const render = ( const renderAttribs = item.attributes; // Inline display - if (item.inline) { + if (customisations.inline) { style.verticalAlign = '-0.125em'; } diff --git a/components/vue2/src/iconify.ts b/components/vue2/src/iconify.ts index 1c886a3..2b4095b 100644 --- a/components/vue2/src/iconify.ts +++ b/components/vue2/src/iconify.ts @@ -6,7 +6,7 @@ import type { IconifyJSON, IconifyIcon } from '@iconify/types'; // Core import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; import { stringToIcon } from '@iconify/utils/lib/icon/name'; -import type { IconifyIconSize } from '@iconify/utils/lib/customisations'; +import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions'; import { iconExists, @@ -22,7 +22,7 @@ import { buildIcon } from '@iconify/core/lib/builder/functions'; import { replaceIDs } from '@iconify/utils/lib/svg/id'; import { calculateSize } from '@iconify/utils/lib/svg/size'; import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build'; -import { fullIcon } from '@iconify/utils/lib/icon'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; // API import type { @@ -66,7 +66,6 @@ import type { // Properties import type { - RawIconCustomisations, IconifyIconOnLoad, IconProps, IconifyIconCustomisations, @@ -115,7 +114,7 @@ export { }; // Builder functions -export { RawIconCustomisations, IconifyIconBuildResult }; +export { IconifyIconBuildResult }; /* Browser cache */ export { IconifyBrowserCacheType }; @@ -213,9 +212,10 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') { /** * Empty icon data, rendered when icon is not available */ - const emptyIcon = fullIcon({ +const emptyIcon = { + ...defaultIconProps, body: '', -}); +}; /** * Component @@ -275,7 +275,7 @@ export const Icon = Vue.extend({ this._name = ''; this.abortLoading(); return { - data: fullIcon(icon), + data: {...defaultIconProps, ...icon}, }; } diff --git a/components/vue2/src/offline.ts b/components/vue2/src/offline.ts index 50430ba..3b7bf82 100644 --- a/components/vue2/src/offline.ts +++ b/components/vue2/src/offline.ts @@ -2,8 +2,8 @@ import Vue from 'vue'; import type { CreateElement, VNode } from 'vue'; import type { ExtendedVue } from 'vue/types/vue'; import type { IconifyIcon, IconifyJSON } from '@iconify/types'; -import type { IconifyIconSize } from '@iconify/utils/lib/customisations'; -import { fullIcon } from '@iconify/utils/lib/icon'; +import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults'; +import { defaultIconProps } from '@iconify/utils/lib/icon/defaults'; import { parseIconSet } from '@iconify/utils/lib/icon-set/parse'; import { quicklyValidateIconSet } from '@iconify/utils/lib/icon-set/validate-basic'; import type { @@ -39,7 +39,7 @@ const storage: Record> = Object.create(null); * @param data */ export function addIcon(name: string, data: IconifyIcon): void { - storage[name] = fullIcon(data); + storage[name] = {...defaultIconProps, ...data}; } /** @@ -82,7 +82,7 @@ export const Icon = Vue.extend({ typeof props.icon === 'string' ? storage[props.icon] : typeof props.icon === 'object' - ? fullIcon(props.icon) + ? {...defaultIconProps, ...props.icon} : null; // Validate icon object diff --git a/components/vue2/src/props.ts b/components/vue2/src/props.ts index 4756673..ea83cce 100644 --- a/components/vue2/src/props.ts +++ b/components/vue2/src/props.ts @@ -1,14 +1,21 @@ import type { IconifyIcon } from '@iconify/types'; -import type { IconifyIconCustomisations as RawIconCustomisations } from '@iconify/utils/lib/customisations'; +import type { IconifyIconCustomisations as RawIconifyIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; +import { defaultIconCustomisations } from '@iconify/utils/lib/customisations/defaults'; -export { RawIconCustomisations }; - -// Allow rotation to be string /** * Icon customisations */ -export type IconifyIconCustomisations = RawIconCustomisations & { + export type IconifyIconCustomisations = RawIconifyIconCustomisations & { + // Allow rotation to be string rotate?: string | number; + + // Inline mode + inline?: boolean; +}; + +export const defaultExtendedIconCustomisations = { + ...defaultIconCustomisations, + inline: false, }; /** diff --git a/components/vue2/src/render.ts b/components/vue2/src/render.ts index 3f4f53d..b4d0ce9 100644 --- a/components/vue2/src/render.ts +++ b/components/vue2/src/render.ts @@ -1,16 +1,15 @@ import type _Vue from 'vue'; import type { VNode, VNodeData, RenderContext } from 'vue'; import type { IconifyIcon } from '@iconify/types'; -import type { FullIconCustomisations } from '@iconify/utils/lib/customisations'; import { - defaults, mergeCustomisations, -} from '@iconify/utils/lib/customisations'; +} from '@iconify/utils/lib/customisations/merge'; import { flipFromString } from '@iconify/utils/lib/customisations/flip'; import { rotateFromString } from '@iconify/utils/lib/customisations/rotate'; import { iconToSVG } from '@iconify/utils/lib/svg/build'; import { replaceIDs } from '@iconify/utils/lib/svg/id'; import type { IconifyIconCustomisations, IconProps } from './props'; +import { defaultExtendedIconCustomisations } from './props'; /** * Default SVG attributes @@ -56,9 +55,9 @@ export const render = ( ): VNode => { // Split properties const customisations = mergeCustomisations( - defaults, - props as IconifyIconCustomisations - ) as FullIconCustomisations; + defaultExtendedIconCustomisations, + props + ); const componentProps = { ...svgDefaults }; // Style in Vue 2 components is always passed to rendered component, so no point in parsing it @@ -122,7 +121,7 @@ export const render = ( if (value === true || value === 'true' || value === 1) { customisations[alias] = true; } - } else if (defaults[key] === void 0) { + } else if (defaultExtendedIconCustomisations[key] === void 0) { // Copy missing property if it does not exist in customisations componentProps[key] = value; } @@ -137,7 +136,7 @@ export const render = ( componentProps[key] = item.attributes[key]; } - if (item.inline) { + if (customisations.inline) { style.verticalAlign = '-0.125em'; }