[アイコン] fortawesome5→6へアップグレード OW-2522

[akagane99]

概要

アイコン集の fortawesome を v5 から v6（6.7.2）にアップグレードしました。
v6には、v5 アイコン名のエイリアスが含まれていたため、既に使われているコードの修正なしでConnect-CMSに取り込めます。

修正後

ログイン後トップページ画面

→ 歯車等のアイコンが表示されることを確認しました

wiki/Font-Icon 修正

https://github.com/opensource-workshop/connect-cms/wiki/Font-Icon

※ 参考：修正前

npmライブラリ アップグレードコマンド

# 1度アンインストールしてから再インストール
npm uninstall @fortawesome/fontawesome-free
npm i --save-dev @fortawesome/fontawesome-free

# ライブラリの最新化
npm update

#  fortawesome を v5 から v6 にアップグレード時は一度fontの中身を消す
rm -rf public/fonts/vendor/@fortawesome/fontawesome-free/*

# app.js, app.cssの最新化
npm run prod

コマンド実行結果

root@37ea93425cea:/var/www/html/connect-cms# npm uninstall @fortawesome/fontawesome-free

removed 1 package, and audited 794 packages in 2s

114 packages are looking for funding
  run `npm fund` for details

4 vulnerabilities (1 low, 3 moderate)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

root@37ea93425cea:/var/www/html/connect-cms# npm i --save-dev @fortawesome/fontawesome-free

added 1 package, and audited 795 packages in 3s

114 packages are looking for funding
  run `npm fund` for details

4 vulnerabilities (1 low, 3 moderate)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

root@37ea93425cea:/var/www/html/connect-cms# npm update

changed 1 package, and audited 795 packages in 17s

114 packages are looking for funding
  run `npm fund` for details

4 vulnerabilities (1 low, 3 moderate)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

root@37ea93425cea:/var/www/html/connect-cms# npm run prod

> prod
> npm run production


> production
> mix --production


● Mix █████████████████████████ done (99%) plugins 
 BuildCallbackPlugin




● Mix █████████████████████████ done (99%) plugins 
 WebpackBar:done


✔ Mix
  Compiled successfully in 8.39s



                         
   Laravel Mix v6.0.49   
                         

✔ Compiled Successfully in 8206ms
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                                                                                                                  File │ Size     │
├───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                                                                                                                            /js/app.js │ 1.46 MiB │
│                                                                                                                                                                                /js/app.js.LICENSE.txt │ 2.96 KiB │
│                                                                                                                                                                                           css/app.css │ 215 KiB  │
│                                                                                                      fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?1815e00441357e01619e5793e1caa78a │ 206 KiB  │
│                                                                                                    fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?c210719e60948b211a1260f79812efe5 │ 116 KiB  │
│                                                                                                     fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?914997e1bdfc990d0897cdaba877a0b3 │ 66.5 KiB │
│                                                                                                   fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?89999bdf5d835c0120257222e5568fec │ 24.9 KiB │
│                                                                                                       fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?2582b0e4bcf85eceead0de3fd9035c90 │ 416 KiB  │
│                                                                                                     fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?2463b90d9a316e4e5294e6706b6a7a72 │ 155 KiB  │
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully

github actionsでテスト

Laravel Dusk Connect-cms-test matrix · f72a5a4
https://github.com/opensource-workshop/connect-cms/actions/runs/13784633649
→ エラーなし

レビュー完了希望日

なし

関連Pull requests/Issues

• [アイコン] fortawesomeをnpmでインストール形式に見直し OW-2522 #2135
• [アイコン] ディレクトリインストール対応 OW-2522 #2139

参考

• Upgrade to Version 6 | Font Awesome Docs
  https://docs.fontawesome.com/web/setup/upgrade
  • Package Managers | Font Awesome Docs
    https://docs.fontawesome.com/web/setup/upgrade/packages
  • （機械翻訳）変更点＞下位互換性
    https://docs.fontawesome.com/web/setup/upgrade/whats-changed#backward-compatibility

    • v4/v5 アイコン名のエイリアスを追加 | バージョン 6 で名前が変更されたアイコンは、古い名前で参照されると、期待どおりに機能し、レンダリングされます

DB変更の有無

無し

チェックリスト

• (DB変更有りの場合) 移行プログラムに影響がない事を確認しました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-check-list---Migration
• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule