Fix icons.

frontend/components/CopyField.tsx

@@ -23,6 +23,7 @@ import Button from 'react-bootstrap/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Overlay, Tooltip } from 'react-bootstrap';
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faCopy, faShare } from '@fortawesome/free-solid-svg-icons';
 import { FormattedMessage } from './localization';
 
 function CopyField({
@@ -60,7 +61,7 @@ function CopyField({
         icon
           ? (
             <InputGroup.Text>
-              <FontAwesomeIcon icon="share" />
+              <FontAwesomeIcon icon={faShare} />
             </InputGroup.Text>
           )
           : ''
@@ -86,7 +87,7 @@ function CopyField({
 }
 
 CopyField.defaultProps = {
-  copyIcon: 'copy',
+  copyIcon: faCopy,
   icon: null,
 };
 

frontend/components/DownloadButton.tsx

@@ -16,6 +16,7 @@
  */
 
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { Button } from 'react-bootstrap';
@@ -34,6 +35,7 @@ export default function DownloadButton({
   return (
     <Button variant="success" href={getDownloadURL(id, fileName)}>
       <FontAwesomeIcon icon={icon} className="mr-2" />
+      {' '}
       <FormattedMessage
         id="DownloadButton.download"
         defaultMessage="Download"
@@ -44,5 +46,5 @@ export default function DownloadButton({
 }
 
 DownloadButton.defaultProps = {
-  icon: 'download',
+  icon: faDownload,
 };

frontend/components/Runner.tsx

@@ -1,3 +1,6 @@
+import {
+  faFacebook, faTwitch, faTwitter, faYoutube,
+} from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
 import { RunnerInformation } from 'util/datatypes/RunnerList';
@@ -11,27 +14,27 @@ export default function Runner({ runner }: { runner: RunnerInformation }) {
       <sup>
         {runner.platform === 'TWITCH' && runner.stream.length > 0 ? (
           <a href={runner.stream}>
-            <FontAwesomeIcon icon={['fab', 'twitch']} className={['mr-1', style.twitch].join(' ')} />
+            <FontAwesomeIcon icon={faTwitch} className={['mr-1', style.twitch].join(' ')} />
           </a>
         ) : ''}
         {runner.platform === 'FACEBOOK' && runner.stream.length > 0 ? (
           <a href={runner.stream}>
-            <FontAwesomeIcon icon={['fab', 'facebook']} className={['mr-1', style.facebook].join(' ')} />
+            <FontAwesomeIcon icon={faFacebook} className={['mr-1', style.facebook].join(' ')} />
           </a>
         ) : ''}
         {runner.platform === 'YOUTUBE' && runner.stream.length > 0 ? (
           <a href={runner.stream}>
-            <FontAwesomeIcon icon={['fab', 'youtube']} className={['mr-1', style.youtube].join(' ')} />
+            <FontAwesomeIcon icon={faYoutube} className={['mr-1', style.youtube].join(' ')} />
           </a>
         ) : ''}
         {runner.twitter && runner.twitter.length > 0 ? (
           <a href={`https://twitter.com/${runner.twitter}`}>
-            <FontAwesomeIcon icon={['fab', 'twitter']} className={['mr-1', style.twitter].join(' ')} />
+            <FontAwesomeIcon icon={faTwitter} className={['mr-1', style.twitter].join(' ')} />
           </a>
         ) : ''}
         {runner.youtube && runner.youtube.length > 0 ? (
           <a href={`https://youtube.com/${runner.youtube}`}>
-            <FontAwesomeIcon icon={['fab', 'youtube']} className={['mr-1', style.youtube].join(' ')} />
+            <FontAwesomeIcon icon={faYoutube} className={['mr-1', style.youtube].join(' ')} />
           </a>
         ) : ''}
       </sup>

frontend/components/VideoList.tsx

@@ -24,6 +24,7 @@ import ListGroup from 'react-bootstrap/ListGroup';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { injectIntl, IntlShape } from 'react-intl';
 import { RunnerList } from 'util/datatypes/RunnerList';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import VideoListItem from './VideoListItem';
 import Filter from './Filter';
 import { VideoEntry } from '../util/datatypes/VideoList';
@@ -70,7 +71,7 @@ class VideoList extends React.Component<VideoListProps, VideoListState> {
       <div>
         <InputGroup>
           <InputGroup.Text id="search-prepend">
-            <FontAwesomeIcon icon="search" />
+            <FontAwesomeIcon icon={faSearch} />
           </InputGroup.Text>
           <FormControl
             placeholder={intl.formatMessage({ id: 'VideoList.Search.Placeholder', defaultMessage: 'Type something to search here…' })}

frontend/components/VideoListItem.tsx

@@ -27,6 +27,7 @@ import Link from 'next/link';
 import { RunInformation, Thumbnails } from 'util/datatypes/VideoList';
 import { Runner as RunnerData, RunnerList } from 'util/datatypes/RunnerList';
 import { Col, Row } from 'react-bootstrap';
+import { faClock, faHourglass, faRunning } from '@fortawesome/free-solid-svg-icons';
 import { getThumbnailURL } from '../util/thumbnail';
 
 import FormattedDuration from './localization/FormattedDuration';
@@ -132,7 +133,7 @@ export default function VideoListItem({
         <Col sm={5} xs={12}>
           {runners && runners.length > 0 ? (
             <div className="mr-2">
-              <FontAwesomeIcon icon="running" />
+              <FontAwesomeIcon icon={faRunning} />
               {' '}
               {runners.reduce((all: Array<ReactElement>, runner: RunnerData) => [
                 ...all,
@@ -143,7 +144,7 @@ export default function VideoListItem({
           ) : ''}
           {displayDuration !== null ? (
             <span className="mr-2 text-nowrap">
-              <FontAwesomeIcon icon="clock" />
+              <FontAwesomeIcon icon={faClock} />
               {' '}
               <FormattedDuration
                 seconds={displayDuration}
@@ -153,7 +154,7 @@ export default function VideoListItem({
             </span>
           ) : (
             <span className="mr-2 text-nowrap">
-              <FontAwesomeIcon icon="hourglass" />
+              <FontAwesomeIcon icon={faHourglass} />
               {' '}
               Coming up
             </span>

frontend/pages/[id]/[vslug].tsx

@@ -33,6 +33,7 @@ import { basename } from 'path';
 import withSession from 'util/session';
 import { ParsedUrlQuery } from 'querystring';
 import YouTubePlayer from 'react-youtube';
+import { faTwitch, faYoutube } from '@fortawesome/free-brands-svg-icons';
 import { getDASHManifestURL, getHLSMasterURL } from '../../util';
 
 import VideoPlayer from '../../components/VideoPlayer';
@@ -351,7 +352,8 @@ export default function VideoPlayerPage({
         variant="twitch"
         key="watchOnTwitch"
       >
-        <FontAwesomeIcon icon={['fab', 'twitch']} className="mr-2" />
+        <FontAwesomeIcon icon={faTwitch} className="mr-2" />
+        {' '}
         <FormattedMessage
           id="VideoPlayerPage.watchOnTwitch"
           description="Button below video that links to the exact position in the archived stream to watch it there."
@@ -402,7 +404,8 @@ export default function VideoPlayerPage({
         variant="youtube"
         key="watchOnYouTube"
       >
-        <FontAwesomeIcon icon={['fab', 'youtube']} className="mr-2" />
+        <FontAwesomeIcon icon={faYoutube} className="mr-2" />
+        {' '}
         <FormattedMessage
           id="VideoPlayerPage.watchOnYouTube"
           description="Button below video that links user to the YouTube upload of the VOD."