Replace font awesome with fork awesome (#114)

* added fork-awesome-icon
* removed fontAwesome
* changed FontAwesomeIcon to ForkAwesomeIcon

Signed-off-by: Philip Molares <philip.molares@udo.edu>

package.json

@@ -3,10 +3,6 @@
   "license": "AGPL-3.0",
   "version": "0.1.0",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-brands-svg-icons": "^5.13.0",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -21,7 +17,18 @@
     "@types/react-router": "^5.1.7",
     "@types/react-router-bootstrap": "^0.24.5",
     "@types/react-router-dom": "^5.1.5",
+    "@typescript-eslint/eslint-plugin": "^3.0.0",
+    "@typescript-eslint/parser": "^3.0.0",
     "bootstrap": "^4.4.1",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-flowtype": "^5.1.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "fork-awesome": "^1.1.7",
     "i18next": "^19.4.4",
     "i18next-browser-languagedetector": "^4.1.1",
     "i18next-http-backend": "^1.0.8",
@@ -38,17 +45,7 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
     "redux": "^4.0.5",
-    "typescript": "~3.7.2",
+    "typescript": "~3.7.2"
-    "@typescript-eslint/eslint-plugin": "^3.0.0",
-    "@typescript-eslint/parser": "^3.0.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-flowtype": "^5.1.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/application-loader/loading-screen.tsx

@@ -1,6 +1,6 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import { Alert } from 'react-bootstrap'
+import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
 
 export interface LoadingScreenProps {
   failedTitle: string
@@ -10,7 +10,7 @@ export const LoadingScreen: React.FC<LoadingScreenProps> = ({ failedTitle }) =>
   return (
     <div className="loader middle">
       <div className="icon text-white">
-        <FontAwesomeIcon icon="file-alt" size="6x"
+        <ForkAwesomeIcon icon="file-text" size="5x"
           className={failedTitle ? 'animation-shake' : 'animation-pulse'}/>
       </div>
       {

src/components/editor/task-bar/connection-indicator.tsx

@@ -1,6 +1,6 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import { Dropdown } from 'react-bootstrap'
+import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
 import { ActiveIndicatorStatus } from './active-indicator'
 import './connection-indicator.scss'
 import { UserLine } from './user-line'
@@ -10,7 +10,7 @@ const ConnectionIndicator: React.FC = () => {
   return (
     <Dropdown className="small" alignRight>
       <Dropdown.Toggle id="connection-indicator" size="sm" variant="primary" className="upper-case">
-        <FontAwesomeIcon icon="users"/> {userOnline} Online
+        <ForkAwesomeIcon icon="users"/> {userOnline} Online
       </Dropdown.Toggle>
       <Dropdown.Menu>
         <Dropdown.Item disabled={true} className="d-flex align-items-center p-0">

src/components/editor/task-bar/dark-mode-button.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
 
 const DarkModeButton: React.FC = () => {
   const { t } = useTranslation()
@@ -19,8 +19,8 @@ const DarkModeButton: React.FC = () => {
         onChange={buttonToggle} value={'dark'}
       >
         {buttonState
-          ? <FontAwesomeIcon icon="sun"/>
+          ? <ForkAwesomeIcon icon="sun"/>
-          : <FontAwesomeIcon icon="moon"/>
+          : <ForkAwesomeIcon icon="moon"/>
         }
       </ToggleButton>
     </ToggleButtonGroup>

src/components/editor/task-bar/editor-menu.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Dropdown } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
 
 const EditorMenu: React.FC = () => {
   useTranslation()
@@ -16,13 +16,13 @@ const EditorMenu: React.FC = () => {
           <Trans i18nKey="editor.menu.extra"/>
         </Dropdown.Header>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="history"/> <Trans i18nKey="editor.menu.revision"/>
+          <ForkAwesomeIcon icon="history"/> <Trans i18nKey="editor.menu.revision"/>
         </Dropdown.Item>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="tv"/> <Trans i18nKey="editor.menu.slideMode"/>
+          <ForkAwesomeIcon icon="television"/> <Trans i18nKey="editor.menu.slideMode"/>
         </Dropdown.Item>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="trash"/> <Trans i18nKey="editor.menu.deleteNote"/>
+          <ForkAwesomeIcon icon="trash"/> <Trans i18nKey="editor.menu.deleteNote"/>
         </Dropdown.Item>
 
         <Dropdown.Divider/>
@@ -31,10 +31,10 @@ const EditorMenu: React.FC = () => {
           <Trans i18nKey="common.export"/>
         </Dropdown.Header>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon={['fab', 'dropbox']}/> Dropbox
+          <ForkAwesomeIcon icon="dropbox"/> Dropbox
         </Dropdown.Item>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon={['fab', 'github']}/> Gist
+          <ForkAwesomeIcon icon="github"/> Gist
         </Dropdown.Item>
 
         <Dropdown.Divider/>
@@ -43,13 +43,13 @@ const EditorMenu: React.FC = () => {
           <Trans i18nKey="common.import"/>
         </Dropdown.Header>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon={['fab', 'dropbox']}/> Dropbox
+          <ForkAwesomeIcon icon="dropbox"/> Dropbox
         </Dropdown.Item>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon={['fab', 'github']}/> Gist
+          <ForkAwesomeIcon icon="github"/> Gist
         </Dropdown.Item>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="paste"/> <Trans i18nKey="editor.import.clipboard"/>
+          <ForkAwesomeIcon icon="clipboard"/> <Trans i18nKey="editor.import.clipboard"/>
         </Dropdown.Item>
 
         <Dropdown.Divider/>
@@ -58,13 +58,13 @@ const EditorMenu: React.FC = () => {
           <Trans i18nKey="editor.menu.download"/>
         </Dropdown.Header>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="file-alt"/> Markdown
+          <ForkAwesomeIcon icon="file-text"/> Markdown
         </Dropdown.Item>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="file-code"/> HTML
+          <ForkAwesomeIcon icon="file-code-o"/> HTML
         </Dropdown.Item>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="file-code"/> <Trans i18nKey='editor.export.rawHtml'/>
+          <ForkAwesomeIcon icon="file-code-o"/> <Trans i18nKey='editor.export.rawHtml'/>
         </Dropdown.Item>
 
       </Dropdown.Menu>

src/components/editor/task-bar/editor-view-mode.tsx

@@ -1,14 +1,14 @@
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
 import { ApplicationState } from '../../../redux'
 import { EditorMode } from '../../../redux/editor/types'
 import { setEditorModeConfig } from '../../../redux/editor/methods'
 import { useTranslation } from 'react-i18next'
 
 const EditorViewMode: React.FC = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation()
   const editorConfig = useSelector((state: ApplicationState) => state.editorConfig)
   return (
     <ToggleButtonGroup
@@ -17,13 +17,13 @@ const EditorViewMode: React.FC = () => {
       defaultValue={editorConfig.editorMode}
       onChange={(value: EditorMode) => { setEditorModeConfig(value) }}>
       <ToggleButton value={EditorMode.PREVIEW} variant="outline-secondary" title={t('editor.viewMode.view')}>
-        <FontAwesomeIcon icon="eye"/>
+        <ForkAwesomeIcon icon="eye"/>
       </ToggleButton>
       <ToggleButton value={EditorMode.BOTH} variant="outline-secondary" title={t('editor.viewMode.both')}>
-        <FontAwesomeIcon icon="columns"/>
+        <ForkAwesomeIcon icon="columns"/>
       </ToggleButton>
       <ToggleButton value={EditorMode.EDITOR} variant="outline-secondary" title={t('editor.viewMode.edit')}>
-        <FontAwesomeIcon icon="pencil-alt"/>
+        <ForkAwesomeIcon icon="pencil"/>
       </ToggleButton>
     </ToggleButtonGroup>
   )

src/components/editor/task-bar/help-button.tsx

@@ -1,7 +1,7 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { Fragment, useState } from 'react'
 import { Button, Card, Col, Modal, Row, Table } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
 import { TranslatedExternalLink } from '../../links/translated-external-link'
 
 export const HelpButton: React.FC = () => {
@@ -14,12 +14,12 @@ export const HelpButton: React.FC = () => {
     <Fragment>
       <Button title={t('editor.menu.help')} className="ml-2 text-secondary" size="sm" variant="outline-light"
         onClick={handleShow}>
-        <FontAwesomeIcon icon="question-circle"/>
+        <ForkAwesomeIcon icon="question-circle"/>
       </Button>
       <Modal show={show} onHide={handleClose} animation={true} className="text-dark" size='lg'>
         <Modal.Header closeButton>
           <Modal.Title>
-            <FontAwesomeIcon icon="question-circle"/> <Trans i18nKey={'editor.menu.help'}/>
+            <ForkAwesomeIcon icon="question-circle"/> <Trans i18nKey={'editor.menu.help'}/>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body className="text-dark">
@@ -76,7 +76,7 @@ export const HelpButton: React.FC = () => {
                         <TranslatedExternalLink
                           i18nKey='editor.help.documents.features'
                           href='/n/features'
-                          icon='dot-circle'
+                          icon='dot-circle-o'
                           className='text-primary'
                         />
                       </li>
@@ -84,7 +84,7 @@ export const HelpButton: React.FC = () => {
                         <TranslatedExternalLink
                           i18nKey='editor.help.documents.yamlMetadata'
                           href='/n/yaml-data'
-                          icon='dot-circle'
+                          icon='dot-circle-o'
                           className='text-primary'
                         />
                       </li>
@@ -92,7 +92,7 @@ export const HelpButton: React.FC = () => {
                         <TranslatedExternalLink
                           i18nKey='editor.help.documents.slideExample'
                           href='https://github.com/codimd/server/issues'
-                          icon='dot-circle'
+                          icon='dot-circle-o'
                           className='text-primary'
                         />
                       </li>

src/components/editor/task-bar/task-bar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Link } from 'react-router-dom'
 import { Button, Nav, Navbar } from 'react-bootstrap'
+import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
 import { DarkModeButton } from './dark-mode-button'
 import { EditorViewMode } from './editor-view-mode'
 import { Trans, useTranslation } from 'react-i18next'
@@ -16,7 +16,7 @@ const TaskBar: React.FC = () => {
       <Nav className="mr-auto d-flex align-items-center">
         <Navbar.Brand>
           <Link to="/intro" className="text-secondary">
-            <FontAwesomeIcon icon="file-alt"/> CodiMD
+            <ForkAwesomeIcon icon="file-text"/> CodiMD
           </Link>
         </Navbar.Brand>
         <EditorViewMode/>
@@ -25,10 +25,10 @@ const TaskBar: React.FC = () => {
       </Nav>
       <Nav className="d-flex align-items-center text-secondary">
         <Button className="ml-2 text-secondary" size="sm" variant="outline-light">
-          <FontAwesomeIcon icon="plus"/> <Trans i18nKey="editor.menu.new"/>
+          <ForkAwesomeIcon icon="plus"/> <Trans i18nKey="editor.menu.new"/>
         </Button>
         <Button className="ml-2 text-secondary" size="sm" variant="outline-light">
-          <FontAwesomeIcon icon="share-square"/> <Trans i18nKey="editor.menu.publish"/>
+          <ForkAwesomeIcon icon="share-square-o"/> <Trans i18nKey="editor.menu.publish"/>
         </Button>
         <div className="text-secondary">
           <EditorMenu/>

src/components/icon-button/icon-button.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './icon-button.scss'
 import { Button, ButtonProps } from 'react-bootstrap'
-import { IconProp } from '../../utils/iconProp'
+import { ForkAwesomeIcon, IconName } from '../../fork-awesome/fork-awesome-icon'
 
 export interface SocialButtonProps extends ButtonProps {
-  icon: IconProp
+  icon: IconName
   onClick?: () => void
 }
 
@@ -14,7 +13,7 @@ export const IconButton: React.FC<SocialButtonProps> = ({ icon, children, varian
     <Button variant={variant} className={'btn-icon p-0 d-inline-flex align-items-stretch'}
       onClick={() => onClick?.()}>
       <span className="icon-part d-flex align-items-center">
-        <FontAwesomeIcon icon={icon} className={'icon'}/>
+        <ForkAwesomeIcon icon={icon} className={'icon'}/>
       </span>
       <span className="text-part d-flex align-items-center">
         {children}

src/components/landing/layout/footer/social-links.tsx

@@ -7,10 +7,10 @@ const SocialLink: React.FC = () => {
   return (
     <p>
       <Trans i18nKey="landing.footer.followUs" components={[
-        <ExternalLink href="https://github.com/codimd/server" icon={['fab', 'github']} text="GitHub"/>,
+        <ExternalLink href="https://github.com/codimd/server" icon='github' text="GitHub"/>,
-        <ExternalLink href="https://community.codimd.org" icon={['fab', 'discourse']} text="Discourse"/>,
+        <ExternalLink href="https://community.codimd.org" icon='users' text="Discourse"/>,
         <ExternalLink href="https://riot.im/app/#/room/#codimd:matrix.org" icon="comment" text="Riot"/>,
-        <ExternalLink href="https://social.codimd.org/mastodon" icon={['fab', 'mastodon']} text="Mastodon"/>,
+        <ExternalLink href="https://social.codimd.org/mastodon" icon='mastodon' text="Mastodon"/>,
         <ExternalLink href="https://translate.codimd.org" icon="globe" text="POEditor"/>
       ]}/>
     </p>

src/components/landing/layout/navigation/new-guest-note-button.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { LinkContainer } from 'react-router-bootstrap'
 import { Button } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
 
 export const NewGuestNoteButton: React.FC = () => {
   const { t } = useTranslation()
@@ -12,7 +12,7 @@ export const NewGuestNoteButton: React.FC = () => {
         variant="primary"
         size="sm"
         className="d-inline-flex align-items-center">
-        <FontAwesomeIcon icon="plus" className="mr-1"/>
+        <ForkAwesomeIcon icon="plus" className="mr-1"/>
         <span>
           <Trans i18nKey='landing.navigation.newGuestNote'/>
         </span>

src/components/landing/layout/navigation/new-user-note-button.tsx

@@ -1,8 +1,8 @@
 import { LinkContainer } from 'react-router-bootstrap'
 import { Button } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
 
 export const NewUserNoteButton: React.FC = () => {
   const { t } = useTranslation()
@@ -12,7 +12,7 @@ export const NewUserNoteButton: React.FC = () => {
         variant="primary"
         size="sm"
         className="d-inline-flex align-items-center">
-        <FontAwesomeIcon icon="plus" className="mr-1"/>
+        <ForkAwesomeIcon icon="plus" className="mr-1"/>
         <span>
           <Trans i18nKey='landing.navigation.newNote'/>
         </span>

src/components/landing/layout/navigation/user-dropdown/user-dropdown.tsx

@@ -1,7 +1,7 @@
 import { Dropdown } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 import { ApplicationState } from '../../../../../redux'
 import { LinkContainer } from 'react-router-bootstrap'
 import { clearUser } from '../../../../../redux/user/methods'
@@ -21,13 +21,13 @@ export const UserDropdown: React.FC = () => {
       <Dropdown.Menu>
         <LinkContainer to={'/features'}>
           <Dropdown.Item>
-            <FontAwesomeIcon icon="bolt" fixedWidth={true} className="mr-2"/>
+            <ForkAwesomeIcon icon="bolt" fixedWidth={true} className="mr-2"/>
             <Trans i18nKey="editor.help.documents.features"/>
           </Dropdown.Item>
         </LinkContainer>
         <LinkContainer to={'/profile'}>
           <Dropdown.Item>
-            <FontAwesomeIcon icon="user" fixedWidth={true} className="mr-2"/>
+            <ForkAwesomeIcon icon="user" fixedWidth={true} className="mr-2"/>
             <Trans i18nKey="profile.userProfile"/>
           </Dropdown.Item>
         </LinkContainer>
@@ -35,7 +35,7 @@ export const UserDropdown: React.FC = () => {
           onClick={() => {
             clearUser()
           }}>
-          <FontAwesomeIcon icon="sign-out-alt" fixedWidth={true} className="mr-2"/>
+          <ForkAwesomeIcon icon="sign-out" fixedWidth={true} className="mr-2"/>
           <Trans i18nKey="login.signOut"/>
         </Dropdown.Item>
       </Dropdown.Menu>

src/components/landing/layout/version-info/version-input-field.tsx

@@ -1,14 +1,14 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { Fragment, useRef, useState } from 'react'
 import { Button, FormControl, InputGroup, Overlay, Tooltip } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
 
 export interface VersionInputFieldProps {
   version: string
 }
 
 export const VersionInputField: React.FC<VersionInputFieldProps> = ({ version }) => {
-  useTranslation();
+  useTranslation()
   const inputField = useRef<HTMLInputElement>(null)
   const [showCopiedTooltip, setShowCopiedTooltip] = useState(false)
 
@@ -35,7 +35,7 @@ export const VersionInputField: React.FC<VersionInputFieldProps> = ({ version })
         <FormControl readOnly={true} ref={inputField} className={'text-center'} value={version} />
         <InputGroup.Append>
           <Button variant="outline-secondary" onClick={() => copyToClipboard(version)} title={'Copy'}>
-            <FontAwesomeIcon icon={'copy'}/>
+            <ForkAwesomeIcon icon='files-o'/>
           </Button>
         </InputGroup.Append>
       </InputGroup>

src/components/landing/pages/history/common/close-button.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './close-button.scss'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 
 export interface CloseButtonProps {
   isDark: boolean;
@@ -10,7 +10,7 @@ export interface CloseButtonProps {
 const CloseButton: React.FC<CloseButtonProps> = ({ isDark }) => {
   return (
     <Button variant={isDark ? 'secondary' : 'light'}>
-      <FontAwesomeIcon
+      <ForkAwesomeIcon
         className="history-close"
         icon="times"
       />

src/components/landing/pages/history/common/pin-button.tsx

@@ -1,7 +1,7 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import './pin-button.scss'
 import { Button } from 'react-bootstrap'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 
 export interface PinButtonProps {
   isPinned: boolean;
@@ -13,8 +13,8 @@ export const PinButton: React.FC<PinButtonProps> = ({ isPinned, onPinClick, isDa
   return (
     <Button variant={isDark ? 'secondary' : 'light'}
       onClick={onPinClick}>
-      <FontAwesomeIcon
+      <ForkAwesomeIcon
-        icon="thumbtack"
+        icon="thumb-tack"
         className={`history-pin ${isPinned ? 'active' : ''}`}
       />
     </Button>

src/components/landing/pages/history/history-card/history-card.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Badge, Card } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 import { PinButton } from '../common/pin-button'
 import { CloseButton } from '../common/close-button'
 import moment from 'moment'
@@ -20,7 +20,7 @@ export const HistoryCard: React.FC<HistoryEntryProps> = ({ entry, onPinClick })
         </div>
         <Card.Body>
           <div className="text-black-50">
-            <FontAwesomeIcon icon="clock"/> {moment(entry.lastVisited).fromNow()}<br/>
+            <ForkAwesomeIcon icon="clock-o"/> {moment(entry.lastVisited).fromNow()}<br/>
             {formatHistoryDate(entry.lastVisited)}
             <div>
               {

src/components/landing/pages/history/history-toolbar/clear-history-button.tsx

@@ -1,7 +1,7 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useState, Fragment } from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 
 export interface ClearHistoryButtonProps {
   onClearHistory: () => void
@@ -17,7 +17,7 @@ export const ClearHistoryButton: React.FC<ClearHistoryButtonProps> = ({ onClearH
   return (
     <Fragment>
       <Button variant={'light'} title={t('landing.history.toolbar.clear')} onClick={handleShow}>
-        <FontAwesomeIcon icon={'trash'}/>
+        <ForkAwesomeIcon icon={'trash'}/>
       </Button>
       <Modal show={show} onHide={handleClose} animation={true} className="text-dark">
         <Modal.Header closeButton>

src/components/landing/pages/history/history-toolbar/history-toolbar.tsx

@@ -1,11 +1,11 @@
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import { Button, Form, FormControl, InputGroup, ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { SortButton, SortModeEnum } from '../../../../sort-button/sort-button'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import './typeahead-hacks.scss'
 import { ClearHistoryButton } from './clear-history-button'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 
 export type HistoryToolbarChange = (settings: HistoryToolbarState) => void;
 
@@ -95,12 +95,12 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
       </InputGroup>
       <InputGroup className={'mr-1 mb-1'}>
         <Button variant={'light'} title={t('landing.history.toolbar.export')}>
-          <FontAwesomeIcon icon={'download'}/>
+          <ForkAwesomeIcon icon='download'/>
         </Button>
       </InputGroup>
       <InputGroup className={'mr-1 mb-1'}>
         <Button variant={'light'} title={t('landing.history.toolbar.import')}>
-          <FontAwesomeIcon icon={'upload'}/>
+          <ForkAwesomeIcon icon='upload'/>
         </Button>
       </InputGroup>
       <InputGroup className={'mr-1 mb-1'}>
@@ -108,7 +108,7 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
       </InputGroup>
       <InputGroup className={'mr-1 mb-1'}>
         <Button variant={'light'} title={t('landing.history.toolbar.refresh')}>
-          <FontAwesomeIcon icon={'sync'}/>
+          <ForkAwesomeIcon icon='refresh'/>
         </Button>
       </InputGroup>
       <InputGroup className={'mr-1 mb-1'}>

src/components/landing/pages/intro/feature-links.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { Col, Row } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
 
 export const FeatureLinks: React.FC = () => {
   useTranslation()
@@ -10,7 +10,7 @@ export const FeatureLinks: React.FC = () => {
     <Row className="mb-5">
       <Col md={4}>
         <Link to={'/features#Share-Notes'} className="text-light">
-          <FontAwesomeIcon icon="bolt" size="3x"/>
+          <ForkAwesomeIcon icon="bolt" size="3x"/>
           <h5>
             <Trans i18nKey="landing.intro.features.collaboration"/>
           </h5>
@@ -18,7 +18,7 @@ export const FeatureLinks: React.FC = () => {
       </Col>
       <Col md={4}>
         <Link to={'/features#MathJax'} className="text-light">
-          <FontAwesomeIcon icon="chart-bar" size="3x"/>
+          <ForkAwesomeIcon icon="bar-chart" size="3x"/>
           <h5>
             <Trans i18nKey="landing.intro.features.mathJax"/>
           </h5>
@@ -26,7 +26,7 @@ export const FeatureLinks: React.FC = () => {
       </Col>
       <Col md={4}>
         <Link to={'/features#Slide-Mode'} className="text-light">
-          <FontAwesomeIcon icon="tv" size="3x"/>
+          <ForkAwesomeIcon icon="television" size="3x"/>
           <h5>
             <Trans i18nKey="landing.intro.features.slides"/>
           </h5>

src/components/landing/pages/intro/intro.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
+import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
 import screenshot from './img/screenshot.png'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Trans, useTranslation } from 'react-i18next'
 import { FeatureLinks } from './feature-links'
 import { CoverButtons } from './cover-buttons/cover-buttons'
@@ -11,7 +11,7 @@ const Intro: React.FC = () => {
   return (
     <div>
       <h1>
-        <FontAwesomeIcon icon="file-alt"/> CodiMD
+        <ForkAwesomeIcon icon="file-text"/> CodiMD
       </h1>
       <p className="lead mb-5">
         <Trans i18nKey="app.slogan"/>
@@ -19,7 +19,7 @@ const Intro: React.FC = () => {
 
       <CoverButtons/>
 
-      <img alt={t("landing.intro.screenShotAltText")} src={screenshot} className="img-fluid mb-5"/>
+      <img alt={t('landing.intro.screenShotAltText')} src={screenshot} className="img-fluid mb-5"/>
       <FeatureLinks/>
     </div>
   )

src/components/landing/pages/login/auth/social-link-button/social-link-button.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './social-link-button.scss'
-import { IconProp } from '../../../../../../utils/iconProp'
+import { ForkAwesomeIcon, IconName } from '../../../../../../fork-awesome/fork-awesome-icon'
 
 export interface SocialButtonProps {
   backgroundClass: string,
   href: string
-  icon: IconProp
+  icon: IconName
   title?: string
 }
 
@@ -15,7 +14,7 @@ export const SocialLinkButton: React.FC<SocialButtonProps> = ({ title, backgroun
     <a href={href} title={title}
       className={'btn social-link-button p-0 d-inline-flex align-items-stretch ' + backgroundClass}>
       <span className="icon-part d-flex align-items-center">
-        <FontAwesomeIcon icon={icon} className={'social-icon'} fixedWidth={true}/>
+        <ForkAwesomeIcon icon={icon} className={'social-icon'} fixedWidth={true}/>
       </span>
       <span className="text-part d-flex align-items-center mx-auto">
         {children}

src/components/landing/pages/login/auth/via-one-click.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconProp } from '../../../../../utils/iconProp'
+import { IconName } from '../../../../../fork-awesome/fork-awesome-icon'
 import { SocialLinkButton } from './social-link-button/social-link-button'
 
 export enum OneClickType {
@@ -15,7 +15,7 @@ export enum OneClickType {
 
 type OneClick2Map = (oneClickType: OneClickType) => {
   name: string,
-  icon: IconProp,
+  icon: IconName,
   className: string,
   url: string
 };
@@ -29,35 +29,35 @@ const getMetadata: OneClick2Map = (oneClickType: OneClickType) => {
     case OneClickType.DROPBOX:
       return {
         name: 'Dropbox',
-        icon: ['fab', 'dropbox'],
+        icon: 'dropbox',
         className: 'btn-social-dropbox',
         url: buildBackendAuthUrl('dropbox')
       }
     case OneClickType.FACEBOOK:
       return {
         name: 'Facebook',
-        icon: ['fab', 'facebook'],
+        icon: 'facebook',
         className: 'btn-social-facebook',
         url: buildBackendAuthUrl('facebook')
       }
     case OneClickType.GITHUB:
       return {
         name: 'GitHub',
-        icon: ['fab', 'github'],
+        icon: 'github',
         className: 'btn-social-github',
         url: buildBackendAuthUrl('github')
       }
     case OneClickType.GITLAB:
       return {
         name: 'GitLab',
-        icon: ['fab', 'gitlab'],
+        icon: 'gitlab',
         className: 'btn-social-gitlab',
         url: buildBackendAuthUrl('gitlab')
       }
     case OneClickType.GOOGLE:
       return {
         name: 'Google',
-        icon: ['fab', 'google'],
+        icon: 'google',
         className: 'btn-social-google',
         url: buildBackendAuthUrl('google')
       }
@@ -78,7 +78,7 @@ const getMetadata: OneClick2Map = (oneClickType: OneClickType) => {
     case OneClickType.TWITTER:
       return {
         name: 'Twitter',
-        icon: ['fab', 'twitter'],
+        icon: 'twitter',
         className: 'btn-social-twitter',
         url: buildBackendAuthUrl('twitter')
       }

src/components/landing/pages/profile/settings/profile-account-management.tsx

@@ -1,8 +1,8 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { Fragment, useEffect, useRef, useState } from 'react'
 import { Button, Card, Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { deleteUser } from '../../../../../api/user'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 import { clearUser } from '../../../../../redux/user/methods'
 import { getBackendUrl } from '../../../../../utils/apiUtils'
 
@@ -58,11 +58,11 @@ export const ProfileAccountManagement: React.FC = () => {
         <Card.Body>
           <Card.Title><Trans i18nKey="profile.accountManagement"/></Card.Title>
           <Button variant="secondary" block href={getBackendUrl() + '/me/export'} className="mb-2">
-            <FontAwesomeIcon icon="cloud-download-alt" fixedWidth={true} className="mr-2"/>
+            <ForkAwesomeIcon icon="cloud-download" fixedWidth={true} className="mr-2"/>
             <Trans i18nKey="profile.exportUserData"/>
           </Button>
           <Button variant="danger" block onClick={handleModalOpen}>
-            <FontAwesomeIcon icon="trash" fixedWidth={true} className="mr-2"/>
+            <ForkAwesomeIcon icon="trash" fixedWidth={true} className="mr-2"/>
             <Trans i18nKey="profile.deleteUser"/>
           </Button>
         </Card.Body>

src/components/links/external-link.tsx

@@ -1,5 +1,5 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { Fragment } from 'react'
+import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
 import { LinkWithTextProps } from './types'
 
 export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
@@ -11,7 +11,7 @@ export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, cl
       {
         icon
           ? <Fragment>
-            <FontAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
+            <ForkAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
           </Fragment>
           : null
       }

src/components/links/internal-link.tsx

@@ -1,6 +1,6 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { Fragment } from 'react'
 import { LinkContainer } from 'react-router-bootstrap'
+import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
 import { LinkWithTextProps } from './types'
 
 export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
@@ -11,7 +11,7 @@ export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, cl
         {
           icon
             ? <Fragment>
-              <FontAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
+              <ForkAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
             </Fragment>
             : null
         }

src/components/links/types.ts

@@ -1,9 +1,9 @@
 import { StringMap, TOptionsBase } from 'i18next'
-import { IconProp } from '../../utils/iconProp'
+import { IconName } from '../../fork-awesome/fork-awesome-icon'
 
 export interface GeneralLinkProp {
   href: string;
-  icon?: IconProp;
+  icon?: IconName;
   className?: string
 }
 

src/components/sort-button/sort-button.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ButtonProps } from 'react-bootstrap'
-import { IconProp } from '../../utils/iconProp'
+import { IconName } from '../../fork-awesome/fork-awesome-icon'
 import { IconButton } from '../icon-button/icon-button'
 
 export enum SortModeEnum {
@@ -9,15 +9,15 @@ export enum SortModeEnum {
     no = 0
 }
 
-const getIcon = (direction: SortModeEnum): IconProp => {
+const getIcon = (direction: SortModeEnum): IconName => {
   switch (direction) {
     default:
     case SortModeEnum.no:
       return 'sort'
     case SortModeEnum.up:
-      return 'sort-up'
+      return 'sort-asc'
     case SortModeEnum.down:
-      return 'sort-down'
+      return 'sort-desc'
   }
 }
 

src/index.tsx

@@ -9,13 +9,10 @@ import { History } from './components/landing/pages/history/history'
 import { Intro } from './components/landing/pages/intro/intro'
 import { Login } from './components/landing/pages/login/login'
 import { Profile } from './components/landing/pages/profile/profile'
-import { setUpFontAwesome } from './initializers/fontAwesome'
 import * as serviceWorker from './service-worker'
 import { store } from './utils/store'
 import './style/index.scss'
 
-setUpFontAwesome()
-
 ReactDOM.render(
   <Provider store={store}>
     <Router>

src/initializers/fontAwesome.ts

@@ -1,61 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTwitter,
-  faMastodon,
-  faGoogle,
-  faFacebook,
-  faDropbox,
-  faDiscourse,
-  faGithub,
-  faGitlab
-} from '@fortawesome/free-brands-svg-icons'
-import {
-  faAddressCard,
-  faBolt,
-  faChartBar,
-  faCircle,
-  faClock,
-  faCloudDownloadAlt,
-  faColumns,
-  faComment,
-  faCopy,
-  faDotCircle,
-  faDownload,
-  faEye,
-  faFileAlt,
-  faFileCode,
-  faGlobe,
-  faHashtag,
-  faHistory,
-  faLanguage,
-  faMoon,
-  faPaste,
-  faPencilAlt,
-  faPlus,
-  faQuestionCircle,
-  faShareSquare,
-  faSignOutAlt,
-  faSort,
-  faSortDown,
-  faSortUp,
-  faSun,
-  faSync,
-  faTag,
-  faThumbtack,
-  faTimes,
-  faTrash,
-  faTv,
-  faUpload,
-  faUser,
-  faUsers
-} from '@fortawesome/free-solid-svg-icons'
-
-export const setUpFontAwesome: (() => void) = () => {
-  library.add(faBolt, faPlus, faChartBar, faTv, faFileAlt, faCloudDownloadAlt,
-    faTrash, faSignOutAlt, faComment, faDiscourse, faMastodon, faGlobe, faUser,
-    faThumbtack, faClock, faTimes, faGithub, faGitlab, faGoogle, faFacebook,
-    faDropbox, faTwitter, faUsers, faAddressCard, faEye, faPencilAlt, faColumns,
-    faMoon, faQuestionCircle, faShareSquare, faHistory, faFileCode, faPaste,
-    faCircle, faSort, faDownload, faUpload, faTrash, faSync, faSortUp, faSortDown, faCopy,
-    faHashtag, faLanguage, faTag, faDotCircle, faSun)
-}

src/utils/iconProp.ts

@@ -1,4 +0,0 @@
-import { IconLookup, IconName, IconPrefix } from '@fortawesome/fontawesome-common-types'
-
-// This icon prop is a workaround, because ESLint doesn't find the font awesome IconProp
-export type IconProp = IconName | [IconPrefix, IconName] | IconLookup

yarn.lock

@@ -1046,39 +1046,6 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@fortawesome/fontawesome-common-types@^0.2.28":
-  version "0.2.28"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
-  integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==
-
-"@fortawesome/fontawesome-svg-core@^1.2.28":
-  version "1.2.28"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
-  integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.28"
-
-"@fortawesome/free-brands-svg-icons@^5.13.0":
-  version "5.13.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz#e79de73ba6555055204828dca9c0691e7ce5242b"
-  integrity sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.28"
-
-"@fortawesome/free-solid-svg-icons@^5.13.0":
-  version "5.13.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz#44d9118668ad96b4fd5c9434a43efc5903525739"
-  integrity sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.28"
-
-"@fortawesome/react-fontawesome@^0.1.9":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz#c865b9286c707407effcec99958043711367cd02"
-  integrity sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==
-  dependencies:
-    prop-types "^15.7.2"
-
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -4941,6 +4908,11 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
+fork-awesome@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/fork-awesome/-/fork-awesome-1.1.7.tgz#1427da1cac3d1713046ee88427e5fcecb9501d21"
+  integrity sha512-IHI7XCSXrKfUIWslse8c/PaaVDT1oBaYge+ju40ihL2ooiQeBpTr4wvIXhgTd2NuhntlvX+M5jYHAPTzNlmv0g==
+
 fork-ts-checker-webpack-plugin@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-3.1.1.tgz#a1642c0d3e65f50c2cc1742e9c0a80f441f86b19"