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/

Top comments (0)