How would I best setup a twemoji icons component?

AI-generated summary

A developer is seeking advice on creating a Twemoji icon component for a theme, aiming to use emojis as icons in the sidebar and categories. They face two challenges: managing the large file size of the full Twemoji set (3000+ icons, 8MB) and automating the use of shortnames instead of Unicode hex values for easier selection. manuel shares that they’ve reduced the set to 1869 icons, using tw- prefixed shortnames, but some icons require a reference to find the correct name. Alexander suggests using Emojibase for an emoji map, which could help with shortname lookup. Lilly expresses enthusiasm for the idea. manuel confirms the solution works and plans to share the component in a repository.

I’m working on a theme where I want to use emojis as icons in some places. The intended look is more or less like this:

I’d like to wrap this up as a component, essentially just adding a Twemoji sprite-sheet. So emojis can be picked for the sidebar menu and as category icons. I don’t want to override system icons entirely.

This works in general, however I’d love to hear thoughts on two issues:

  • The full set is +3000 icons. The file-size would be 8MB. I’ve found a limited sprite-sheet online that has 2MB. The full set actually didn’t work, the reduced one did. What are the limits I should aim at with an icon set?
  • By default, the emojis have the Unicode hex value as id. So you’d need to use an emoji picker like Twemoji Cheatsheet to find your emoji and it’s hex value, and then enter that. E.g.:

Would someone know how to best automate changing the id’s to actual shortnames? So one could rather pick by typing “tw-books”?

all i have to say right now is yes please :grin: love this :heart_eyes_cat:

The page you linked seems to use emojibase to get an ‘emoji map’ (with unicode, name, etc), maybe you can use something similar? :thinking:

Relevant links:

By the way it looks great :smiley:

Thank you Alexander! Seems like I needed a nudge here :slight_smile:

So this works now :sparkles: I added the main set of emojis, without variants (like skin and gender). That’s a set of 1869 icons (out of 3689 svg files in the Twemoji assets folder). I used tw- as a prefix, plus the english shortcode to name icons. One might still need to use a reference site to find the right emoji as the names don’t include any tags. E.g. this icon doesn’t show up if you’d type golf in the icon-picker:

I’ll share the component in theme-components when I’m ready with the theme. If anyone wants to try it out already, the repository is GitHub - nolosb/discourse-twemoji-icons: Use twemojis as icons in Discourse. · GitHub