Replacing Emojis with SVGs

[00:00:00]
>> What we'd like to do now is start making it look an actual game. And one unfortunate reality about working with emojis is that they are not reliable across browsers and across platforms. In particular, if you were to look at this on an Android device, for some reason the emojis will be off center and it would look kind of terrible.

[00:00:19]
So what we're gonna do is we're gonna grab a set of Svg that represent all of these emojis. And there's a brilliant resource that I've used a whole bunch that's really good in situations like these. It's called twemoji and it's the Twitter set of emojis. So just go to twemoji, just Google for that, and go to the GitHub link down here.

[00:00:47]
And we're gonna clone this repo into a convenient place nearby. I'm gonna do git clone git@github.com:twitter/twemoji. This is gonna clone that repo onto my hard drive. Here's what I made earlier. Once we've done that, we can get the assets inside that repo and bring them into our own project.

[00:01:27]
So we have in here if I make this a little bit bigger so that you can see, is in addition to the code for generating all of this stuff and all of the license information and everything. We have this Svg folder that contains an individual emoji Svg for basically every emoji that exists.

[00:01:48]
And they're all indexed by the emojis code point sequence in hexadecimal. And if that was gibberish, then don't worry because we're gonna take the emoji sequence that we've already got in our levels data and we're gonna turn it into a twemoji_urls, right? So I've got the repo locally on my machine now, I'm gonna open up the directory where we're building our project.

[00:02:15]
And we're gonna move the Svg assets into the static folder of our Sveltekit project. It's gonna drag that over like so. And I'm gonna rename it to twemoji. And now inside our app we need to replace. All of these emoji spans with images that reference the Svgs that we now have in our project.

[00:02:50]
I'm gonna create a helper inside utils that will take an emoji as an input and return a path to the twemoji svg. So, find utils and we'll create a new function, call it something like get_twemoji_url. It's gonna take an emoji which is a string as its input. And it took me a minute to figure out the logic for this, so don't worry if this doesn't make sense, just follow along.

[00:03:29]
The code is the, The string spread out into an array. And then we're gonna map that to the char.codePoint, Represented as a hexadecimal string. And then we join that with a hyphen character. Then we return that with the twemoji prefix that corresponds to the directory that we just created.

[00:04:15]
So inside square.svelte, we can now get rid of this span and replace it with an image tag. The source of which is going to be get_twemoji_url(emoji). Get rid of the rest of that stuff. Save, and it works. Okay, so we now have twemoji in our application little bit big.

[00:04:46]
So we need to shrink these down. Down here you'll see that we now have this warning from the Svelte's compiler that we have an unused CSS selector in our app because we no longer have a span. So you can replace that with an SVG, give it a width of 5ms and a height of 5ms, sorry not SVG, image, but keep the pointer events.

[00:05:14]
And he's back to looking the way that it was before. Maybe this could be a tiny bit bigger, let's make that 6ems. And we're gonna wanna do the same thing in the found.svelte component. Get rid of the span, img alt = { emoji} scr = {get_twemoji_url} of the emoji.

[00:05:42]
And down here, we'll replace that selector again with image. And so now if we find a matching pair, it's not what I expected. We need to replace that with a width and height. All right, that looks a little bit nicer.