Emojis
Nuxt OG Image integrates with the Iconify API to provide support for a number of emojis families.
Supported families:
twemoji
, noto
, fluent-emoji
, fluent-emoji-flat
, fluent-emoji-high-contrast
, noto-v1
, emojione
, emojione-monotone
, emojione-v1
, streamline-emojis
, openmoji
The default emoji family is noto
.
How it works
There is a Regex that detects unicode emoji characters in your template. When it finds them, it will map the characters to the emoji name.
For example, the unicode character U+1F600
(😀
) will be mapped to grinning-face
.
Once we have the emoji name, we can use the Iconify API to fetch the SVG for that emoji, for example
https://api.iconify.design/noto/grinning-face.svg
.
You should be mindful of the number of emojis you use in your template, as each one will result in a separate API request.
Configuring the emoji family
You can set the default emoji family within your module config.
export default defineNuxtConfig({
ogImage: {
defaults: {
emojis: 'twemoji'
}
}
})
Per-page emoji family
You can also set the emoji family on a per-page basis.
defineOgImage({
emojis: 'twemoji'
})