Add "Icon" prefix for better readability & developer experience

[joeholdcroft]

We're evaluating a bunch of icon libraries at the moment. One of the libraries we're evaluating is Phosphor, and we generally like it but we have an issue with how the React library exports the icons.

Having the icons exported with just their name creates some developer experience problems:

1. Autocomplete becomes fiddly - you want to use a User icon? We very likely have our own User component, and it's super easy to accidentally import the wrong one in your IDE
2. Code readability isn't so great. Looking at a chunk of JSX, I can't easily see that User is an icon
3. Searching for all instances of icons, or a certain type of icon, becomes impossible or very difficult depending on the icon in question

We did see the note in the readme about importing everything, which helps here, but unfortunately in our build environment it would cause every icon to be bundled. It also doesn't fully solve the autocomplete use case, as we'd have to manually add the import before autocomplete would work (but with named exports we can just type the name and autocomplete will add the import for us)

It's a minor nuisance, but considering how widespread icon use tends to be in applications, it's important to us that we get these details right. This is something that we really like about Tabler, for example.

I appreciate this would be a pretty major breaking change. Nonetheless, might it be something you'd take into consideration?

[rilans]

This would be really great! I care about having a solution that's a great experience for both Design and Eng.

[rektdeckard]

I understand what you're after, but such a naming change at this point is probably too disruptive for a library of this size and adoption. With the recent addition of JSDOC icon previews, I find it hard to believe the developer experience is that painful. Is it possible for you to enforce an import aliasing rule in your org?

import { User as UserIcon } from "@phosphor-icons/react";