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