Usando emojis como ícones

#dev

Eu tenho um pet project. Para o propósito desse post eu migrei o projeto do Rails com font-awesome (4.7.0) para Vuejs com feather.

Do nada eu tive uma ideia de substituir o feather com emojis. Afinal eu já estou usando emoji na web em alguns lugares (este blog; o “seletor de idiomas” da mesma app), então… Por que não mudar tudo para emoji?

Eu escolhi usar o feather pois ele gera a saída como svg e ele é mais simples que muitos ícons. Mas meu maior problema com o feather é que não tem muitos ícones lá.

A boa notícia é: hoje em dia quase tudo tá em emojis 😉.

Substituindo

23 changed files with 56 additions and 181 deletions.

A primeira coisa que eu fiz foi substituir o meu componente <Icon icon="check" /> com emoji.

Para deixa claro, este é meu componente:

<template>
  <span v-html="content()"></span>
</template>

<script>
import feather from "feather-icons"

export default {
  props: ["icon"],
  methods: {
    content () {
      return feather.icons[this.icon].toSvg({ width: 16, height: 16 })
    }
  },
  data () {
    return {}
  }
}
</script>

Antes era assim:

<Icon icon="edit" />

E agora ficou assim:

&#x1F58A;

A maioria (todos?) os navegadores hoje em dia já identifica os caracteres de emoji diretamente, mas eu escolhi usar desse jeito por que eu quero que eles sejam fáceis de encontrar. Uma simples pesquisa como rg '&#x' . acha todos.

Resultado (Desktop)

Estes screenshots são num desktop Linux com Google Chrome.

Algumas notas:

  • Olhe para o menu, como você pode ver alguns ícones estão faltando, mas é ok por agora
  • Até mesmo quando eu tava usando o feather o seletor de idioma era emoji (o mesmo no topo desse blog)
  • O emoji para Categoria é muito estranho 😐

Manuais

Categorias - Editar

Categorias - Ver

Resultado (Mobile)

Estes screenshots são no Android com Google Chrome.

Algumas notas:

  • Tem somente um ícone faltando
  • Os ícones no android são um pouco criança demais, mas mais uma vez é ok por agora

Menu no Mobile

Categoria - Lista

Categoria - Ver

Categoria - Editar