mirror of
https://github.com/iconify/iconify.git
synced 2025-01-06 07:20:40 +00:00
Update components
This commit is contained in:
parent
9ad23abd6a
commit
ce135b6cf5
@ -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<IconifyIconProps> {
|
||||
this._icon = null;
|
||||
|
||||
// Render object
|
||||
return render(fullIcon(icon), this.args, '');
|
||||
return render({ ...defaultIconProps, ...icon }, this.args, '');
|
||||
}
|
||||
|
||||
// Already loaded
|
||||
|
@ -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 };
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -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;';
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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<IconRef, IconProps>(
|
||||
* @param data
|
||||
*/
|
||||
export function addIcon(name: string, data: IconifyIcon): void {
|
||||
storage[name] = fullIcon(data);
|
||||
storage[name] = { ...defaultIconProps, ...data };
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -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<IconifyIconCustomisations> = {
|
||||
...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';
|
||||
}
|
||||
|
||||
|
@ -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?
|
||||
|
@ -37,7 +37,7 @@ export {
|
||||
} from './functions';
|
||||
|
||||
// Builder functions
|
||||
export { RawIconCustomisations, IconifyIconBuildResult } from './functions';
|
||||
export { IconifyIconBuildResult } from './functions';
|
||||
|
||||
// Browser cache
|
||||
export { IconifyBrowserCacheType } from './functions';
|
||||
|
@ -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 };
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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 {
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -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<string, unknown>)[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;
|
||||
}
|
||||
|
@ -71,7 +71,7 @@ import {
|
||||
} from './observer/index';
|
||||
import type {
|
||||
IconifyRenderMode,
|
||||
ExtendedIconifyIconCustomisations as IconifyIconCustomisations,
|
||||
IconifyIconCustomisations,
|
||||
} from './scanner/config';
|
||||
|
||||
/**
|
||||
|
@ -27,7 +27,7 @@ import {
|
||||
} from './observer/index';
|
||||
import type {
|
||||
IconifyRenderMode,
|
||||
ExtendedIconifyIconCustomisations as IconifyIconCustomisations,
|
||||
IconifyIconCustomisations,
|
||||
} from './scanner/config';
|
||||
|
||||
/**
|
||||
|
@ -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<ExtendedIconifyIconCustomisations>;
|
||||
customisations: Required<IconifyIconCustomisations>;
|
||||
|
||||
// Render mode
|
||||
mode?: IconifyRenderMode;
|
||||
|
@ -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',
|
||||
|
@ -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 },
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -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<string, Required<IconifyIcon>> = 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
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -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';
|
||||
}
|
||||
|
||||
|
@ -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},
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -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<string, Required<IconifyIcon>> = 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
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -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';
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user