remove twemoji

src/app/atoms/avatar/Avatar.jsx

@@ -2,17 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Avatar.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 
 import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
 import { avatarInitials } from '../../../util/common';
 
-const Avatar = React.forwardRef(({
-  text, bgColor, iconSrc, iconColor, imageSrc, size,
-}, ref) => {
+const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
   let textSize = 's1';
   if (size === 'large') textSize = 'h1';
   if (size === 'small') textSize = 'b1';
@@ -20,34 +16,34 @@ const Avatar = React.forwardRef(({
 
   return (
     <div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
-      {
-        imageSrc !== null
-          ? (
-            <img
-              draggable="false"
-              src={imageSrc}
-              onLoad={(e) => { e.target.style.backgroundColor = 'transparent'; }}
-              onError={(e) => { e.target.src = ImageBrokenSVG; }}
-              alt=""
-            />
-          )
-          : (
-            <span
-              style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
-              className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
-            >
-              {
-                iconSrc !== null
-                  ? <RawIcon size={size} src={iconSrc} color={iconColor} />
-                  : text !== null && (
-                    <Text variant={textSize} primary>
-                      {twemojify(avatarInitials(text))}
-                    </Text>
-                  )
-              }
-            </span>
-          )
-      }
+      {imageSrc !== null ? (
+        <img
+          draggable="false"
+          src={imageSrc}
+          onLoad={(e) => {
+            e.target.style.backgroundColor = 'transparent';
+          }}
+          onError={(e) => {
+            e.target.src = ImageBrokenSVG;
+          }}
+          alt=""
+        />
+      ) : (
+        <span
+          style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
+          className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
+        >
+          {iconSrc !== null ? (
+            <RawIcon size={size} src={iconSrc} color={iconColor} />
+          ) : (
+            text !== null && (
+              <Text variant={textSize} primary>
+                {avatarInitials(text)}
+              </Text>
+            )
+          )}
+        </span>
+      )}
     </div>
   );
 });

src/app/organisms/emoji-board/EmojiBoard.jsx

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import './EmojiBoard.scss';
 
 import parse from 'html-react-parser';
-import twemoji from 'twemoji';
 import { emojiGroups, emojis } from './emoji';
 import { getRelevantPacks } from './custom-emoji';
 import initMatrix from '../../../client/initMatrix';
@@ -13,7 +12,6 @@ import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 import AsyncSearch from '../../../util/AsyncSearch';
 import { addRecentEmoji, getRecentEmojis } from './recent';
-import { TWEMOJI_BASE_URL } from '../../../util/twemojify';
 
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
@@ -48,18 +46,8 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
         emojiRow.push(
           <span key={emojiIndex}>
             {emoji.hexcode ? (
-              // This is a unicode emoji, and should be rendered with twemoji
-              parse(
-                twemoji.parse(emoji.unicode, {
-                  attributes: () => ({
-                    unicode: emoji.unicode,
-                    shortcodes: emoji.shortcodes?.toString(),
-                    hexcode: emoji.hexcode,
-                    loading: 'lazy',
-                  }),
-                  base: TWEMOJI_BASE_URL,
-                })
-              )
+              // This is a unicode emoji, and should not be rendered with twemoji
+              emoji.unicode
             ) : (
               // This is a custom emoji, and should be render as an mxc
               <img
@@ -192,7 +180,6 @@ function EmojiBoard({ onSelect, searchRef }) {
       setEmojiInfo({
         unicode: '🙂',
         shortcode: 'slight_smile',
-        src: 'https://twemoji.maxcdn.com/v/13.1.0/72x72/1f642.png',
       });
       return;
     }
@@ -291,7 +278,7 @@ function EmojiBoard({ onSelect, searchRef }) {
               );
             })}
           </div>
-          <div className="emoji-board__nav-twemoji">
+          <div>
             {[
               [0, EmojiIC, 'Smilies'],
               [1, DogIC, 'Animals'],
@@ -340,7 +327,7 @@ function EmojiBoard({ onSelect, searchRef }) {
           </ScrollView>
         </div>
         <div ref={emojiInfo} className="emoji-board__content__info">
-          <div>{parse(twemoji.parse('🙂', { base: TWEMOJI_BASE_URL }))}</div>
+          <div>{'🙂'}</div>
           <Text>:slight_smile:</Text>
         </div>
       </div>

src/app/organisms/space-settings/SpaceSettings.jsx

@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './SpaceSettings.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
@@ -48,23 +46,28 @@ const tabText = {
   PERMISSIONS: 'Permissions',
 };
 
-const tabItems = [{
-  iconSrc: SettingsIC,
-  text: tabText.GENERAL,
-  disabled: false,
-}, {
-  iconSrc: UserIC,
-  text: tabText.MEMBERS,
-  disabled: false,
-}, {
-  iconSrc: EmojiIC,
-  text: tabText.EMOJIS,
-  disabled: false,
-}, {
-  iconSrc: ShieldUserIC,
-  text: tabText.PERMISSIONS,
-  disabled: false,
-}];
+const tabItems = [
+  {
+    iconSrc: SettingsIC,
+    text: tabText.GENERAL,
+    disabled: false,
+  },
+  {
+    iconSrc: UserIC,
+    text: tabText.MEMBERS,
+    disabled: false,
+  },
+  {
+    iconSrc: EmojiIC,
+    text: tabText.EMOJIS,
+    disabled: false,
+  },
+  {
+    iconSrc: ShieldUserIC,
+    text: tabText.PERMISSIONS,
+    disabled: false,
+  },
+];
 
 function GeneralSettings({ roomId }) {
   const isPinned = initMatrix.accountData.spaceShortcut.has(roomId);
@@ -103,7 +106,7 @@ function GeneralSettings({ roomId }) {
               'Leave space',
               `Are you sure that you want to leave "${roomName}" space?`,
               'Leave',
-              'danger',
+              'danger'
             );
             if (isConfirmed) leave(roomId);
           }}
@@ -165,12 +168,12 @@ function SpaceSettings() {
     <PopupWindow
       isOpen={isOpen}
       className="space-settings"
-      title={(
+      title={
         <Text variant="s1" weight="medium" primary>
-          {isOpen && twemojify(room.name)}
+          {isOpen && room.name}
           <span style={{ color: 'var(--tc-surface-low)' }}> — space settings</span>
         </Text>
-      )}
+      }
       contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
       onRequestClose={requestClose}
     >