From 61efa8d4d14d17ea22a4d2ce938f8dcdd1194b2a Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Wed, 3 Jul 2024 09:35:58 -0500
Subject: [PATCH 1/2] feat(UnderlineNavItem): add support for icons as
 React.ReactElement

---
 .../src/UnderlineNav/UnderlineNav.test.tsx     | 18 +++++++++++++++++-
 .../src/UnderlineNav/UnderlineNavItem.tsx      |  2 +-
 .../components/UnderlineTabbedInterface.tsx    |  8 ++------
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/UnderlineNav/UnderlineNav.test.tsx b/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
index ae1383d5bab4..c3b113981de8 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {render} from '@testing-library/react'
+import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type {IconProps} from '@primer/octicons-react'
 import {
@@ -186,6 +186,22 @@ describe('UnderlineNav', () => {
     // We are expecting a left value back, that way we know the `getAnchoredPosition` ran.
     expect(results).toEqual(expect.objectContaining({left: 0}))
   })
+
+  it('should support icons passed in as an element', () => {
+    render(
+      <UnderlineNav aria-label="Repository">
+        <UnderlineNav.Item aria-current="page" icon={<CodeIcon data-testid="page-one-icon" />}>
+          Page one
+        </UnderlineNav.Item>
+        <UnderlineNav.Item icon={<IssueOpenedIcon data-testid="page-two-icon" />}>Page two</UnderlineNav.Item>
+        <UnderlineNav.Item icon={<GitPullRequestIcon data-testid="page-three-icon" />}>Page three</UnderlineNav.Item>
+      </UnderlineNav>,
+    )
+
+    expect(screen.getByTestId('page-one-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('page-two-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('page-three-icon')).toBeInTheDocument()
+  })
 })
 
 describe('Keyboard Navigation', () => {
diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
index f1b7e74f2097..f63c38c270b2 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
@@ -38,7 +38,7 @@ export type UnderlineNavItemProps = {
   /**
    *  Icon before the text
    */
-  icon?: React.FunctionComponent<IconProps>
+  icon?: React.FunctionComponent<IconProps> | React.ReactElement
   /**
    * Renders `UnderlineNav.Item` as given component i.e. react-router's Link
    **/
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 38acc6aafd51..f00ae0bd750f 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -193,7 +193,7 @@ export type UnderlineItemProps = {
   iconsVisible?: boolean
   loadingCounters?: boolean
   counter?: number | string
-  icon?: FC<IconProps>
+  icon?: FC<IconProps> | React.ReactElement
   id?: string
 } & SxProp
 
@@ -213,11 +213,7 @@ export const UnderlineItem = forwardRef(
   ) => {
     return (
       <StyledUnderlineItem ref={forwardedRef} as={as} sx={sxProp} {...rest}>
-        {iconsVisible && Icon && (
-          <span data-component="icon">
-            <Icon />
-          </span>
-        )}
+        {iconsVisible && Icon && <span data-component="icon">{typeof Icon === 'function' ? <Icon /> : Icon}</span>}
         {children && (
           <span data-component="text" data-content={children}>
             {children}

From 2faaf858f22a687496c61b47036a021cb2d5c18f Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Wed, 3 Jul 2024 09:36:56 -0500
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/bright-islands-kick.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/bright-islands-kick.md

diff --git a/.changeset/bright-islands-kick.md b/.changeset/bright-islands-kick.md
new file mode 100644
index 000000000000..a1cce3b79d92
--- /dev/null
+++ b/.changeset/bright-islands-kick.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for providing icons as an element to UnderlineNavItem