2
0
mirror of https://github.com/iconify/iconify.git synced 2024-09-19 00:39:02 +00:00

Update components

This commit is contained in:
Vjacheslav Trushkin 2022-06-19 19:16:11 +03:00
parent 9ad23abd6a
commit ce135b6cf5
26 changed files with 163 additions and 140 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -37,7 +37,7 @@ export {
} from './functions';
// Builder functions
export { RawIconCustomisations, IconifyIconBuildResult } from './functions';
export { IconifyIconBuildResult } from './functions';
// Browser cache
export { IconifyBrowserCacheType } from './functions';

View File

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

View File

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

View File

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

View File

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

View File

@ -71,7 +71,7 @@ import {
} from './observer/index';
import type {
IconifyRenderMode,
ExtendedIconifyIconCustomisations as IconifyIconCustomisations,
IconifyIconCustomisations,
} from './scanner/config';
/**

View File

@ -27,7 +27,7 @@ import {
} from './observer/index';
import type {
IconifyRenderMode,
ExtendedIconifyIconCustomisations as IconifyIconCustomisations,
IconifyIconCustomisations,
} from './scanner/config';
/**

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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