Como eu configuraria melhor um componente de ícones twemoji?

Estou a trabalhar num tema em que quero usar emojis como ícones em alguns locais. O aspeto pretendido é mais ou menos este:

Gostaria de envolver isto como um componente, essencialmente apenas adicionando uma folha de sprites Twemoji. Assim, os emojis podem ser escolhidos para o menu da barra lateral e como ícones de categoria. Não quero substituir totalmente os ícones do sistema.

Isto funciona em geral, no entanto, gostaria de ouvir opiniões sobre duas questões:

  • O conjunto completo tem mais de 3000 ícones. O tamanho do ficheiro seria de 8 MB. Encontrei uma folha de sprites limitada online que tem 2 MB. O conjunto completo não funcionou, o reduzido funcionou. Quais são os limites que devo ter em conta com um conjunto de ícones?
  • Por defeito, os emojis têm o valor hexadecimal Unicode como ID. Assim, seria necessário usar um seletor de emojis como Twemoji Cheatsheet para encontrar o seu emoji e o seu valor hexadecimal, e depois inseri-lo. Por exemplo:

Alguém saberia como automatizar da melhor forma a alteração dos IDs para nomes curtos reais? Assim, alguém poderia escolher digitando “tw-books”?

1 curtida

tudo o que tenho a dizer agora é sim, por favor :grin: amo isso :heart_eyes_cat:

3 curtidas

A página que você vinculou parece usar emojibase para obter um ‘mapa de emoji’ (com unicode, nome, etc.), talvez você possa usar algo semelhante? :thinking:

Links relevantes:

A propósito, ficou ótimo :smiley:

2 curtidas

Obrigado, Alexander! Parece que eu precisava de um empurrãozinho aqui :slight_smile:

Então, isso funciona agora :sparkles: Adicionei o conjunto principal de emojis, sem variantes (como pele e gênero). Esse é um conjunto de 1869 ícones (de 3689 arquivos SVG na pasta de assets do Twemoji). Usei tw- como prefixo, mais o shortcode em inglês para nomear os ícones. Alguém ainda pode precisar usar um site de referência para encontrar o emoji certo, pois os nomes não incluem nenhuma tag. Por exemplo, este ícone não aparece se você digitar golf no seletor de ícones:

Compartilharei o componente em theme-components quando estiver pronto com o tema. Se alguém quiser experimentar antes, o repositório é GitHub - nolosb/discourse-twemoji-icons: Use twemojis as icons in Discourse.

4 curtidas

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.