Apple Emoji React Component

applemoji.tsx

/**
 * Adopted from: https://gist.github.com/chibicode/fe195d792270910226c928b69a468206?permalink_comment_id=4568681#gistcomment-4568681
 */

import NextImage from 'next/image';
import { memo } from 'react';

function Applemoji({
  emoji,
  width = 72,
  height = 72,
}: {
  emoji: string;
  width?: number;
  height?: number;
}) {
  const hexes = Array.from(emoji).map((i) => i.codePointAt(0)?.toString(16));
  const code = `u${hexes.join('_')}`;

  return (
    <NextImage
      src={`https://cdn.jsdelivr.net/gh/samuelngs/apple-emoji-linux/png/160/emoji_${code}.png`}
      width={width}
      height={height}
      alt={emoji}
      loading='lazy'
      style={{
        objectFit: 'scale-down',
      }}
      draggable={false}
    />
  );
}

export default memo(Applemoji);