agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-09-20 01:09:04 +00:00
Code Issues Releases Activity

Resolve React Icon type problems

Browse Source
This commit is contained in:
nghiepit 2021-08-16 14:55:28 +07:00
parent 258af29f7c
commit 8acdc59844
4 changed files with 37 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/react/src/iconify.ts
View File

@ -486,34 +486,30 @@ class IconComponent extends React.Component<
}
}
/**
* Type for exported components
*/
export type Component = (props: IconProps) => JSX.Element;
/**
* Block icon
*
* @param props - Component properties
*/
export const Icon: Component = React.forwardRef(
(props: IconProps, ref?: IconRef) => {
const newProps = {
...props,
_ref: ref,
_inline: false,
};
return React.createElement(IconComponent, newProps);
}
);
export const Icon = React.forwardRef<IconRef, IconProps>(function Icon(
props,
ref
) {
const newProps = {
...props,
_ref: ref,
_inline: false,
};
return React.createElement(IconComponent, newProps);
});
/**
* Inline icon (has negative verticalAlign that makes it behave like icon font)
*
* @param props - Component properties
*/
export const InlineIcon: Component = React.forwardRef(
(props: IconProps, ref?: IconRef) => {
export const InlineIcon = React.forwardRef<IconRef, IconProps>(
function InlineIcon(props, ref) {
const newProps = { ...props, _ref: ref, _inline: true };
return React.createElement(IconComponent, newProps);
}

24
packages/react/src/offline.ts
View File

@ -42,7 +42,7 @@ const storage: Record<string, Required<IconifyIcon>> = Object.create(null);
function component(
props: IconProps,
inline: boolean,
ref?: IconRef
ref?: React.ForwardedRef<IconRef>
): JSX.Element {
// Split properties
const icon =
@ -64,30 +64,30 @@ function component(
}
// Valid icon: render it
return render(icon, props, inline, ref);
return render(icon, props, inline, ref as IconRef);
}
/**
* Type for exported components
*/
export type Component = (props: IconProps) => JSX.Element;
/**
* Block icon
*
* @param props - Component properties
*/
export const Icon: Component = React.forwardRef(
(props: IconProps, ref?: IconRef) => component(props, false, ref)
);
export const Icon = React.forwardRef<IconRef, IconProps>(function Icon(
props,
ref
) {
return component(props, false, ref);
});
/**
* Inline icon (has negative verticalAlign that makes it behave like icon font)
*
* @param props - Component properties
*/
export const InlineIcon: Component = React.forwardRef(
(props: IconProps, ref?: IconRef) => component(props, true, ref)
export const InlineIcon = React.forwardRef<IconRef, IconProps>(
function InlineIcon(props, ref) {
return component(props, true, ref);
}
);
/**

9
packages/react/src/props.ts
View File

@ -1,4 +1,4 @@
import type { HTMLProps, RefAttributes } from 'react';
import type { SVGProps, RefAttributes } from 'react';
import type { IconifyIcon } from '@iconify/types';
import type { IconifyIconCustomisations as RawIconCustomisations } from '@iconify/utils/lib/customisations';
@ -8,7 +8,10 @@ export { RawIconCustomisations };
/**
* Icon customisations
*/
export type IconifyIconCustomisations = Omit<RawIconCustomisations, "rotate"> & {
export type IconifyIconCustomisations = Omit<
RawIconCustomisations,
'rotate'
> & {
rotate?: string | number;
};
@ -41,7 +44,7 @@ export interface IconifyIconProps extends IconifyIconCustomisations {
/**
* React component properties: generic element for Icon component, SVG for generated component
*/
type IconifyElementProps = HTMLProps<SVGSVGElement>;
type IconifyElementProps = SVGProps<SVGSVGElement>;
export type IconRef = RefAttributes<SVGSVGElement>;

12
packages/react/src/render.ts
View File

@ -1,5 +1,5 @@
import type { SVGProps } from 'react';
import React from 'react';
import type { SVGProps } from 'react';
import type { IconifyIcon } from '@iconify/types';
import type { FullIconCustomisations } from '@iconify/utils/lib/customisations';
import {
@ -13,12 +13,12 @@ import {
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, IconRef } from './props';
import type { IconProps, IconRef } from './props';
/**
* Default SVG attributes
*/
const svgDefaults: SVGProps<SVGElement> = {
const svgDefaults: SVGProps<SVGSVGElement> = {
'xmlns': 'http://www.w3.org/2000/svg',
'xmlnsXlink': 'http://www.w3.org/1999/xlink',
'aria-hidden': true,
@ -29,7 +29,7 @@ const svgDefaults: SVGProps<SVGElement> = {
/**
* Default values for customisations for inline icon
*/
const inlineDefaults = { ...defaults, inline: true } as FullIconCustomisations;
const inlineDefaults: FullIconCustomisations = { ...defaults, inline: true };
/**
* Render icon
@ -53,8 +53,8 @@ export const render = (
// Get all customisations
const customisations = mergeCustomisations(
defaultProps,
props as IconifyIconCustomisations
) as FullIconCustomisations;
props as unknown // TODO: Fix me
);
// Create style
const style =