パフォーマンス

アイコンの読み込みと実行の仕組み

• アイコンごとに 1 モジュール。 アイコンのモジュールには副作用がないため、バンドラーはインポートしていないアイコンを取り除きます。圧縮して gzip をかけると、最初の React または Vue アイコンは共有ランタイムを含めて約 4 KB、以降のアイコンは 1 つあたり約 0.6 KB 増えます。
• 事前レンダリング済みのマークアップ。 静止状態は文字列として含まれているので、サーバーでもブラウザーでも、最初の描画前に計算は不要です。
• 必要なときだけ動く。 モーションのコードはアイコンが動いている間だけ実行され、終わると止まります。
• 共通コード。 すべてのアイコンが 1 つのジオメトリモジュールを、すべてのアニメーションアイコンが 1 つのランタイムを共有するため、ブラウザーや CDN はそのコードを 1 回だけキャッシュします。
• CSS の色。 ページ内のアイコンの色は、CSS を 1 か所変えるだけで切り替えられ、再レンダリングも発生しません。

大量のアイコン

各アイコンは、影とハイライトに SVG フィルターを使っています。何百ものアイコンを表示する場合は、見えている行だけをレンダリングするか、ブラウザーが 1 度だけラスタライズする <img> タグで静的 SVG ファイルを使ってください。

ディープインポート

開発サーバーは、パッケージのインデックス全体を読み込むことがあり、そのインデックスはすべてのアイコンを参照しています。これを避けるには、各アイコンをそのファイルからインポートします。