Fix remaining <Emoji /> usages

src/features/bookmark-folders/index.tsx

@@ -51,24 +51,28 @@ const BookmarkFolders: React.FC = () => {
               </HStack>
             }
           />
-          {bookmarkFolders?.map((folder) => (
+          {bookmarkFolders?.map((folder) => {
-            <ListItem
+            let icon = <Icon src={folderIcon} size={20} />;
-              key={folder.id}
+
-              to={`/bookmarks/${folder.id}`}
+            if (folder.emoji_url) {
-              label={
+              icon = <img src={folder.emoji_url} alt={folder.emoji} className='size-5' />;
-                <HStack alignItems='center' space={2}>
+            } else if (folder.emoji) {
-                  {folder.emoji ? (
+              icon = <Emoji size={20} emoji={folder.emoji} />;
-                    <Emoji
+            }
-                      emoji={folder.emoji}
+
-                      src={folder.emoji_url || undefined}
+            return (
-                      className='size-5 flex-none'
+              <ListItem
-                    />
+                key={folder.id}
-                  ) : <Icon src={folderIcon} size={20} />}
+                to={`/bookmarks/${folder.id}`}
-                  <span>{folder.name}</span>
+                label={
-                </HStack>
+                  <HStack alignItems='center' space={2}>
-              }
+                    <div className='flex-none'>{icon}</div>
-            />
+                    <span>{folder.name}</span>
-          ))}
+                  </HStack>
+                }
+              />
+            );
+          })}
         </List>
       </Stack>
     </Column>

src/features/crypto-donate/components/lightning-address.tsx

@@ -15,11 +15,8 @@ const LightningAddress: React.FC<ILightningAddress> = (props): JSX.Element => {
 
   return (
     <Stack>
-      <HStack alignItems='center' className='mb-1'>
+      <HStack space={2.5} alignItems='center' className='mb-1'>
-        <Emoji
+        <Emoji size={24} emoji='⚡' />
-          className='mr-2.5 flex w-6 items-start justify-center rtl:ml-2.5 rtl:mr-0'
-          emoji='⚡'
-        />
 
         <Text weight='bold'>
           <FormattedMessage id='crypto.lightning' defaultMessage='Lightning' />

src/features/edit-identity/index.tsx

@@ -129,7 +129,7 @@ const EditIdentity: React.FC<IEditIdentity> = () => {
                         {(account.source?.nostr?.nip05 === identifier && account.acct !== identifier) && (
                           <Tooltip text={intl.formatMessage(messages.unverified)}>
                             <div>
-                              <Emoji className='size-4' emoji='⚠️' />
+                              <Emoji emoji='⚠️' />
                             </div>
                           </Tooltip>
                         )}

src/features/emoji/index.ts

@@ -63,7 +63,7 @@ const validEmojiChar = (c: string) => {
 };
 
 const convertCustom = (shortname: string, filename: string) => {
-  return `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
+  return `<img draggable="false" class="inline-block w-4 h-4" alt="${shortname}" title="${shortname}" src="${filename}" />`;
 };
 
 const convertUnicode = (c: string) => {

src/features/notifications/components/notification.tsx

@@ -315,13 +315,11 @@ const Notification: React.FC<INotification> = (props) => {
 
   const renderIcon = (): React.ReactNode => {
     if (type === 'pleroma:emoji_reaction' && notification.emoji) {
-      return (
+      if (notification.emoji_url) {
-        <Emoji
+        return <img src={notification.emoji_url} alt={notification.emoji} className='size-4 flex-none' />;
-          emoji={notification.emoji}
+      } else {
-          src={notification.emoji_url || undefined}
+        return <Emoji emoji={notification.emoji} />;
-          className='size-4 flex-none'
+      }
-        />
-      );
     } else if (validType(type)) {
       return (
         <Icon

src/features/status/components/status-interaction-bar.tsx

@@ -182,15 +182,12 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
       return (
         <InteractionCounter count={count} onClick={features.exposableReactions ? handleClick : undefined}>
           <HStack space={0.5} alignItems='center'>
-            {emojiReacts.take(3).map((e, i) => {
+            {emojiReacts.take(3).map((emoji, i) => {
-              return (
+              if (emoji.url) {
-                <Emoji
+                return <img key={i} src={emoji.url} alt={emoji.name} className='size-4.5 flex-none' />;
-                  key={i}
+              } else {
-                  className='size-4.5 flex-none'
+                return <div key={i} className='flex-none'><Emoji size={18} emoji={emoji.name} /></div>;
-                  emoji={e.name}
+              }
-                  src={e.url}
-                />
-              );
             })}
           </HStack>
         </InteractionCounter>

src/features/ui/components/modals/edit-bookmark-folder-modal.tsx

@@ -63,7 +63,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
         tabIndex={0}
       >
         {emoji
-          ? <Emoji height={20} width={20} emoji={emoji} />
+          ? <Emoji size={20} emoji={emoji} />
           : <Icon className='size-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={moodHappyIcon} />}
       </button>
 

src/features/ui/components/modals/reactions-modal.tsx

@@ -62,10 +62,16 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
 
     reactions!.forEach(reaction => items.push(
       {
-        text: <div className='flex items-center gap-1'>
+        text: (
-          <Emoji className='size-4' emoji={reaction.name} src={reaction.url || undefined} />
+          <div className='flex items-center gap-1'>
-          {reaction.count}
+            {reaction.url ? (
-        </div>,
+              <img src={reaction.url} alt='' className='size-4' />
+            ) : (
+              <Emoji emoji={reaction.name} />
+            )}
+            {reaction.count}
+          </div>
+        ),
         action: () => setReaction(reaction.name),
         name: reaction.name,
       },

src/features/ui/components/modals/select-bookmark-folder-modal.tsx

@@ -60,25 +60,29 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
   ];
 
   if (!isFetching) {
-    items.push(...(bookmarkFolders.map((folder) => (
+    items.push(...(bookmarkFolders.map((folder) => {
-      <RadioItem
+      let icon = <Icon src={folderIcon} size={20} />;
-        key={folder.id}
+
-        label={
+      if (folder.emoji_url) {
-          <HStack alignItems='center' space={2}>
+        icon = <img src={folder.emoji_url} alt={folder.emoji} className='size-5' />;
-            {folder.emoji ? (
+      } else if (folder.emoji) {
-              <Emoji
+        icon = <Emoji size={20} emoji={folder.emoji} />;
-                emoji={folder.emoji}
+      }
-                src={folder.emoji_url || undefined}
+
-                className='size-5 flex-none'
+      return (
-              />
+        <RadioItem
-            ) : <Icon src={folderIcon} size={20} />}
+          key={folder.id}
-            <span>{folder.name}</span>
+          label={
-          </HStack>
+            <HStack alignItems='center' space={2}>
-        }
+              <div className='flex-none'>{icon}</div>
-        checked={selectedFolder === folder.id}
+              <span>{folder.name}</span>
-        value={folder.id}
+            </HStack>
-      />
+          }
-    ))));
+          checked={selectedFolder === folder.id}
+          value={folder.id}
+        />
+      );
+    })));
   }
 
   const body = isFetching ? <Spinner /> : (