Using emojis as icons

#dev

I have a pet project. Long story short I migrated it from Rails with font-awesome (4.7.0) to Vuejs with feather.

Out of the blue I came with the idea of replacing feather with emojis. After all I am already using emojis for somethings (this blog; the “language selector” of the same app), so… Why not replace the icons?

I choose feather because it is svg and it is simpler then most of the icons. But my biggest problem with feather is there are not much icons there.

The good news is: Nowadays there are everything in emojis 😉.

Replacing

23 changed files with 56 additions and 181 deletions.

The first thing that I did was replacing my component <Icon icon="check" /> with the emojis.

For the record, this is my component:

<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>

Before it was:

<Icon icon="edit" />

And I replaced with the related emoji:

&#x1F58A;

Most (all?) of the browser used nowadays identifies if you type the emoji directly, but I choose to keep it using this way, because I want it to be easy to find. A simple search like: rg '&#x' . can find them all.

Result (Desktop)

These are some screenshots of the app in my Linux desktop with Google Chrome.

While you take a look in the screenshots:

  • Take a look at the menu. As you can see there are some emojis missing, it is ok for now
  • Even when I was using feather the language selector was a emoji (the same on top of my blog)
  • The emoji for Category is very weird 😐

Handbooks

Categories - Edit

Categories - Show

Result (Mobile)

These are some screenshots of the app when I use Android with Google Chrome.

While you take a look at the screenshots:

  • There is only one missing in the mobile version
  • The icons looks a little childish to me, but once more, it is ok for now

Mobile menu

Categories - List

Categories - Show

Categories - Edit