Twemoji Icons

theme-component
1
:information_source: Summary Use Twitter emojis as icons in Discourse.
:hammer_and_wrench: Repository GitHub - nolosb/discourse-twemoji-icons: Use twemojis as icons in Discourse.
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

The component adds Twitter emojis as icons. You can use emojis to add category and tag icons using the respective components. You can also replace default interface icons, either on admin modals or in custom theme code.

Here’s a view of the Kiosk Theme using this component to show emojis on interface and category icons:

Screenshot from 2023-07-20 14-20-41
Screenshot from 2023-07-20 14-20-411585×592 82.7 KB

:construction: Detailed instructions

  • Icon names are generated from a tw-prefix and the emoji shortname in kebab-case (all words are separated with a hyphen).

  • E.g. the :sunny: emoji goes by the icon name tw-sun; :beach_umbrella: goes by tw-beach-umbrella

  • Look up shortnames on the Twemoji Cheatsheet

  • Use the icons on admin modals, e.g. for customizing the sidebar:

    image

  • Use the icons on component settings, e.g. for category icons:

    image

  • Use the icons in theme code:

    api.replaceIcon('star', 'tw-star');

8 Likes
2

I see you ship a large SVG sprite for the emojis, but since Discourse already ships all the Twitter emojis why don’t you reuse those? It will save users from installing and serving that SVG file.

4 Likes
3

Yeah, I’d love to have the functionality of this component without serving a large sprite file. But Discourse ships twemojis as Unicode sequences, no? I want to be able to replace svg icons and as far as I understand it I need svgs to achieve that.

3 Likes
4

We ship as individual PNGs, like https://emoji.discourse-cdn.com/twitter/beach_umbrella.png.

So it would work on the sidebar just fine, but yes it won’t work for icons.

3 Likes
5

So yes, I see the value of this component in making it easy to explore some looks and designs. I think if you indeed want to use emoji icons in production it’s much better to serve a dedicated sprite file with just the actual emojis in use.

4 Likes