• I'll bring modifications for start a PR refac of the exportations in the src/index.ts, because a lot of lines repeat.
• a proposal for new name of "GameController" because it more generic and I encountered "Joystick" to fit well in this case and compatible with the visual icon.
• at the core\src\icons.ts I think it more comprehensible the legacy icons being presented in the list as such as this example:

 name: "file-dashed",
    pascal_name: "FileDashed",
    legacy: {
      alias_name: "file-dotted",
      pascal_name: "FileDotted",
      changed_in: 2.0,
    },

  { ...........,
    published_in: 1.4,
    updated_in: 1.4,
  },

  { ..........,
    published_in: 1.4,
  },

Describe the bug

When I try to use the icons in a nextjs project on node 20.12.0 I get the following error.

Cannot find package '/pathtoproject/node_modules/@phosphor-icons/react/dist/node_modules/.pnpm/[email protected]/node_modules/react/package.json'

Steps to Reproduce

Try using it in a node 20 react project

Expected behavior

No errors

Context (please complete the following information):

• OS: Mac OS 14.4
• @phosphor-icons/react
• Version 2.1.4

When I attempt to use the dist/ssr icons, i see this error:

Could not find a declaration file for module '@phosphor-icons/react/dist/ssr'. 'node_modules/@phosphor-icons/react/dist/ssr/index.mjs' implicitly has an 'any' type.
  There are types at '/node_modules/@phosphor-icons/react/dist/ssr/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@phosphor-icons/react' library may need to update its package.json or typings.ts(7016)

I was trying to make @phosphor-icons/react work with the new modularized imports feature in Next.js.

It should:

1. Improve the bundle size
2. Increase compilation speed thanks to skipping unused files.

I tried adding this configuration to my next.config.js:

const config = {
// ...
  modularizeImports: {
    '@phosphor-icons/react': {
      transform: '@phosphor-icons/react/dist/icons/{{member}}',
    },
  },
// ... 
}

Error: Package subpath './Trash' is not defined by "exports" in /Users/[REDACTED]/node_modules/@phosphor-icons/react/package.json 

{
  "exports": {
    ".": {
      "import": "./dist/index.es.js"
    },
    "./*": {
      "import": "./dist/icons/*.es.js"
    }
  },
}

Could this be the same issue as #41? I would appreciate any guidance on how to resolve this error.

Error message:

The path "@phosphor-icons/react" is imported in app/icons/index.ts but "@phosphor-icons/react" was not found in your node_modules. Did you forget to install it?

I'm using the package in a Remix app
Node version: v18.15.0
My package.json: "@phosphor-icons/react": "^2.0.6"

When trying to import from @phosphor-icons/react/dist/ssr, I get the following error:

Could not find a declaration file for module '@phosphor-icons/react/dist/ssr'. '<redacted>/node_modules/@phosphor-icons/react/dist/ssr/index.mjs' implicitly has an 'any' type.
  There are types at '<redacted>/node_modules/@phosphor-icons/react/dist/ssr/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@phosphor-icons/react' library may need to update its package.json or typings.ts(7016)

Hello,
I try using this instead the previous phosphor-react but found an issue It's failing to compile with my project, and had to revert.
seems similar to this issue on vue: phosphor-icons/vue#23

My project is using
react 18
rollup v3

The error

ERROR in ./node_modules/@phosphor-icons/react/dist/lib/IconBase.es.js 25:16
Module parse failed: Unexpected token (25:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ref: i,
|       xmlns: "http://www.w3.org/2000/svg",
>       width: t ?? o,
|       height: t ?? o,
|       fill: s ?? w,
 @ ./node_modules/@phosphor-icons/react/dist/icons/XSquare.es.js 3:0-38 35:52-53
 @ ./node_modules/@phosphor-icons/react/dist/index.es.js
 @ ./stories/timeStone/icons/icons.stories.jsx
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js

Discussed in #95

This is the issue description I get from typing:
import { Fish } from '@phosphor-icons/react/dist/ssr';

Could not find a declaration file for module '@phosphor-icons/react/dist/ssr'. 'C:/Work/Projekty/Dezarto/dezarto-next/node_modules/.pnpm/@phosphor-icons[email protected][email protected][email protected]/node_modules/@phosphor-icons/react/dist/ssr/index.mjs' implicitly has an 'any' type.
There are types at 'c:/Work/Projekty/Dezarto/dezarto-next/node_modules/@phosphor-icons/react/dist/ssr/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@phosphor-icons/react' library may need to update its package.json or typings.ts(7016)

Despite that, the icon renders correctly in dev. It does, however, disable autocomplete suggestions in the editor, which makes working with icons harder.

Hello we're seeing an issue when consuming our toolkit library in a new project.

I'll try to give a brief description of the project structure since it's quite big.

Our Component Toolkit Lib

This library contains lots of react components as well as Icons and is bundled and then consume via npm in the child application. The library is using styled-components and uses a ThemeProvider to wrap our application.

Since we're using many different Icons from phosphor and want to "theme" them in a common way, we created a component called Icon which accepts a recognised IconName. We then use that name to map it to an Icon within @phosphor/react

Example of our icon-map.ts file:

import { Armchair, Baby } from '@phosphor/react'

const iconMap: Record<IconName, Icon> = {
  armchair: Armchair,
  baby: Baby
}

export default iconMap

// This is a simplified version but the pattern is correct

type IconProps = {
  name: 'armchair' | 'baby'
  color: string
}

const Icon: FC<IconProps> = ({ name, color }) => {
  const Component = iconMap[name]
  
  return <Component color={color} />
}

export const start = () => {
  ReactDOM.render(
    <ThemeProvider theme='default'>
      <div>This is our application</div>
    </ThemeProvider>,
    document.getElementById('root'),
  )
}

"dependencies": {
  "@reduxjs/toolkit": "^1.9.5",
  "react": "^18.0.2",
  "react-dom": "^18.0.2",
  "react-redux": "^8.1.2",
  "@phosphor-icons/react": "^2.0.6"
},
"devDependencies": {
  "@babel/cli": "^7.21.0",
  "@babel/core": "^7.21.0",
  "@babel/plugin-proposal-class-properties": "^7.0.0",
  "@babel/plugin-proposal-decorators": "^7.8.3",
  "@babel/plugin-syntax-dynamic-import": "^7.0.0",
  "@babel/plugin-transform-runtime": "^7.21.0",
  "@babel/preset-env": "^7.20.2",
  "@babel/preset-react": "^7.18.6",
  "@babel/preset-typescript": "^7.21.0",
  "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
  "@types/node": "^20.5.9",
  "babel-loader": "8.1.0",
  "babel-plugin-import": "^1.13.6",
  "clean-webpack-plugin": "^4.0.0",
  "copy-webpack-plugin": "^11.0.0",
  "css-loader": "^6.7.3",
  "dotenv-webpack": "^8.0.1",
  "html-replace-webpack-plugin": "^2.6.0",
  "html-webpack-plugin": "^5.5.0",
  "mini-css-extract-plugin": "^2.7.2",
  "process": "0.11.10",
  "react-hot-loader": "^4.13.1",
  "react-refresh": "^0.14.0",
  "sass": "^1.66.1",
  "sass-loader": "^13.2.0",
  "tsconfig-paths-webpack-plugin": "^4.0.1",
  "typescript": "^5.2.2",
  "webpack": "^5.0.0",
  "webpack-cli": "^4.3.0",
  "webpack-dev-server": "^4.11.1",
  "webpack-merge": "^5.8.0"
}

Hi Team,

It seems npm install [email protected] is not working, giving below error.

Can anyone help ?

cc @rektdeckard

My code:

<HandWavingIcon size={32} color="#EDC281" weight="fill" />

Results:

By comparison I changed the import to a star and used the same alias (so that we keep the above HTML exactly the same) like so:

import {
  Star as HandWavingIcon,
} from 'phosphor-react';

Is the new x.com icon available on phosphor yet?
If so what is it called?

TL;DR: I believe the following line of code should change from size, to size = "1em",
https://github.com/phosphor-icons/react/blob/master/src/lib/SSRBase.tsx#L12

A very common pattern is that we have, is that we want our icons to follow the text font size, which works great for client components, since their width/height defaults to 1em. For example (using tailwind classes)

<a className="text-2xl" href="/docs">
  <ArrowRight />
  Go to Documentation
</a>

I had trouble with tree shaking with next.js so I had to use

  modularizeImports: {
    '@phosphor-icons/react': {
      transform: '@phosphor-icons/react/dist/icons/{{member}}',
    },
}

Have a look at this section of the docs in Chrome where the purple box is rotating.

On Safari, only the opacity animation is working.

With the release of React 18 (and NextJS 13), server components are supported and will most certainly get utilized more going forward. It would be nice of phosphor-react to support this. It does currently seem to be limited by the usage of React.Context.

Possible solutions would be to use the "use client" directive (reactjs/rfcs#227) or in some way make the context optional.

Describe the bug

Unable to build the project after doing npm install with latest build v2.1.4

Steps to Reproduce

Install v2.1.4 and try to run react project you will find the issue in console

./node_modules/@phosphor-icons/react/dist/lib/context.mjs
Can't import the named export 'createContext' from non EcmaScript module (only default export is available)

Expected behavior

No error should be reported in console or in browser. It should work as normal.

Screenshots

Context (please complete the following information):

• OS: Windows 11 Home
• Browser: Chrome
• Library: @phosphor-icons/react
• Version: v2.1.4

Is there any way to import the SVGs directly from phosphor-react? I looked in the other Phosphor packages but couldn't find a way. For those using Next.js with SVGR this would allow such usage with dynamic import.

const svg = {
  heart: dynamic<SVGProps<SVGSVGElement>>(() =>
    import('phosphor-react/svgs/heart.svg').then((mod) => mod.ReactComponent)
  ),
  ...
}

const Icon = ({ icon, ...props }) => {
  const Svg = svg[icon];

  return <Svg {...props} />;
};

Hello,

Pulse icon seems not to be part of importable icons in phosphor-react (1.4.1).
I can import several other icons but trying to import Pulse is returning an error.

Full import command:

Terminal output:
export 'Pulse' (imported as 'Pulse') was not found in 'phosphor-react'

Full terminal output:

The whole package will be included when I import any icons from phosphor-react.

Could you please consider supporting tree shaking? Thank you.

Browsers usually display the <title> as a tool tip, but for a11y, shouldn't this also have the aria-labelledby aria-label?

MDN refrence: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

Hi, I've been using phosphor-react in some projects and I identified some bundle size problems.. Analysing the bundle I could realize that phosport-react is using almost 60% of the space used.

I don't know it's the expected behavior so I opened this issue to report this situation!

I'm trying to use Phosphor icons in an Astro project. Astro is a meta-framework similar to Next.js, which allows you to decide whether a React component is generated on the server (SSG), rendered on the server for every request (SSR) or shipped to the client like adefault React SPA.

By default, a React component in Astro will be generated on the server and then shipped to the client as static HTML.

However, this does currently not work with Phosphor Icons. There is an error in the build process:

I've prepared a minimal example: https://stackblitz.com/edit/github-rbetns?file=src%2Fcomponents%2FIconContainer.tsx

 error   Cannot use import statement outside a module
/home/projects/github-rbetns/node_modules/@phosphor-icons/react/dist/index.es.js:1
import { IconContext as o } from "./lib/context.es.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module

If I specify a className in my context provider, eg.

    <IconContext.Provider
      value={{ className: 'icon' }}
      ...
   />

Since the icons require context to work they fail in a server component.

Adding "use client" to them should fix it, as I didn't manage to get it to work with a custom context...

I have this error when using the phosphor-icons lib with vitte, I've used it before with a project with webpack and I've never had this error, does anyone know why?

i use component like this, importing from '@phosphor-icons/react'

I added this configuration in the json package to try to solve it but without success

i am getting this error when i try to use any icon from this package ("@phosphor-icons/react": "^2.0.10") it works just fine when i use the previous phosphor-react-native": "^1.1.2".

I am getting the following error
Invariant Violation: View config getter callback for component path must be a function (received undefined). Make sure to start component names with a capital letter.

This error is located at:
in path
in svg (created by IconBase)
in IconBase (created by Star)
in Star (created by UserRecords)
in RCTView (created by View)
in View
in Unknown

My Env:

"react-native": "0.71.8",
"expo": "~48.0.18",

Describe the bug

Not really a bug, but rather a feature request.

When using an icon with Next.js App Router, one would need to either use the server component version (under /dist/ssr) or make the outer component a client component. The former doesn't support the use of IconContext, and the latter is a mild inconvenience. Would be very nice to be able to use the client icons directly inside server components.

An approach to this is to have 'use client' at the top of every client icon file and introduce a IconProvider component (with use client), which simply forwards all icon props to the underlying IconContext. I am unsure if these additions will make for a breaking change, but they are pretty straightforward for massive DX improvement.

A React Server Component can then be written concisely like so:

// page.tsx
import { IconProvider, User as UserIcon } from '@phosphor-icons/react';

export default function UserPage() {
  return (
    <IconProvider size={20}>
      <div className="blah blah">
        <UserIcon />
      </div>
    </IconProvider>
  );
}

Infinity is a number (and/or reserved word) in JavaScript, hence the Infinity icon's name conflicts with the same.

This makes my NextJS (14) app build break.

Hi 👋 @rektdeckard Please allow me to add Contributing.md file. Please also check my PR #74 , if need any changes suggest me, Please Consider my contribution I am new in open source and Participating first time in Hacktoberfest and Hacksquad events, please merge it. Thanks

I'm encountering an unhandled rejection error with the following details:

64.64 unhandledRejection Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/usr/src/app/node_modules/@phosphor-icons/react/dist/node_modules/.pnpm/[email protected]/node_modules/react/' imported from /usr/src/app/node_modules/@phosphor-icons/react/dist/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react-jsx-runtime.production.min.mjs
64.64 Did you mean to import react/index.js?
64.64     at new NodeError (node:internal/errors:399:5)
64.64     at legacyMainResolve (node:internal/modules/esm/resolve:235:9)
64.64     at packageResolve (node:internal/modules/esm/resolve:876:14)
64.64     at moduleResolve (node:internal/modules/esm/resolve:938:20)
64.64     at defaultResolve (node:internal/modules/esm/resolve:1153:11)
64.64     at nextResolve (node:internal/modules/esm/loader:163:28)
64.64     at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
64.64     at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
64.64     at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
64.64     at link (node:internal/modules/esm/module_job:76:36) {
64.64   type: 'Error',
64.64   code: 'ERR_MODULE_NOT_FOUND'
64.64 }

I assume that since the search in the Phosphor icon documentation match or more than the name of the icon itself, the information to buidd those tags should already exist somewhere.

Similarly to how we do :

Airplane.displayName = "Airplane";

we could do :

Airplane.tags = ["Airplane","Plane","Fight", ... ];

Use case :

Allowing users in an app to pick an icon for a given primitive. Enabling a search by tag in the front end would be great.
Same in the Figma library, adding those tags to the icon description would make it so much easier to search

I have this simple test file:

// File: __tests__/index.test.tsx

import * as React from 'react';
import { render, screen } from '@testing-library/react';

import Page from '../src/page';

import '@testing-library/jest-dom';

describe('Home', () => {
  it('renders a heading', () => {
    render(<Page />);

    const heading = screen.getByRole('heading', {
      name: /Redefining SaaS/i,
    });

    expect(heading).toBeInTheDocument();
  });
});

// File: src/page.tsx

import * as React from 'react';
import CheckIcon from '@phosphor-icons/react/dist/icons/Check';

export default function Page() {
  return (
    <div>
      <h1>Redefining SaaS</h1>
      <div>
        <CheckIcon />
      </div>
    </div>
  );
}

● Test suite failed to run

    Cannot find module '@phosphor-icons/react/dist/icons/Check' from 'src/page'

import { Check as CheckIcon } from '@phosphor-icons/react';

This always throws errors when try to dynamicly import, i think its because of the files extesion .mjs but cant figure it out, already tried cra clean projects, vite clean projects etc

import { Suspense, lazy } from "react";
import "./styles.css";

function IconTest (props: any) {
  const { icon } = props;

  const IconComponent = lazy(() =>
    import(`@phosphor-icons/react/dist/csr/${icon}`).then((r) => {
      console.log("r", r);
      return { default: r[icon] ? r[icon] : () => null };
    })
  );

  // check suspense needed
  return (
    <span role="img" className="test-icon">
      <Suspense fallback="...">
        <IconComponent />
      </Suspense>
    </span>
  );
}

// HOW WOULD WE USE IT:
export default function App() {
  return (
    <>
      <IconTest icon="Infinity" />
      <IconTest icon="Activity" />
      <IconTest icon="AddressBook" />
    </>
  );
}

yarn create react-app my-app --template typescript
yarn add @phosphor-icons/react
add the dynamic import to some icon
yarn start

 import(`@phosphor-icons/react`).then

Any idea when we will get the new updated icons?

Trying to use these in a Gutenberg block (new WordPress editor - which is React essentially). Followed instructions on Github.
Getting:
react-dom.min.js?ver=17.0.1:9 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.it (react-dom.min.js?ver=17.0.1:9:43163)
at e.useContext (react.min.js?ver=17.0.1:9:10470)
at Object.render (IconBase.esm.js:15:31)
at X (element.min.js?ver=47162ff4492c7ec4956b:9:6463)
at X (element.min.js?ver=47162ff4492c7ec4956b:9:6459)
at Z (element.min.js?ver=47162ff4492c7ec4956b:9:7257)
at B (element.min.js?ver=47162ff4492c7ec4956b:9:6804)
at X (element.min.js?ver=47162ff4492c7ec4956b:9:6197)
at xr (blocks.min.js?ver=69022aed79bfd45b3b1d:10:4703)
at blocks.min.js?ver=69022aed79bfd45b3b1d:10:33666

import { Horse } from "phosphor-react"; import { useBlockProps } from '@wordpress/block-editor'; export default function Edit() { return ( <div { ...useBlockProps() }> { __( 'Phosphor Icons – hello from the editor!', 'phosphor-icons' ) } <Horse /> </div> ); }
Error only occurs once I add Horse component
Any ideas here?

Please implement a CHANGELOG. There are breaking changes happening (export renaming) on minor versions and having to go through commits to figure out why, or if it'll affect someone, is less-than-ideal.

Thank you.

Describe the bug

After updating from 2.1.3 to 2.1.4 I can no longer run my vitests within a react 18 + node v20 + vite 5 repo, as phosphor starts throwing import errors.

Steps to Reproduce

Upgrade from 2.1.3 to 2.1.4 and watch vitest fail to resolve imports within phosphor.

Expected behavior

No import issues in vitest, like in 2.1.3.

Screenshots

Context (please complete the following information):

    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0"
    "@phosphor-icons/react": "2.1.4",
    "vite": "^5.2.7",
    "vitest": "^1.4.0",

Error: Cannot find package '/Users/johnshankman/Documents/manifoldxyz/studio-app-devtools/node_modules/@phosphor-icons/react/dist/node_modules/.pnpm/[email protected]/node_modules/react/package.json' imported from /Users/johnshankman/Documents/manifoldxyz/studio-app-devtools/node_modules/@phosphor-icons/react/dist/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react-jsx-runtime.production.min.mjs
Did you mean to import react/index.js?

It's possible to use as font? to pass as component parameter without pass as object?

Moving from "phosphor-react" to "@phosphor-icons/react", I've got the following issues when deploying on Vercel in a Nextjs application:

[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js',
  page: '/guides'
}
RequestId: 2c953896-3cf8-4f3a-8bb0-86de2ca6662c Error: Runtime exited with error: exit status 1
Runtime.ExitError

In our Design System we have an icon package that uses PhosphorIcon. This package is built both in cjs and esm.

With the 2.0.9 version, presumably after the insertion of type: “module” in the package.json file, we encountered this error when trying to build a Next.js app with our DS icon package.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /app/node_modules/@phosphor-icons/react/dist/index.umd.js
require() of ES modules is not supported.
require() of /app/node_modules/@phosphor-icons/react/dist/index.umd.js from /app/node_modules/@docsity/ui-kit-icons/lib/cjs/index.js is an ES module file as it is a .js file whose nearest parent package.json contains “type”: “module” which defines all .js files in that package scope as ES modules.
Instead rename index.umd.js to end in .cjs, change the requiring code to use import(), or remove “type”: “module” from /app/node_modules/@phosphor-icons/react/package.json.
    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1131:13)
    at Module.load (internal/modules/cjs/loader.js:979:32)
    at Function.Module._load (internal/modules/cjs/loader.js:819:12)
    at Module.require (internal/modules/cjs/loader.js:1003:19)
    at require (internal/modules/cjs/helpers.js:107:18)
    at Object.<anonymous> (/app/node_modules/@docsity/ui-kit-icons/lib/cjs/index.js:7:17)
    at Module._compile (internal/modules/cjs/loader.js:1114:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
    at Module.load (internal/modules/cjs/loader.js:979:32) {
  code: ‘ERR_REQUIRE_ESM’
}
error Command failed with exit code 1.

It is not possible to add title or alt text like in img tags to these icons. E.g. for screen-readers.

Describe the bug

After an update from 2.1.3 to 2.1.4 (but also NextJS/React updates so I can't precisely trace the reason) I've started to receive this warning:

Warning: React does not recognize the `dataSlot` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom attribute, 
spell it as lowercase `dataslot` instead. If you accidentally passed 
it from a parent component, remove it from the DOM element.
    at svg
    at IconBase
    at HiOutlineUsers
    at div

(This was already reported in a related issue, #62, but I think it's different because I don't use NextJS).

I am trying to use @swc/plugin-transform-imports to automatically transform the imports and hoping to speed up my Jest tests.

However it's always failing with the same error as the OP of the related issue, Cannot find module '@phosphor-icons/react/dist/csr/Horse' from ....

The reason why I'm doing this is that it seems barrel imports can be a huge slow down for Jest tests, as explained in jestjs/jest#11234.

              '@swc/plugin-transform-imports',
              {
                '@phosphor-icons/react': {
                  transform: '@phosphor-icons/react/dist/{csr|ssr}/{{member}}',
                  skip_default_conversion: true,
                },
                '@mui/icons-material': {
                  transform: '@mui/icons-material/{{member}}',
                },
              },

import { Horse } from '@phosphor-icons/react/dist/csr/Horse';

const _Horse = _interop_require_default._(require("@phosphor-icons/react/dist/csr/Horse"));

import StarIcon from  '@mui/icons-material/Star'

title ^

Hi I'm creating a Slider Component in which I'd like to render some content (phosphor icon included). Slider hook, which I've created, gives me access to the current index at which the slider points. Would it be possible to render an icon by referencing it from icons array with current slider index? I've tried it already, but types do not match Type 'ForwardRefExoticComponent<IconProps & RefAttributes>' is not assignable to type 'ReactNode' . Thank you for your response.

Is react native supported? If so can we add the integration steps in the documentation.
Usually font icons works on react native using react native vector icons library. But Phosphor icon support is not there yet.

Describe the bug
Using the latest version of the package (v2.0.4) along with esbuild and Next.js v13 this error pops up in the console when trying to import any icon from the library.

Package path . is not exported from package /my_pc_project_path/node_modules/@phosphor-icons/react (see exports field in /my_pc_project_path/node_modules/@phosphor-icons/react/package.json)

Looking up the path reported I can see this entry

// other stuff...
"exports": {
  ".": {
    "import": "./dist/index.es.js"
  }
},
// more stuff...

I was using phosphor-react on my NPM pakcage, and I want to migrate to @phosphor-icons/react, so I can get more icons.
On my package, there is a file src/icons/index.ts where I just export the icons from Phosphor. With phosphor-react, it was working:

export * from 'phosphor-react';

But when I change to @phosphor-icons/react, it gives me the following error message:

TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@phosphor-icons/react")' call instead. To convert this file to an ECMAScript module, change its file extension to '.mts', or add the field "type": "module" to 'C:/Users/roich/dev/bioma/bioma-ui/lib/package.json'.

I tried to change the file name to index.mts and add the "type": "module" to my package.json, and none of them were the solution I was looking for.

I suggest this new package supports both CommonJS format and ECMAScript modules.