diff --git a/package.json b/package.json
index 380316125..e78311607 100644
--- a/package.json
+++ b/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-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"
+ "typescript": "~3.7.2"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/components/application-loader/loading-screen.tsx b/src/components/application-loader/loading-screen.tsx
index 0477c375f..f157b7985 100644
--- a/src/components/application-loader/loading-screen.tsx
+++ b/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>
{
diff --git a/src/components/editor/task-bar/connection-indicator.tsx b/src/components/editor/task-bar/connection-indicator.tsx
index 9115ba2b4..4e4f9eaca 100644
--- a/src/components/editor/task-bar/connection-indicator.tsx
+++ b/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">
diff --git a/src/components/editor/task-bar/dark-mode-button.tsx b/src/components/editor/task-bar/dark-mode-button.tsx
index 61ba5e7be..4faf5cc55 100644
--- a/src/components/editor/task-bar/dark-mode-button.tsx
+++ b/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"/>
- : <FontAwesomeIcon icon="moon"/>
+ ? <ForkAwesomeIcon icon="sun"/>
+ : <ForkAwesomeIcon icon="moon"/>
}
</ToggleButton>
</ToggleButtonGroup>
diff --git a/src/components/editor/task-bar/editor-menu.tsx b/src/components/editor/task-bar/editor-menu.tsx
index 169ccf8b8..a8a9b479d 100644
--- a/src/components/editor/task-bar/editor-menu.tsx
+++ b/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>
diff --git a/src/components/editor/task-bar/editor-view-mode.tsx b/src/components/editor/task-bar/editor-view-mode.tsx
index 92ac12919..e1f587273 100644
--- a/src/components/editor/task-bar/editor-view-mode.tsx
+++ b/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>
)
diff --git a/src/components/editor/task-bar/help-button.tsx b/src/components/editor/task-bar/help-button.tsx
index 8d7b83800..2c982ac13 100644
--- a/src/components/editor/task-bar/help-button.tsx
+++ b/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>
diff --git a/src/components/editor/task-bar/task-bar.tsx b/src/components/editor/task-bar/task-bar.tsx
index 48b9ae58a..057749ad5 100644
--- a/src/components/editor/task-bar/task-bar.tsx
+++ b/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/>
diff --git a/src/components/icon-button/icon-button.tsx b/src/components/icon-button/icon-button.tsx
index 9ab31d827..6a058d3bf 100644
--- a/src/components/icon-button/icon-button.tsx
+++ b/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}
diff --git a/src/components/landing/layout/footer/social-links.tsx b/src/components/landing/layout/footer/social-links.tsx
index f7410eed5..7ff5c8e33 100644
--- a/src/components/landing/layout/footer/social-links.tsx
+++ b/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://community.codimd.org" icon={['fab', 'discourse']} text="Discourse"/>,
+ <ExternalLink href="https://github.com/codimd/server" icon='github' text="GitHub"/>,
+ <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>
diff --git a/src/components/landing/layout/navigation/new-guest-note-button.tsx b/src/components/landing/layout/navigation/new-guest-note-button.tsx
index 2cbeaca74..ec396da3e 100644
--- a/src/components/landing/layout/navigation/new-guest-note-button.tsx
+++ b/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>
diff --git a/src/components/landing/layout/navigation/new-user-note-button.tsx b/src/components/landing/layout/navigation/new-user-note-button.tsx
index f249577e1..029c48284 100644
--- a/src/components/landing/layout/navigation/new-user-note-button.tsx
+++ b/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>
diff --git a/src/components/landing/layout/navigation/user-dropdown/user-dropdown.tsx b/src/components/landing/layout/navigation/user-dropdown/user-dropdown.tsx
index 214c25c9d..3e1029047 100644
--- a/src/components/landing/layout/navigation/user-dropdown/user-dropdown.tsx
+++ b/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>
diff --git a/src/components/landing/layout/version-info/version-input-field.tsx b/src/components/landing/layout/version-info/version-input-field.tsx
index db5969b1d..2c75c7e8b 100644
--- a/src/components/landing/layout/version-info/version-input-field.tsx
+++ b/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>
diff --git a/src/components/landing/pages/history/common/close-button.tsx b/src/components/landing/pages/history/common/close-button.tsx
index 5625b8d57..ecc9739cf 100644
--- a/src/components/landing/pages/history/common/close-button.tsx
+++ b/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"
/>
diff --git a/src/components/landing/pages/history/common/pin-button.tsx b/src/components/landing/pages/history/common/pin-button.tsx
index e4f731253..f19921ba1 100644
--- a/src/components/landing/pages/history/common/pin-button.tsx
+++ b/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
- icon="thumbtack"
+ <ForkAwesomeIcon
+ icon="thumb-tack"
className={`history-pin ${isPinned ? 'active' : ''}`}
/>
</Button>
diff --git a/src/components/landing/pages/history/history-card/history-card.tsx b/src/components/landing/pages/history/history-card/history-card.tsx
index 3a3b5dedc..c431d5550 100644
--- a/src/components/landing/pages/history/history-card/history-card.tsx
+++ b/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>
{
diff --git a/src/components/landing/pages/history/history-toolbar/clear-history-button.tsx b/src/components/landing/pages/history/history-toolbar/clear-history-button.tsx
index 0e273b366..cb830536d 100644
--- a/src/components/landing/pages/history/history-toolbar/clear-history-button.tsx
+++ b/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>
@@ -26,7 +26,7 @@ export const ClearHistoryButton: React.FC<ClearHistoryButtonProps> = ({ onClearH
</Modal.Title>
</Modal.Header>
<Modal.Body className="text-dark">
- <h5><Trans i18nKey={'landing.history.modal.clearHistory.question'}/></h5>
+ <h5><Trans i18nKey={'landing.history.modal.clearHistory.question'}/></h5>
<h6><Trans i18nKey={'landing.history.modal.clearHistory.disclaimer'}/></h6>
</Modal.Body>
<Modal.Footer>
diff --git a/src/components/landing/pages/history/history-toolbar/history-toolbar.tsx b/src/components/landing/pages/history/history-toolbar/history-toolbar.tsx
index eb12e8658..4ece09660 100644
--- a/src/components/landing/pages/history/history-toolbar/history-toolbar.tsx
+++ b/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'}>
diff --git a/src/components/landing/pages/intro/feature-links.tsx b/src/components/landing/pages/intro/feature-links.tsx
index 225020ff7..2a17de54e 100644
--- a/src/components/landing/pages/intro/feature-links.tsx
+++ b/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>
diff --git a/src/components/landing/pages/intro/intro.tsx b/src/components/landing/pages/intro/intro.tsx
index f902f620e..9dc5cc520 100644
--- a/src/components/landing/pages/intro/intro.tsx
+++ b/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>
)
diff --git a/src/components/landing/pages/login/auth/social-link-button/social-link-button.tsx b/src/components/landing/pages/login/auth/social-link-button/social-link-button.tsx
index 9a99aa806..99f8249ed 100644
--- a/src/components/landing/pages/login/auth/social-link-button/social-link-button.tsx
+++ b/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}
diff --git a/src/components/landing/pages/login/auth/via-one-click.tsx b/src/components/landing/pages/login/auth/via-one-click.tsx
index a458d9ab6..d3e272d86 100644
--- a/src/components/landing/pages/login/auth/via-one-click.tsx
+++ b/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')
}
diff --git a/src/components/landing/pages/profile/settings/profile-account-management.tsx b/src/components/landing/pages/profile/settings/profile-account-management.tsx
index e0fc545ca..c46d7b65c 100644
--- a/src/components/landing/pages/profile/settings/profile-account-management.tsx
+++ b/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>
diff --git a/src/components/links/external-link.tsx b/src/components/links/external-link.tsx
index a68bdccc5..4df46ee3f 100644
--- a/src/components/links/external-link.tsx
+++ b/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}/>
+ <ForkAwesomeIcon icon={icon} fixedWidth={true}/>
</Fragment>
: null
}
diff --git a/src/components/links/internal-link.tsx b/src/components/links/internal-link.tsx
index 96cb0f9f8..9ab757031 100644
--- a/src/components/links/internal-link.tsx
+++ b/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}/>
+ <ForkAwesomeIcon icon={icon} fixedWidth={true}/>
</Fragment>
: null
}
diff --git a/src/components/links/types.ts b/src/components/links/types.ts
index b6c5b5f8d..efab57f92 100644
--- a/src/components/links/types.ts
+++ b/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
}
diff --git a/src/components/sort-button/sort-button.tsx b/src/components/sort-button/sort-button.tsx
index 4a5a2d432..10159a10c 100644
--- a/src/components/sort-button/sort-button.tsx
+++ b/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'
}
}
diff --git a/src/fork-awesome/fork-awesome-icon.tsx b/src/fork-awesome/fork-awesome-icon.tsx
new file mode 100644
index 000000000..d2fd97b05
--- /dev/null
+++ b/src/fork-awesome/fork-awesome-icon.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import 'fork-awesome/css/fork-awesome.min.css'
+
+export type IconName = '500px'|'activitypub'|'address-book-o'|'address-book'|'address-card-o'|'address-card'|'adjust'|'adn'|'align-center'|'align-justify'|'align-left'|'align-right'|'amazon'|'ambulance'|'american-sign-language-interpreting'|'anchor'|'android'|'angellist'|'angle-double-down'|'angle-double-left'|'angle-double-right'|'angle-double-up'|'angle-down'|'angle-left'|'angle-right'|'angle-up'|'apple'|'archive-org'|'archive'|'archlinux'|'area-chart'|'arrow-circle-down'|'arrow-circle-left'|'arrow-circle-o-down'|'arrow-circle-o-left'|'arrow-circle-o-right'|'arrow-circle-o-up'|'arrow-circle-right'|'arrow-circle-up'|'arrow-down'|'arrow-left'|'arrow-right'|'arrows-alt'|'arrows-h'|'arrows'|'arrows-v'|'arrow-up'|'artstation'|'assistive-listening-systems'|'asterisk'|'at'|'att'|'audio-description'|'backward'|'balance-scale'|'bandcamp'|'ban'|'bar-chart'|'barcode'|'bars'|'bath'|'battery-empty'|'battery-full'|'battery-half'|'battery-quarter'|'battery-three-quarters'|'bed'|'beer'|'behance-square'|'behance'|'bell-o'|'bell-rigning-o'|'bell-ringing'|'bell-slash-o'|'bell-slash'|'bell'|'bicycle'|'binoculars'|'biometric'|'birthday-cake'|'bitbucket-square'|'bitbucket'|'black-tie'|'blind'|'bluetooth-b'|'bluetooth'|'bold'|'bolt'|'bomb'|'bookmark-o'|'bookmark'|'book'|'bootstrap'|'braille'|'briefcase'|'btc'|'bug'|'building-o'|'building'|'bullhorn'|'bullseye'|'bus'|'buysellads'|'calculator'|'calendar-check-o'|'calendar-minus-o'|'calendar-o'|'calendar-plus-o'|'calendar'|'calendar-times-o'|'camera-retro'|'camera'|'caret-down'|'caret-left'|'caret-right'|'caret-square-o-down'|'caret-square-o-left'|'caret-square-o-right'|'caret-square-o-up'|'caret-up'|'car'|'cart-arrow-down'|'cart-plus'|'cc-amex'|'cc-diners-club'|'cc-discover'|'cc-jcb'|'cc-mastercard'|'cc-paypal'|'cc-stripe'|'cc'|'cc-visa'|'certificate'|'chain-broken'|'check-circle-o'|'check-circle'|'check-square-o'|'check-square'|'check'|'chevron-circle-down'|'chevron-circle-left'|'chevron-circle-right'|'chevron-circle-up'|'chevron-down'|'chevron-left'|'chevron-right'|'chevron-up'|'child'|'chrome'|'circle-o-notch'|'circle-o'|'circle'|'circle-thin'|'classicpress-circle'|'classicpress'|'clipboard'|'clock-o'|'clone'|'cloud-download'|'cloud'|'cloud-upload'|'code-fork'|'codepen'|'code'|'codiepie'|'coffee'|'cogs'|'cog'|'columns'|'commenting-o'|'commenting'|'comment-o'|'comments-o'|'comments'|'comment'|'compass'|'compress'|'connectdevelop'|'contao'|'copyright'|'creative-commons'|'credit-card-alt'|'credit-card'|'crop'|'crosshairs'|'css3'|'c'|'cubes'|'cube'|'cutlery'|'dashcube'|'database'|'deaf'|'debian'|'delicious'|'desktop'|'deviantart'|'dev-to'|'diamond'|'diaspora'|'digg'|'digitalocean'|'discord-alt'|'discord'|'dogmazic'|'dot-circle-o'|'download'|'dribbble'|'dropbox'|'drupal'|'edge'|'eercast'|'eject'|'ellipsis-h'|'ellipsis-v'|'emby'|'empire'|'envelope-open-o'|'envelope-open'|'envelope-o'|'envelope-square'|'envelope'|'envira'|'eraser'|'ethereum'|'etsy'|'eur'|'exchange'|'exclamation-circle'|'exclamation'|'exclamation-triangle'|'expand'|'expeditedssl'|'external-link-square'|'external-link'|'eyedropper'|'eye-slash'|'eye'|'facebook-messenger'|'facebook-official'|'facebook-square'|'facebook'|'fast-backward'|'fast-forward'|'fax'|'f-droid'|'female'|'ffmpeg'|'fighter-jet'|'file-archive-o'|'file-audio-o'|'file-code-o'|'file-epub'|'file-excel-o'|'file-image-o'|'file-o'|'file-pdf-o'|'file-powerpoint-o'|'files-o'|'file'|'file-text-o'|'file-text'|'file-video-o'|'file-word-o'|'film'|'filter'|'fire-extinguisher'|'firefox'|'fire'|'first-order'|'flag-checkered'|'flag-o'|'flag'|'flask'|'flickr'|'floppy-o'|'folder-open-o'|'folder-open'|'folder-o'|'folder'|'font-awesome'|'fonticons'|'font'|'fork-awesome'|'fort-awesome'|'forumbee'|'forward'|'foursquare'|'free-code-camp'|'freedombox'|'friendica'|'frown-o'|'funkwhale'|'futbol-o'|'gamepad'|'gavel'|'gbp'|'genderless'|'get-pocket'|'gg-circle'|'gg'|'gift'|'gimp'|'gitea'|'github-alt'|'github-square'|'github'|'gitlab'|'git-square'|'git'|'glass'|'glide-g'|'glide'|'globe-e'|'globe'|'globe-w'|'gnupg'|'gnu-social'|'google-plus-official'|'google-plus-square'|'google-plus'|'google'|'google-wallet'|'graduation-cap'|'gratipay'|'grav'|'hackaday'|'hacker-news'|'hackster'|'hal'|'hand-lizard-o'|'hand-o-down'|'hand-o-left'|'hand-o-right'|'hand-o-up'|'hand-paper-o'|'hand-peace-o'|'hand-pointer-o'|'hand-rock-o'|'hand-scissors-o'|'handshake-o'|'hand-spock-o'|'hashnode'|'hashtag'|'hdd-o'|'header'|'headphones'|'heartbeat'|'heart-o'|'heart'|'history'|'home'|'hospital-o'|'hourglass-end'|'hourglass-half'|'hourglass-o'|'hourglass-start'|'hourglass'|'houzz'|'h-square'|'html5'|'hubzilla'|'i-cursor'|'id-badge'|'id-card-o'|'id-card'|'ils'|'imdb'|'inbox'|'indent'|'industry'|'info-circle'|'info'|'inkscape'|'inr'|'instagram'|'internet-explorer'|'ioxhost'|'italic'|'jirafeau'|'joomla'|'joplin'|'jpy'|'jsfiddle'|'julia'|'jupyter'|'keybase'|'keyboard-o'|'key-modern'|'key'|'krw'|'language'|'laptop'|'laravel'|'lastfm-square'|'lastfm'|'leaf'|'leanpub'|'lemon-o'|'level-down'|'level-up'|'liberapay-square'|'liberapay'|'life-ring'|'lightbulb-o'|'line-chart'|'linkedin-square'|'linkedin'|'link'|'linode'|'linux'|'list-alt'|'list-ol'|'list'|'list-ul'|'location-arrow'|'lock'|'long-arrow-down'|'long-arrow-left'|'long-arrow-right'|'long-arrow-up'|'low-vision'|'magic'|'magnet'|'male'|'map-marker'|'map-o'|'map-pin'|'map-signs'|'map'|'mars-double'|'mars-stroke-h'|'mars-stroke'|'mars-stroke-v'|'mars'|'mastodon-alt'|'mastodon-square'|'mastodon'|'matrix-org'|'maxcdn'|'meanpath'|'medium-square'|'medium'|'medkit'|'meetup'|'meh-o'|'mercury'|'microchip'|'microphone-slash'|'microphone'|'minus-circle'|'minus-square-o'|'minus-square'|'minus'|'mixcloud'|'mobile'|'modx'|'money'|'moon-o'|'moon'|'motorcycle'|'mouse-pointer'|'music'|'neuter'|'newspaper-o'|'nextcloud-square'|'nextcloud'|'nodejs'|'object-group'|'object-ungroup'|'odnoklassniki-square'|'odnoklassniki'|'opencart'|'open-collective'|'openid'|'opera'|'optin-monster'|'orcid'|'outdent'|'pagelines'|'paint-brush'|'paperclip'|'paper-plane-o'|'paper-plane'|'paragraph'|'patreon'|'pause-circle-o'|'pause-circle'|'pause'|'paw'|'paypal'|'peertube'|'pencil-square-o'|'pencil-square'|'pencil'|'percent'|'phone-square'|'phone'|'php'|'picture-o'|'pie-chart'|'pinterest-p'|'pinterest-square'|'pinterest'|'pixelfed'|'plane'|'play-circle-o'|'play-circle'|'play'|'pleroma'|'plug'|'plus-circle'|'plus-square-o'|'plus-square'|'plus'|'podcast'|'power-off'|'print'|'product-hunt'|'puzzle-piece'|'python'|'qq'|'qrcode'|'question-circle-o'|'question-circle'|'question'|'quora'|'quote-left'|'quote-right'|'random'|'ravelry'|'react'|'rebel'|'recycle'|'reddit-alien'|'reddit-square'|'reddit'|'refresh'|'registered'|'renren'|'repeat'|'reply-all'|'reply'|'researchgate'|'retweet'|'road'|'rocket'|'rss-square'|'rss'|'rub'|'safari'|'scissors'|'scribd'|'scuttlebutt'|'search-minus'|'search-plus'|'search'|'sellsy'|'server'|'shaarli-o'|'shaarli'|'share-alt-square'|'share-alt'|'share-square-o'|'share-square'|'share'|'shield'|'ship'|'shirtsinbulk'|'shopping-bag'|'shopping-basket'|'shopping-cart'|'shower'|'signalapp'|'signal'|'sign-in'|'sign-language'|'sign-out'|'simplybuilt'|'sitemap'|'skyatlas'|'skype'|'slack'|'sliders'|'slideshare'|'smile-o'|'snapchat-ghost'|'snapchat-square'|'snapchat'|'snowdrift'|'snowflake-o'|'social-home'|'sort-alpha-asc'|'sort-alpha-desc'|'sort-amount-asc'|'sort-amount-desc'|'sort-asc'|'sort-desc'|'sort-numeric-asc'|'sort-numeric-desc'|'sort'|'soundcloud'|'space-shuttle'|'spell-check'|'spinner'|'spoon'|'spotify'|'square-o'|'square'|'stack-exchange'|'stack-overflow'|'star-half-o'|'star-half'|'star-o'|'star'|'steam-square'|'steam'|'step-backward'|'step-forward'|'stethoscope'|'sticky-note-o'|'sticky-note'|'stop-circle-o'|'stop-circle'|'stop'|'street-view'|'strikethrough'|'stumbleupon-circle'|'stumbleupon'|'subscript'|'subway'|'suitcase'|'sun-o'|'sun'|'superpowers'|'superscript'|'syncthing'|'table'|'tablet'|'tachometer'|'tags'|'tag'|'tasks'|'taxi'|'telegram'|'television'|'tencent-weibo'|'terminal'|'text-height'|'text-width'|'themeisle'|'thermometer-empty'|'thermometer-full'|'thermometer-half'|'thermometer-quarter'|'thermometer-three-quarters'|'th-large'|'th-list'|'th'|'thumbs-down'|'thumbs-o-down'|'thumbs-o-up'|'thumbs-up'|'thumb-tack'|'ticket'|'times-circle-o'|'times-circle'|'times'|'tint'|'tipeee'|'toggle-off'|'toggle-on'|'tor-onion'|'trademark'|'train'|'transgender-alt'|'transgender'|'trash-o'|'trash'|'tree'|'trello'|'tripadvisor'|'trophy'|'truck'|'try'|'tty'|'tumblr-square'|'tumblr'|'twitch'|'twitter-square'|'twitter'|'umbrella'|'underline'|'undo'|'universal-access'|'university'|'unlock-alt'|'unlock'|'unslpash'|'upload'|'usb'|'usd'|'user-circle-o'|'user-circle'|'user-md'|'user-o'|'user-plus'|'user-secret'|'users'|'user'|'user-times'|'venus-double'|'venus-mars'|'venus'|'viacoin'|'viadeo-square'|'viadeo'|'video-camera'|'vimeo-square'|'vimeo'|'vine'|'vk'|'volume-control-phone'|'volume-down'|'volume-mute'|'volume-off'|'volume-up'|'weibo'|'weixin'|'whatsapp'|'wheelchair-alt'|'wheelchair'|'wifi'|'wikidata'|'wikipedia-w'|'window-close-o'|'window-close'|'window-maximize'|'window-minimize'|'window-restore'|'windows'|'wire'|'wordpress'|'wpbeginner'|'wpexplorer'|'wpforms'|'wrench'|'xing-square'|'xing'|'xmpp'|'yahoo'|'y-combinator'|'yelp'|'yoast'|'youtube-play'|'youtube-square'|'youtube'|'zotero'
+export type IconSize = '2x'|'3x'|'4x'|'5x'
+
+export interface ForkAwesomeIconProps {
+ icon: IconName
+ className?: string
+ fixedWidth?: boolean
+ size?: IconSize
+}
+
+export const ForkAwesomeIcon: React.FC<ForkAwesomeIconProps> = ({ icon, fixedWidth = false, size, className }) => {
+ const fixedWithClass = fixedWidth ? 'fa-fw' : ''
+ const sizeClass = size ? `fa-${size}` : ''
+ const extra = className || ''
+ return (
+ <i className={`fa ${fixedWithClass} fa-${icon} ${sizeClass} ${extra}`}/>
+ )
+}
diff --git a/src/index.tsx b/src/index.tsx
index cba82ab2d..3dc9d99d3 100644
--- a/src/index.tsx
+++ b/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>
diff --git a/src/initializers/fontAwesome.ts b/src/initializers/fontAwesome.ts
deleted file mode 100644
index 1d8dedf01..000000000
--- a/src/initializers/fontAwesome.ts
+++ /dev/null
@@ -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)
-}
diff --git a/src/utils/iconProp.ts b/src/utils/iconProp.ts
deleted file mode 100644
index a03b5de72..000000000
--- a/src/utils/iconProp.ts
+++ /dev/null
@@ -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
diff --git a/yarn.lock b/yarn.lock
index 1cee6fb57..05f305f26 100644
--- a/yarn.lock
+++ b/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"