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/application-loader/loading-screen/animations.module.scss

@@ -43,8 +43,8 @@
   z-index: 1000;
   position: relative;
   font-size: 3em;
-  height: 240px;
-  width: 203px;
+  height: 5em;
+  width: 5em;
   color: #ffffff;
   text-shadow: 4px 4px 0 #3b4045;
 
@@ -55,10 +55,11 @@
     animation: fill 6s infinite;
     width: 100%;
 
-    &, :global(.fa) {
+    & > * {
       position: absolute;
       bottom: 0;
       left: 0;
+      z-index: 1001;
     }
   }
 }

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

@@ -3,11 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { UiIcon } from '../../common/icons/ui-icon'
 import { createNumberRangeArray } from '../../common/number-range/number-range'
 import styles from './animations.module.scss'
 import { IconRow } from './icon-row'
 import React, { useMemo } from 'react'
+import { Pencil as IconPencil } from 'react-bootstrap-icons'
+import { PencilFill as IconPencilFill } from 'react-bootstrap-icons'
 
 export interface HedgeDocLogoProps {
   error: boolean
@@ -25,10 +27,10 @@ export const LoadingAnimation: React.FC<HedgeDocLogoProps> = ({ error }) => {
     <div className={`position-relative ${error ? styles.error : ''}`}>
       <div className={styles.logo}>
         <div>
-          <ForkAwesomeIcon icon={'pencil'} className={styles.background} size={'5x'}></ForkAwesomeIcon>
+          <UiIcon icon={IconPencilFill} className={styles.background} size={5} />
         </div>
         <div className={`${styles.overlay}`}>
-          <ForkAwesomeIcon icon={'pencil'} size={'5x'}></ForkAwesomeIcon>
+          <UiIcon icon={IconPencil} size={5} />
         </div>
       </div>
       <div className={styles.pulse}></div>

frontend/src/components/application-loader/loading-screen/random-icon.tsx

@@ -3,28 +3,39 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
-import type { IconName } from '../../common/fork-awesome/types'
 import styles from './animations.module.scss'
-import React, { useEffect, useState } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
+import type { Icon } from 'react-bootstrap-icons'
+import { FileText as IconFileText } from 'react-bootstrap-icons'
+import { File as IconFile } from 'react-bootstrap-icons'
+import { Fonts as IconFonts } from 'react-bootstrap-icons'
+import { Gear as IconGear } from 'react-bootstrap-icons'
+import { KeyboardFill as IconKeyboardFill } from 'react-bootstrap-icons'
+import { ListCheck as IconListCheck } from 'react-bootstrap-icons'
+import { Markdown as IconMarkdown } from 'react-bootstrap-icons'
+import { Pencil as IconPencil } from 'react-bootstrap-icons'
+import { Person as IconPerson } from 'react-bootstrap-icons'
+import { Tag as IconTag } from 'react-bootstrap-icons'
+import { TypeBold as IconTypeBold } from 'react-bootstrap-icons'
+import { TypeItalic as IconTypeItalic } from 'react-bootstrap-icons'
 
-const elements: IconName[] = [
-  'file-text',
-  'markdown',
-  'pencil',
-  'bold',
-  'italic',
-  'align-justify',
-  'tag',
-  'user',
-  'file',
-  'keyboard-o',
-  'cog',
-  'font'
+const elements: Icon[] = [
+  IconFileText,
+  IconMarkdown,
+  IconPencil,
+  IconTypeBold,
+  IconTypeItalic,
+  IconListCheck,
+  IconTag,
+  IconPerson,
+  IconFile,
+  IconKeyboardFill,
+  IconGear,
+  IconFonts
 ]
 
 /**
- * Chooses a random fork awesome icon from a predefined set and renders it.
+ * Chooses a random icon from a predefined set and renders it.
  *
  * The component uses a static icon in the first rendering and will choose the random icon after that.
  * This is done because if the loading screen is prepared using SSR and then hydrated in the client, the rendered css class isn't the expected one from the SSR. (It's random. d'uh).
@@ -33,13 +44,12 @@ const elements: IconName[] = [
  * See https://nextjs.org/docs/messages/react-hydration-error
  */
 export const RandomIcon: React.FC = () => {
-  const [icon, setIcon] = useState<number | undefined>()
+  const [icon, setIcon] = useState<JSX.Element | undefined>()
 
   useEffect(() => {
-    setIcon(Math.floor(Math.random() * elements.length))
+    const index = Math.floor(Math.random() * elements.length)
+    setIcon(React.createElement(elements[index], { className: styles.particle }))
   }, [])
 
-  return icon === undefined ? null : (
-    <ForkAwesomeIcon icon={elements[icon]} className={styles.particle}></ForkAwesomeIcon>
-  )
+  return <Fragment>{icon}</Fragment>
 }