Add @phosphor-icons/react to the import optimization list

Author: ccarse

Diff for: docs/01-app/04-api-reference/05-config/01-next-config-js/optimizePackageImports.mdx

@@ -19,28 +19,29 @@ module.exports = {
 
 The following libraries are optimized by default:
 
-- `lucide-react`
-- `date-fns`
-- `lodash-es`
-- `ramda`
-- `antd`
-- `react-bootstrap`
-- `ahooks`
 - `@ant-design/icons`
-- `@headlessui/react`
 - `@headlessui-float/react`
+- `@headlessui/react`
 - `@heroicons/react/20/solid`
-- `@heroicons/react/24/solid`
 - `@heroicons/react/24/outline`
-- `@visx/visx`
-- `@tremor/react`
-- `rxjs`
-- `@mui/material`
-- `@mui/icons-material`
-- `recharts`
-- `react-use`
+- `@heroicons/react/24/solid`
 - `@material-ui/core`
 - `@material-ui/icons`
+- `@mui/icons-material`
+- `@mui/material`
+- `@phosphor-icons/react`
 - `@tabler/icons-react`
+- `@tremor/react`
+- `@visx/visx`
+- `ahooks`
+- `antd`
+- `date-fns`
+- `lodash-es`
+- `lucide-react`
 - `mui-core`
+- `ramda`
+- `react-bootstrap`
 - `react-icons/*`
+- `react-use`
+- `recharts`
+- `rxjs`

Diff for: packages/next/src/server/config.ts

@@ -1013,6 +1013,7 @@ function assignDefaults(
       '@effect/opentelemetry',
       '@material-ui/core',
       '@material-ui/icons',
+      '@phosphor-icons/react',
       '@tabler/icons-react',
       'mui-core',
       // We don't support wildcard imports for these configs, e.g. `react-icons/*`

Diff for: test/development/basic/barrel-optimization/barrel-optimization.test.ts

@@ -16,6 +16,7 @@ import { nextTestSetup } from 'e2e-utils'
           '@heroicons/react': '2.0.18',
           '@visx/visx': '3.3.0',
           'recursive-barrel': '1.0.0',
+          '@phosphor-icons/react': '2.1.7',
         },
       })
 
@@ -115,6 +116,11 @@ import { nextTestSetup } from 'e2e-utils'
         expect(html).toContain('<linearGradient')
       })
 
+      it('should support @phosphor-icons/react', async () => {
+        const html = await next.render('/phosphor-icons')
+        expect(html).toContain('<svg xmlns="http://www.w3.org/2000/svg"')
+      })
+
       it('should not break "use client" directive in optimized packages', async () => {
         const html = await next.render('/client')
         expect(html).toContain('this is a client component')

Diff for: test/development/basic/barrel-optimization/fixture/pages/phosphor-icons.js

@@ -0,0 +1,11 @@
+import { Horse, Heart, Cube } from '@phosphor-icons/react'
+
+export default function Page() {
+  return (
+    <>
+      <Horse />
+      <Heart color="#AE2983" weight="fill" size={32} />
+      <Cube color="teal" weight="duotone" />
+    </>
+  )
+}