DEV Community

Stephen Smith
Stephen Smith

Posted on

Emoji Favorite Icon

I would like to improve the post from CSS Tricks. In this post the author demonstrated how to use an emoji as a favorite icon. This is a neat trick, but It doesn't feel right to me. So I will show how to convert it to a data-uri.

Steps

1 Create a new file create-data-uri.ts.
2 Save the following code snippet as icon.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">🎯</text>
</svg>
Enter fullscreen mode Exit fullscreen mode

3 Add an import to create-data-uri.ts from the "fs" module import {readFile} from 'fs'.
4 Create a function to create the data-uri as follows.

const asDataUri = (image: string) => `data:image/svg+xml;base64,${image}`
Enter fullscreen mode Exit fullscreen mode

4 The function to encode the file would be as follows.
1 use 'base64' as the encoding parameter.
2 omit the 'base64' encoding parameter and use the toString method on the buffer with a value of "base64"

readFile(filename, 'base64', (readError, text)=> {
 if (readError) return readError
 return asDataUri(text)
})

or
readFile(filename, (readError, buffer)=>{
  if (readError) return readError
  return asDataUri(buffer.toString('base64'))
})
Enter fullscreen mode Exit fullscreen mode

Now just copy that value and use it in the place <img src="string from function".

Reference:
https://css-tricks.com/emoji-as-a-favicon/

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More