A dead simple React.js Twemoji component.

README-Twemoji-React.md

Twemoji + React

A dead simple React Twemoji component.

Requirements: twemoji

npm install --save twemoji

# or

yarn add twemoji

Twemoji-Example.js

import React from 'react'
import Twemoji from './Twemoji'

const Example = () => (
  <p>
    Hello! <Twemoji emoji="👋" />
  </p>
)

export default Example

Twemoji.css

.emoji {
  display: inline-block;
  width: auto;
  height: 1em;
  vertical-align: -0.125em;
}

Twemoji.js

import React, { memo } from 'react'
import twemoji from 'twemoji'

const Twemoji = ({ emoji }) => (
  <span
    dangerouslySetInnerHTML={{
      __html: twemoji.parse(emoji, {
        folder: 'svg',
        ext: '.svg'
      })
    }}
  />
)

export default memo(Twemoji)

Fix : 30-fe0f-20e3.svg => 30-20e3.svg .

import React from 'react'
import NextImage from 'next/image'
import twemoji from 'twemoji'

const U200D = String.fromCharCode(0x200d)
const UFE0Fg = /\uFE0F/g

function Twemoji({
  emoji,
  ext = 'svg',
  width = 72,
  height = 72,
}: {
  emoji: string
  ext?: 'svg' | 'png'
  width?: number | string
  height?: number | string
}) {
  const HEXCodePoint = twemoji.convert.toCodePoint(
    emoji.indexOf(U200D) < 0 ? emoji.replace(UFE0Fg, '') : emoji
  )

  return (
    <NextImage
      src={`https://twemoji.maxcdn.com/v/latest/${ext === 'png' ? '72x72' : 'svg'}/${HEXCodePoint}.${ext}`}
      width={width}
      height={height}
      alt={emoji}
      draggable={false}
    />
  )
}

export default React.memo(Twemoji)

@NekoChanTaiwan works great, thanks for sharing!

UPDATE

import React from 'react';
import NextImage from 'next/image';
import twemoji from 'twemoji';

const U200D = String.fromCharCode(0x200d);
const UFE0Fg = /\uFE0F/g;

function Twemoji({
  emoji,
  ext = 'svg',
  width = 72,
  height = 72,
}: {
  emoji: string
  ext?: 'svg' | 'png'
  width?: number
  height?: number
}) {
  const HEXCodePoint = twemoji.convert.toCodePoint(
    emoji.indexOf(U200D) < 0 ? emoji.replace(UFE0Fg, '') : emoji,
  );

  return (
    <NextImage
      src={`https://twemoji.maxcdn.com/v/latest/${ext === 'png' ? '72x72' : 'svg'}/${HEXCodePoint}.${ext}`}
      width={width}
      height={height}
      alt={emoji}
      loading="lazy"
      draggable={false}
    />
  );
}

export default React.memo(Twemoji);