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 Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more