feat(frontend): replace forkawesome with bootstrap icons

These icon replace fork awesome. A linter informs the user about the deprecation.

See https://github.com/hedgedoc/hedgedoc/issues/2929

Co-authored-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>
Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

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

@@ -6,6 +6,11 @@
 import links from '../../../links.json'
 import { ExternalLink } from '../../common/links/external-link'
 import React from 'react'
+import { Chat as IconChat } from 'react-bootstrap-icons'
+import { Github as IconGithub } from 'react-bootstrap-icons'
+import { Globe as IconGlobe } from 'react-bootstrap-icons'
+import { Mastodon as IconMastodon } from 'react-bootstrap-icons'
+import { People as IconPeople } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -18,11 +23,11 @@ export const SocialLink: React.FC = () => {
       <Trans
         i18nKey='landing.footer.followUs'
         components={[
-          <ExternalLink href={links.githubOrg} icon='github' key={'github'} text='GitHub' />,
-          <ExternalLink href={links.community} icon='users' key={'users'} text='Discourse' />,
-          <ExternalLink href={links.chat} icon='comment' key={'comment'} text='Matrix' />,
-          <ExternalLink href={links.mastodon} icon='mastodon' key={'mastodon'} text='Mastodon' />,
-          <ExternalLink href={links.translate} icon='globe' key={'globe'} text='POEditor' />
+          <ExternalLink href={links.githubOrg} icon={IconGithub} key={'github'} text='GitHub' />,
+          <ExternalLink href={links.community} icon={IconPeople} key={'users'} text='Discourse' />,
+          <ExternalLink href={links.chat} icon={IconChat} key={'comment'} text='Matrix' />,
+          <ExternalLink href={links.mastodon} icon={IconMastodon} key={'mastodon'} text='Mastodon' />,
+          <ExternalLink href={links.translate} icon={IconGlobe} key={'globe'} text='POEditor' />
         ]}
       />
     </p>

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

@@ -4,10 +4,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { cypressId } from '../../../utils/cypress-attribute'
-import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { UiIcon } from '../../common/icons/ui-icon'
 import Link from 'next/link'
 import React from 'react'
 import { Button } from 'react-bootstrap'
+import { Plus as IconPlus } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -23,7 +24,7 @@ export const NewGuestNoteButton: React.FC = () => {
         size='sm'
         className='d-inline-flex align-items-center'
         {...cypressId('new-guest-note-button')}>
-        <ForkAwesomeIcon icon='plus' className='mx-1' />
+        <UiIcon icon={IconPlus} className='mx-1' size={2} />
         <span>
           <Trans i18nKey='landing.navigation.newGuestNote' />
         </span>

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

@@ -4,10 +4,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { cypressId } from '../../../utils/cypress-attribute'
-import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { UiIcon } from '../../common/icons/ui-icon'
 import Link from 'next/link'
 import React from 'react'
 import { Button } from 'react-bootstrap'
+import { Plus as IconPlus } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -23,7 +24,7 @@ export const NewUserNoteButton: React.FC = () => {
         size='sm'
         className='d-inline-flex align-items-center'
         {...cypressId('new-note-button')}>
-        <ForkAwesomeIcon icon='plus' className='mx-1' />
+        <UiIcon icon={IconPlus} className='mx-1' size={2} />
         <span>
           <Trans i18nKey='landing.navigation.newNote' />
         </span>

frontend/src/components/landing-layout/navigation/sign-out-dropdown-button.tsx

@@ -6,10 +6,11 @@
 import { doLogout } from '../../../api/auth'
 import { clearUser } from '../../../redux/user/methods'
 import { cypressId } from '../../../utils/cypress-attribute'
-import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { UiIcon } from '../../common/icons/ui-icon'
 import { useUiNotifications } from '../../notifications/ui-notification-boundary'
 import React, { useCallback } from 'react'
 import { Dropdown } from 'react-bootstrap'
+import { BoxArrowRight as IconBoxArrowRight } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -26,7 +27,7 @@ export const SignOutDropdownButton: React.FC = () => {
 
   return (
     <Dropdown.Item dir='auto' onClick={onSignOut} {...cypressId('user-dropdown-sign-out-button')}>
-      <ForkAwesomeIcon icon='sign-out' fixedWidth={true} className='mx-2' />
+      <UiIcon icon={IconBoxArrowRight} className='mx-2' />
       <Trans i18nKey='login.signOut' />
     </Dropdown.Item>
   )

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

@@ -5,12 +5,14 @@
  */
 import { useApplicationState } from '../../../hooks/common/use-application-state'
 import { cypressId } from '../../../utils/cypress-attribute'
-import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { UiIcon } from '../../common/icons/ui-icon'
 import { UserAvatar } from '../../common/user-avatar/user-avatar'
 import { SignOutDropdownButton } from './sign-out-dropdown-button'
 import Link from 'next/link'
 import React from 'react'
 import { Dropdown } from 'react-bootstrap'
+import { Lightning as IconLightning } from 'react-bootstrap-icons'
+import { Person as IconPerson } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
 
 /**
@@ -33,13 +35,13 @@ export const UserDropdown: React.FC = () => {
       <Dropdown.Menu className='text-start'>
         <Link href={'/n/features'} passHref={true}>
           <Dropdown.Item dir='auto' {...cypressId('user-dropdown-features-button')}>
-            <ForkAwesomeIcon icon='bolt' fixedWidth={true} className='mx-2' />
+            <UiIcon icon={IconLightning} className='mx-2' />
             <Trans i18nKey='editor.help.documents.features' />
           </Dropdown.Item>
         </Link>
         <Link href={'/profile'} passHref={true}>
           <Dropdown.Item dir='auto' {...cypressId('user-dropdown-profile-button')}>
-            <ForkAwesomeIcon icon='user' fixedWidth={true} className='mx-2' />
+            <UiIcon icon={IconPerson} className='mx-2' />
             <Trans i18nKey='profile.userProfile' />
           </Dropdown.Item>
         </Link>