Emojis in Svelte 3 🤘

Hey!

So today, let's make an emoji component in Svelte 3. It's fairly simple. Our objective is to be able to write something like below, and it'll show the emoji. We also want to be careful that the accessibility attributes are there.

<Emoji symbol="👋" label="Hi!" />

Let's start by writing our Emoji component, and call it Emoji.svelte, with the following content:

<script>
  export let label;
  export let symbol;
</script>

<style>
</style>

<span
  className="emoji"
  role="img"
  aria-label={label ? label : ""}
  aria-hidden={label ? "false" : "true"}
>
{symbol}
</span>

Quick explanation:

• The component will be a span
• It has a symbol and a label attribute, so it's a11y-compliant
• The aria is hidden if there's no label (but you should always put one)
• The symbol is the actual emoji, and will be displayed as a child/inner HTML of the span
• Inside the script tag, we make the label and symbol variables available
• I am leaving a style tag, so you can add CSS in there if you want

And that is it! I You just have to import the component like so, in another component's script tag:

<script>
  import Emoji from '../components/Emoji.svelte';
</script>

... Then use the Emoji tag as described in the first code block, and that's it!

You still have to copy/paste the emoji character from somewhere and insert it in the symbol attribute of the Emoji tag. If you are on Mac OS, I recommend the lightweight qmoji by Jared Forsyth, but there's a bunch of those emoji apps for any OS.

Talk to y'all soon!

Comments

[Eka]

Good idea! In React (for example) we have react-a11y lint tool that warns us about common a11y issues, including inaccessible emoji. Haven't seen similar tool for Svelte, so this component will be helpful.