✨ addsnew Twemoji Wrapper

components/Cards/FavoriteEmoji.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { FC, useEffect, useState } from 'react';
-import Twemoji from 'react-twemoji';
 
 import styles from '../../styles/Cards/FavoriteEmojis.module.scss';
+import Twemoji from '../Twemoji';
 
 interface PropType {
   className: string;
@@ -25,13 +25,11 @@ const FavoriteEmoji: FC<PropType> = ({ className, emojis }) => {
       <div
         className={clsx(styles.emojiContainer, current === 0 && styles.moveUp)}
       >
-        <Twemoji>{emojis[current]}</Twemoji>
+        <Twemoji emoji={emojis[current]} width={64} height={64} />
       </div>
       <p className={clsx(styles.emojiText, current === 0 && styles.fadeIn)}>
-        presenting to you
-      </p>
-      <p className={clsx(styles.emojiText, current === 0 && styles.fadeIn)}>
-        your favorite/most used emoji
+        presenting your favorite emoji, you have used this one 150 times!
+        <Twemoji emoji='🥳' height={24} width={24} />
       </p>
     </div>
   );

components/Twemoji.tsx

@@ -0,0 +1,25 @@
+import React, { FC, memo } from 'react';
+import Image from 'next/image';
+
+interface Proptype {
+  emoji: string;
+  width?: number;
+  height?: number;
+}
+
+const Twemoji: FC<Proptype> = ({ emoji, height = 16, width = 16 }) => {
+  const img = emoji.codePointAt(0)?.toString(16);
+
+  return (
+    <span className='emoji'>
+      <Image
+        src={`https://twemoji.maxcdn.com/v/latest/svg/${img}.svg`}
+        width={width}
+        height={height}
+        alt={emoji}
+      />
+    </span>
+  );
+};
+
+export default memo(Twemoji);

next.config.js

@@ -2,6 +2,6 @@
 module.exports = {
   reactStrictMode: true,
   images: {
-    domains: ['pbs.twimg.com'],
+    domains: ['pbs.twimg.com', 'twemoji.maxcdn.com'],
   },
 };

styles/Cards/FavoriteEmojis.module.scss

@@ -1,12 +1,16 @@
 .emojiText {
-  font-size: 1.75rem !important;
-  font-family: 'Dancing Script';
+  font-style: italic;
 
+  padding: 1rem;
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 
   opacity: 0;
   transition: all 0.5s ease-out 0.5s;
+
+  & > span {
+    padding-left: 0.25rem;
+  }
 }
 
 .emojiContainer {

styles/globals.scss

@@ -14,3 +14,10 @@ body {
 
   background: #050511;
 }
+
+.emoji {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}