Handling different weights and using the same unicode for icons regardless of their weight

[iamdarkle]

Hi, I'm starting to use Phosphor, the icons are simply perfect, but precisely what I consider one of its greatest virtues is proving a bit tricky to manage: the types of weight.

I've decided to create a discussion since maybe it's a better approach to discuss this and the possibilities before creating an issue.

Managing the active states of certain icons through CSS is certainly a challenge, as the unicode does not match between the weights. For example, the newspaper icon in bold weight has the unicode ec0e. If I decide to use the fill weight for its active state through CSS, it turns out that the unicode ec0e in the fill weight belongs to the newspaper-clipping icon.

This occurs in loads of cases, and in other icon packs, this is taken into account. Perhaps it would be possible to match the unicode of the icons regardless of the weight to avoid this issue?

[rektdeckard]

This would be nice to have, and I certainly understand the practical utility of having all weights of an icon share the same Unicode code point.

The reason it has not been this way is simply because we don't use any fancy font design software to produce the icon fonts -- we upload each weight of SVGs to IcoMoon and let their generator produce fonts for us. And because the filenames do not alphabetize in exactly the same order across different weights, they are not consistently assigned to the same code points. The set is quite large so manually reordering would be time-consuming, and changing our file naming conventions to enforce strict ordering across all weights would cause issues elsewhere.

That said, I have wanted to switch to a more advanced tool for this process for some time. I will look into alternatives that allow us to have that consistency without being too disruptive.

[rektdeckard]

@iamdarkle in what context are you using the icon font? You mentioned using CSS, and this is exactly the purpose of our @phosphor-icons/web package -- to map icon names to unicodes (along with some style resets and tricks to get duotone weight to work). As long as you have both weights loaded, you should only need to toggle the weight class:

<i class="ph ph-newspaper"></i>
<i class="ph-fill ph-newspaper"></i>

[rektdeckard]

We'll be stabilizing icon codepoints in the next release, meaning icons will have consistent codepoints across weights, and across future versions.

[iamdarkle]

Hi @rektdeckard, I'm really sorry for not getting back to you sooner, especially after your quick response back then. I feel bad about it. My GitHub is swamped with too many subscriptions, and it's tough to keep track of the ones that matter most.

Though it might not matter much now, to answer your question, my setup's a bit unusual, I guess. I don't use the icon names or <i> tags. Instead, I lean on other tags and use the :before pseudo element for setting unicode and font-family.

Seeing version 2.1.0 released, especially with that feature, was a pleasant surprise. And the UI for copying and pasting unicode from the web is super helpful. I'm just updating to the new codepoints and was curious if they'd be maintained in future versions, but I saw you've already covered that in your last comment 🙌.

Really, thanks a ton for all the effort you've put into this.

[rektdeckard]

Hey, no sweat @iamdarkle — we've all been there. This was something I was hoping to do anyway, and your request was just further reinforcement. Glad you're enjoying the updates. Keep an eye out for any bugs WRT Unicode consistency, and let us know if you have any ideas for improvement!