use arrow function to each icon of personal settings

src/client/js/components/Me/PersonalSettings.jsx

@@ -8,10 +8,10 @@ import PasswordSettings from './PasswordSettings';
 import ExternalAccountLinkedMe from './ExternalAccountLinkedMe';
 import ApiSettings from './ApiSettings';
 
-import UserIcon from '../Icons/UserIcon';
-import ShareAltIcon from '../Icons/ShareAltIcon';
-import LockIcon from '../Icons/LooockIcon';
-import PaperPlaneIcon from '../Icons/PaperPlaneIcon';
+// import UserIcon from '../Icons/UserIcon';
+// import ShareAltIcon from '../Icons/ShareAltIcon';
+// import LockIcon from '../Icons/LooockIcon';
+// import PaperPlaneIcon from '../Icons/PaperPlaneIcon';
 
 const PersonalSettings = (props) => {
 
@@ -20,25 +20,25 @@ const PersonalSettings = (props) => {
   const navTabMapping = useMemo(() => {
     return {
       user_infomation: {
-        Icon: UserIcon,
+        Icon: () => <i className="icon-fw icon-user"></i>,
         Content: UserSettings,
         i18n: t('User Information'),
         index: 0,
       },
       external_accounts: {
-        Icon: ShareAltIcon,
+        Icon: () => <i className="icon-fw icon-share-alt"></i>,
         Content: ExternalAccountLinkedMe,
         i18n: t('admin:user_management.external_accounts'),
         index: 1,
       },
       password_settings: {
-        Icon: LockIcon,
+        Icon: () => <i className="icon-fw icon-lock"></i>,
         Content: PasswordSettings,
         i18n: t('Password Settings'),
         index: 2,
       },
       api_settings: {
-        Icon: PaperPlaneIcon,
+        Icon: () => <i className="icon-fw icon-paper-plane"></i>,
         Content: ApiSettings,
         i18n: t('API Settings'),
         index: 3,