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>
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}`
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'))
})
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)