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";

[slk333]

This does not really solve the OP's point.

I was also disappointed by the API.

I don't want to suddenly have 9000 suggestions in my autocomplete with components such as User. It will definitely worsen the DX

[slk333]

An Icon library should not take global names such as <User> imo, I agree with OP

[rektdeckard]

Testing out this idea, see: #127

[rektdeckard]

Ended up going with a suffix instead of a prefix. This is a compromise that I believe addresses your concerns – allowing you to disambiguate from similarly-named types in autocomplete, improving readability of JSX, and narrowing down search results in code – but that also stays true to Phosphor's philosophy of being unsurprising.

Despite the original names now being marked deprecated, there will be no breaking changes that remove them for at least the next several minor releases, but realistically may not be removed until a 3.0 release or ever. We don't want to break your builds, but deprecating helps de-prioritize old names in autocomplete and nudge users toward adoption of names that we think improve DX.

[vladshcherbin]

Suffix is the preferable and user everywhere way. Great change, thanks!