Forward ref for generated icons

packages/react-icons/scripts/task_all.ts

@@ -30,11 +30,11 @@
 
     await write(
       [icon.id, "index.js"],
-      "// THIS FILE IS AUTO GENERATED\nvar GenIcon = require('../lib').GenIcon\n",
+      "// THIS FILE IS AUTO GENERATED\nvar IconWithRef = require('../lib').IconWithRef\nvar React = require('react')\n",
     );
     await write(
       [icon.id, "index.mjs"],
-      "// THIS FILE IS AUTO GENERATED\nimport { GenIcon } from '../lib/index.mjs';\n",
+      "// THIS FILE IS AUTO GENERATED\nimport { IconWithRef } from '../lib/index.mjs';\nimport React from 'react';\n",
     );
     await write(
       [icon.id, "index.d.ts"],
@@ -60,7 +60,7 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export async function writeIconModule(
   icon: IconDefinition,
   { DIST, LIB, rootDir }: TaskContext,
 ) {
   const exists = new Set(); // for remove duplicate
   for (const content of icon.contents) {

packages/react-icons/scripts/templates.ts

@@ -10,15 +10,14 @@ export function iconRowTemplate(
   switch (type) {
     case "module":
       return (
-        `export function ${formattedName} (props) {\n` +
-        `  return GenIcon(${JSON.stringify(iconData)})(props);\n` +
-        `};\n`
+        `export const ${formattedName} = React.forwardRef((props, ref) =>
+          React.createElement(IconWithRef, { ...props, ref, iconTree: ${JSON.stringify(iconData)} }));
+      \n`
       );
     case "common":
       return (
-        `module.exports.${formattedName} = function ${formattedName} (props) {\n` +
-        `  return GenIcon(${JSON.stringify(iconData)})(props);\n` +
-        `};\n`
+        `module.exports.${formattedName} = React.forwardRef((props, ref) =>
+          React.createElement(IconWithRef, { ...props, ref, iconTree: ${JSON.stringify(iconData)} }));\n`
       );
     case "dts":
       return `export declare const ${formattedName}: IconType;\n`;

packages/react-icons/src/iconBase.tsx

@@ -20,14 +20,27 @@ function Tree2Element(tree: IconTree[]): React.ReactElement[] {
     )
   );
 }
+
 export function GenIcon(data: IconTree) {
-  // eslint-disable-next-line react/display-name
-  return (props: IconBaseProps) => (
-    <IconBase attr={{ ...data.attr }} {...props}>
-      {Tree2Element(data.child)}
+  return function GenIconBase(props: IconBaseProps) {
+    return (
+      <IconBase attr={{ ...data.attr }} {...props}>
+        {Tree2Element(data.child)}
+      </IconBase>
+    );
+  }
+}
+
+export const IconWithRef = React.forwardRef<SVGSVGElement, IconBaseProps & { iconTree: IconTree }>((
+  props, ref): JSX.Element => {
+  const { iconTree, ...rest } = props;
+  return (
+    <IconBase ref={ref} attr={{ ...iconTree.attr }} {...rest}>
+      {Tree2Element(iconTree.child)}
     </IconBase>
   );
-}
+})
+IconWithRef.displayName = "GenIcon";
 
 export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
   children?: React.ReactNode;
@@ -37,9 +50,8 @@ export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
 }
 
 export type IconType = (props: IconBaseProps) => JSX.Element;
-export function IconBase(
-  props: IconBaseProps & { attr?: Record<string, string> }
-): JSX.Element {
+export const IconBase = React.forwardRef<SVGSVGElement, IconBaseProps & { attr?: Record<string, string> }>((
+  props, ref): JSX.Element => {
   const elem = (conf: IconContext) => {
     const { attr, size, title, ...svgProps } = props;
     const computedSize = size || conf.size || "1em";
@@ -50,6 +62,7 @@ export function IconBase(
 
     return (
       <svg
+        ref={ref}
         stroke="currentColor"
         fill="currentColor"
         strokeWidth="0"
@@ -79,4 +92,5 @@ export function IconBase(
   ) : (
     elem(DefaultContext)
   );
-}
+})
+IconBase.displayName = "IconBase";