Update peer dependecy react version and the octicon func to use React…

….forwardRef
primer · May 3, 2023 · d74b2e6 · d74b2e6
1 parent 6c94e0e
commit d74b2e6
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 37 deletions.
diff --git a/lib/octicons_react/package.json b/lib/octicons_react/package.json
@@ -69,7 +69,7 @@
     "typescript": "^4.8.3"
   },
   "peerDependencies": {
-    "react": ">=15"
+    "react": ">=16.3"
   },
   "engines": {
     "node": ">=8"

diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
@@ -10,43 +10,49 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
   const svgDataByHeight = getSVGData()
   const heights = Object.keys(svgDataByHeight)
 
-  function Icon({
-    'aria-label': ariaLabel,
-    tabIndex,
-    className = defaultClassName,
-    fill = 'currentColor',
-    size = 16,
-    verticalAlign = 'text-bottom'
-  }) {
-    const height = sizeMap[size] || size
-    const naturalHeight = closestNaturalHeight(heights, height)
-    const naturalWidth = svgDataByHeight[naturalHeight].width
-    const width = height * (naturalWidth / naturalHeight)
-    const path = svgDataByHeight[naturalHeight].path
+  const Icon = React.forwardRef(
+    (
+      {
+        'aria-label': ariaLabel,
+        tabIndex,
+        className = defaultClassName,
+        fill = 'currentColor',
+        size = 16,
+        verticalAlign = 'text-bottom'
+      },
+      forwardedRef
+    ) => {
+      const height = sizeMap[size] || size
+      const naturalHeight = closestNaturalHeight(heights, height)
+      const naturalWidth = svgDataByHeight[naturalHeight].width
+      const width = height * (naturalWidth / naturalHeight)
+      const path = svgDataByHeight[naturalHeight].path
 
-    return (
-      <svg
-        aria-hidden={ariaLabel ? 'false' : 'true'}
-        tabIndex={tabIndex}
-        focusable={tabIndex >= 0 ? 'true' : 'false'}
-        aria-label={ariaLabel}
-        role="img"
-        className={className}
-        viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
-        width={width}
-        height={height}
-        fill={fill}
-        style={{
-          display: 'inline-block',
-          userSelect: 'none',
-          verticalAlign,
-          overflow: 'visible'
-        }}
-      >
-        {path}
-      </svg>
-    )
-  }
+      return (
+        <svg
+          ref={forwardedRef}
+          aria-hidden={ariaLabel ? 'false' : 'true'}
+          tabIndex={tabIndex}
+          focusable={tabIndex >= 0 ? 'true' : 'false'}
+          aria-label={ariaLabel}
+          role="img"
+          className={className}
+          viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
+          width={width}
+          height={height}
+          fill={fill}
+          style={{
+            display: 'inline-block',
+            userSelect: 'none',
+            verticalAlign,
+            overflow: 'visible'
+          }}
+        >
+          {path}
+        </svg>
+      )
+    }
+  )
 
   Icon.displayName = name