tree-shake fontawesome

sapphi-red · Dec 31, 2021 · e199d01 · e199d01
1 parent 1b9b848
commit e199d01
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 4,876 deletions.
diff --git a/client/package.json b/client/package.json
@@ -10,6 +10,8 @@
     "develop": "webpack serve --mode=development"
   },
   "dependencies": {
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "classnames": "2.3.1",
     "core-js": "3.19.1",
     "fast-average-color": "7.0.1",

diff --git a/client/src/components/application/Navigation/Navigation.jsx b/client/src/components/application/Navigation/Navigation.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { faSignInAlt, faEdit, faUser, faHome, faBalanceScale } from '@fortawesome/free-solid-svg-icons';
 
 import { FontAwesomeIcon } from '../../foundation/FontAwesomeIcon';
 import { NavigationItem } from '../NavigationItem';
@@ -15,31 +16,31 @@ const Navigation = ({ activeUser, onRequestOpenAuthModal, onRequestOpenPostModal
   return (
     <nav className="fixed z-10 bottom-0 left-0 right-0 h-12 bg-white border-t border-gray-300 lg:relative lg:w-48 lg:h-full lg:border-r lg:border-t-0">
       <ul className="relative grid grid-flow-col items-center justify-evenly lg:fixed lg:gap-2 lg:grid-flow-row lg:justify-start lg:p-2 lg:w-48 lg:h-full lg:auto-rows-min">
-        <NavigationItem href="/" icon={<FontAwesomeIcon iconType="home" styleType="solid" />} text="ホーム" />
+        <NavigationItem href="/" icon={<FontAwesomeIcon icon={faHome} />} text="ホーム" />
         {activeUser !== null ? (
           <NavigationItem
-            icon={<FontAwesomeIcon iconType="edit" styleType="solid" />}
+            icon={<FontAwesomeIcon icon={faEdit} />}
             onClick={onRequestOpenPostModal}
             text="投稿する"
           />
         ) : null}
         {activeUser !== null ? (
           <NavigationItem
             href={`/users/${activeUser.username}`}
-            icon={<FontAwesomeIcon iconType="user" styleType="solid" />}
+            icon={<FontAwesomeIcon icon={faUser} />}
             text="マイページ"
           />
         ) : null}
         {activeUser === null ? (
           <NavigationItem
-            icon={<FontAwesomeIcon iconType="sign-in-alt" styleType="solid" />}
+            icon={<FontAwesomeIcon icon={faSignInAlt} />}
             onClick={onRequestOpenAuthModal}
             text="サインイン"
           />
         ) : null}
         <NavigationItem
           href="/terms"
-          icon={<FontAwesomeIcon iconType="balance-scale" styleType="solid" />}
+          icon={<FontAwesomeIcon icon={faBalanceScale} />}
           text="利用規約"
         />
       </ul>

diff --git a/client/src/components/foundation/FontAwesomeIcon/FontAwesomeIcon.jsx b/client/src/components/foundation/FontAwesomeIcon/FontAwesomeIcon.jsx
@@ -2,15 +2,13 @@ import React from 'react';
 
 /**
  * @typedef {object} Props
- * @property {string} iconType
- * @property {'solid' | 'regular'} styleType
- */
+ * @property {icon} Object
 
 /** @type {React.VFC<Props>} */
-const FontAwesomeIcon = ({ iconType, styleType }) => {
+const FontAwesomeIcon = ({ icon: { icon: i } }) => {
   return (
-    <svg className="font-awesome inline-block leading-none fill-current">
-      <use xlinkHref={`/sprites/font-awesome/${styleType}.svg#${iconType}`} />
+    <svg className="font-awesome inline-block leading-none fill-current" viewBox={`0 0 ${i[0]} ${i[1]}`}>
+      <path d={i[4]}></path>
     </svg>
   );
 };

diff --git a/client/src/components/foundation/PausableMovie/PausableMovie.jsx b/client/src/components/foundation/PausableMovie/PausableMovie.jsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
+import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons'
 
 import { AspectRatioBox } from '../AspectRatioBox';
 import { FontAwesomeIcon } from '../FontAwesomeIcon';
@@ -43,7 +44,7 @@ const PausableMovie = ({ src }) => {
             },
           )}
         >
-          <FontAwesomeIcon iconType={isPlaying ? 'pause' : 'play'} styleType="solid" />
+          <FontAwesomeIcon icon={isPlaying ? faPause : faPlay} />
         </div>
       </button>
     </AspectRatioBox>

diff --git a/client/src/components/foundation/SoundPlayer/SoundPlayer.jsx b/client/src/components/foundation/SoundPlayer/SoundPlayer.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons';
 
 import { useFetch } from '../../../hooks/use_fetch';
 import { fetchBinary } from '../../../utils/fetchers';
@@ -56,7 +57,7 @@ const SoundPlayer = ({ sound }) => {
           onClick={handleTogglePlaying}
           type="button"
         >
-          <FontAwesomeIcon iconType={isPlaying ? 'pause' : 'play'} styleType="solid" />
+          <FontAwesomeIcon icon={isPlaying ? faPause : faPlay} />
         </button>
       </div>
       <div className="flex flex-col flex-grow flex-shrink pt-2 min-w-0 h-full">

diff --git a/client/src/components/modal/ModalErrorMessage/ModalErrorMessage.jsx b/client/src/components/modal/ModalErrorMessage/ModalErrorMessage.jsx
@@ -1,3 +1,4 @@
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -13,7 +14,7 @@ const ModalErrorMessage = ({ children }) => {
   return (
     <span className={classNames('block h-6 text-red-600', { invisible: !children })}>
       <span className="mr-1">
-        <FontAwesomeIcon iconType="exclamation-circle" styleType="solid" />
+        <FontAwesomeIcon icon={faExclamationCircle} />
       </span>
       {children}
     </span>

diff --git a/client/src/components/modal/ModalSubmitButton/ModalSubmitButton.jsx b/client/src/components/modal/ModalSubmitButton/ModalSubmitButton.jsx
@@ -1,3 +1,4 @@
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -25,7 +26,7 @@ const ModalSubmitButton = ({ children, disabled, loading, onClick }) => {
       {loading ? (
         <span className="pr-2">
           <span className="inline-block animate-spin">
-            <FontAwesomeIcon iconType="circle-notch" styleType="solid" />
+            <FontAwesomeIcon icon={faCircleNotch} />
           </span>
         </span>
       ) : null}

diff --git a/client/src/components/new_post_modal/NewPostModalPage/NewPostModalPage.jsx b/client/src/components/new_post_modal/NewPostModalPage/NewPostModalPage.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { faImages, faMusic, faVideo } from '@fortawesome/free-solid-svg-icons';
 
 import { FontAwesomeIcon } from '../../foundation/FontAwesomeIcon';
 import { ModalErrorMessage } from '../../modal/ModalErrorMessage';
@@ -109,19 +110,19 @@ const NewPostModalPage = ({ hasError, isLoading, onResetError, onSubmit }) => {
           <AttachFileInputButton
             accept="image/*"
             active={params.images.length !== 0}
-            icon={<FontAwesomeIcon iconType="images" styleType="solid" />}
+            icon={<FontAwesomeIcon icon={faImages} />}
             onChange={handleChangeImages}
           />
           <AttachFileInputButton
             accept="audio/*"
             active={params.sound !== undefined}
-            icon={<FontAwesomeIcon iconType="music" styleType="solid" />}
+            icon={<FontAwesomeIcon icon={faMusic} />}
             onChange={handleChangeSound}
           />
           <AttachFileInputButton
             accept="video/*"
             active={params.movie !== undefined}
-            icon={<FontAwesomeIcon iconType="video" styleType="solid" />}
+            icon={<FontAwesomeIcon icon={faVideo} />}
             onChange={handleChangeMovie}
           />
         </p>

diff --git a/client/src/components/user_profile/UserProfileHeader/UserProfileHeader.jsx b/client/src/components/user_profile/UserProfileHeader/UserProfileHeader.jsx
@@ -1,5 +1,6 @@
 import FastAverageColor from 'fast-average-color';
 import React from 'react';
+import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
 
 import { getProfileImagePath } from '../../../utils/get_path';
 import { formatDate } from '../../../utils/date';
@@ -35,7 +36,7 @@ const UserProfileHeader = ({ user }) => {
         <p className="pt-2">{user.description}</p>
         <p className="pt-2 text-gray-600 text-sm">
           <span className="pr-1">
-            <FontAwesomeIcon iconType="calendar-alt" styleType="regular" />
+            <FontAwesomeIcon icon={faCalendarAlt} />
           </span>
           <span>
             <time dateTime={new Date(user.createdAt).toISOString()}>