convert EmojiIcon component from class based to function based component (#24792)

* convert EmojiIcon comp to functional comp

* comment resolved

* memoization added

* snapshot updated

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap

@@ -47,7 +47,7 @@ exports[`components/post_view/PostReaction should match snapshot 1`] = `
       id="CENTER_reaction_post_id_1"
       onClick={[MockFunction]}
     >
-      <EmojiIcon
+      <Memo(EmojiIcon)
         className="icon icon--small"
       />
     </button>

webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap

@@ -631,7 +631,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
           <span
             className="custom_status__icon"
           >
-            <EmojiIcon
+            <Memo(EmojiIcon)
               className="custom-status-emoji"
             />
           </span>
@@ -898,7 +898,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
           <span
             className="custom_status__icon"
           >
-            <EmojiIcon
+            <Memo(EmojiIcon)
               className="custom-status-emoji"
             />
           </span>
@@ -1165,7 +1165,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
           <span
             className="custom_status__icon"
           >
-            <EmojiIcon
+            <Memo(EmojiIcon)
               className="custom-status-emoji"
             />
           </span>
@@ -1909,7 +1909,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
           <span
             className="custom_status__icon"
           >
-            <EmojiIcon
+            <Memo(EmojiIcon)
               className="custom-status-emoji"
             />
           </span>

webapp/channels/src/components/widgets/icons/emoji_icon.tsx

@@ -1,12 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo} from 'react';
 
-export default class EmojiIcon extends React.PureComponent<React.HTMLAttributes<HTMLSpanElement>> {
+type Props = React.HTMLAttributes<HTMLSpanElement>;
-    render() {
+
+const EmojiIcon = (props: Props) => {
     return (
-            <span {...this.props}>
+        <span {...props}>
             <svg
                 width='16px'
                 height='16px'
@@ -18,5 +19,6 @@ export default class EmojiIcon extends React.PureComponent<React.HTMLAttributes<
             </svg>
         </span>
     );
-    }
+};
-}
+
+export default memo(EmojiIcon);