From 027d214ae8aed9744f31727106f609745cc3f63a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arma=C4=9Fan?= <broccolinisoup@github.com>
Date: Thu, 18 May 2023 09:22:35 +1000
Subject: [PATCH] StyledOcticon/Octicon: Update the render func to use
 `React.forwardRef()` (#3293)

* forwardref styl octiocns

* remove the comment

* add changeset
---
 .changeset/spicy-shoes-press.md | 5 +++++
 src/Octicon/Octicon.tsx         | 7 ++++---
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/spicy-shoes-press.md

diff --git a/.changeset/spicy-shoes-press.md b/.changeset/spicy-shoes-press.md
new file mode 100644
index 0000000000..cc1af0c28f
--- /dev/null
+++ b/.changeset/spicy-shoes-press.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Octicons (previously known StyledOcticons) to use React.forwardRef()
diff --git a/src/Octicon/Octicon.tsx b/src/Octicon/Octicon.tsx
index 8eaa7d37a3..5e331e9a2a 100644
--- a/src/Octicon/Octicon.tsx
+++ b/src/Octicon/Octicon.tsx
@@ -6,9 +6,10 @@ import {ComponentProps} from '../utils/types'
 
 type StyledOcticonProps = {icon: React.ElementType; color?: string} & IconProps
 
-function Icon({icon: IconComponent, ...rest}: StyledOcticonProps) {
-  return <IconComponent {...rest} />
-}
+const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref<SVGSVGElement>) => {
+  const {icon: IconComponent, ...rest} = props
+  return <IconComponent {...rest} ref={ref} />
+})
 
 const Octicon = styled(Icon)<SxProp>`
   ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}