Resolve React Icon type problems

packages/react/src/iconify.ts

@@ -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(
+export const Icon = React.forwardRef<IconRef, IconProps>(function Icon(
-	(props: IconProps, ref?: IconRef) => {
+	props,
-		const newProps = {
+	ref
-			...props,
+) {
-			_ref: ref,
+	const newProps = {
-			_inline: false,
+		...props,
-		};
+		_ref: ref,
-		return React.createElement(IconComponent, newProps);
+		_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(
+export const InlineIcon = React.forwardRef<IconRef, IconProps>(
-	(props: IconProps, ref?: IconRef) => {
+	function InlineIcon(props, ref) {
 		const newProps = { ...props, _ref: ref, _inline: true };
 		return React.createElement(IconComponent, newProps);
 	}

packages/react/src/offline.ts

@@ -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(
+export const Icon = React.forwardRef<IconRef, IconProps>(function Icon(
-	(props: IconProps, ref?: IconRef) => component(props, false, ref)
+	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(
+export const InlineIcon = React.forwardRef<IconRef, IconProps>(
-	(props: IconProps, ref?: IconRef) => component(props, true, ref)
+	function InlineIcon(props, ref) {
+		return component(props, true, ref);
+	}
 );
 
 /**

packages/react/src/props.ts

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

packages/react/src/render.ts

@@ -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
+		props as unknown // TODO: Fix me
-	) as FullIconCustomisations;
+	);
 
 	// Create style
 	const style =