[Ionic Angular] ion-iconのaddIconsを簡単にする「ionic-angular-collect-icons」

Ionic AngularのStandalone構成では、 ion-icon の取り扱い方が変わりました。具体的には、以下の通りです。

以前：

1. node_modules/ionicons/dist/ionicons/svg 内のSVGファイルをプロジェクトにコピー
2. ion-icon[name] の属性値から対応するSVGファイルを呼び出し
3. 表示

Standalone構成：

1. 表示する前に addIcons でSVGデータを読み込んで、SVGデータをWindow関数に登録
2. ion-icon[name] の属性値から対応するSVGデータをWindow関数から呼び出し
3. 表示

Bundleサイズを削減するための変更ですが、以前の「全部のSVGファイルのコピーから呼び出し」と異なり、事前に手動で addIcons で読み込む必要があるため、手間が増えました。また、addIcons し忘れると、ビルド時エラーではなく、表示時エラーになるため、エラーの原因が分かりにくくなりました。また、目視で確認していたとしても、以下のような問題が起こり得ます。

CloseOutline (name=close-outline) を、AページとBページの両方で使うとしましょう。Aページは必ず、Bページよりも先に表示される関係です。
Aページ ー 遷移 → Bページ
このような場合、 addIcons(CloseOutline) をBページのみで行っていた場合、Aページではアイコンは表示されず、Bページでは表示されます。逆に、Aページのみで行っていた場合、両方のページで表示されます。

このような問題を解決するために、 ion-icon の name 属性値を自動的に収集し、 addIcons するライブラリ「ionic-angular-collect-icons」を作成しました。

ionic-angular-collect-icons

どういったものか

このライブラリは、プロジェクト内の ion-icon を自動収集し、一意にグループ化し、ion-icon のエクスポート用のファイルを生成するためもののです。

開発中： 全てのアイコンをaddIconsで追加することで、ストレスフリーな開発を実現。
本　番： ビルド前にテンプレートで使用しているionIconを自動で収集・更新。

もちろん、バンドルサイズの削減を最大化するためには、各Componentの遅延読み込み時に最小限のアイコンを読み込むことが重要です。これは開発をスピードアップするための妥協点です。

使い方

初期設定

以下のコマンドで、初期設定をすべて自動的に行います。

% npm install @rdlabo/ionic-angular-collect-icons --save-dev

初期設定で行われること

1. src/use-icons.ts を作成
2. main.ts （もしくは app.config.ts ）に、以下を追加。

+ import { addIcons } from 'ionicons';
+ import * as allIcons from 'ionicons/icons';
+ import * as useIcons from '../use-icons';

  if (environment.production) {
    enableProdMode();
  }

+  addIcons(environment.production ? useIcons : allIcons);

3. すべてのコンポーネントから、 addIcons を削除

  @Component(/* ... */)
  export class ExampleComponent {
    constructor() {
-     addIcons(useIcons);
    }
  }

ビルド前に実行

あとは、ビルド前に、以下のコマンドを実行すると、都度アイコンを収集し、 src/use-icons.ts を更新します。

% npx @rdlabo/ionic-angular-collect-icons

現実的にビルド前に都度コマンドを打つのは現実的ではないので、npmスクリプトの prebuild にいれておくことをおすすめします。

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
+   "prebuild": "npx @rdlabo/ionic-angular-collect-icons"

複数のワークスペースで利用していたり、生成するファイルのパスを変更できるオプションも用意しています。以下をご確認ください。

https://github.com/rdlabo-team/ionic-angular-collect-icons?tab=readme-ov-file#optional