Vue 3 は Props に基づいて動的にインポートします

Question

私は unplugin-icon を使用してアイコン コンポーネントを作成しています。通常は、たとえば

をインポートできます。 リーリー

これは動作しますが、別のアイコンを使用したい場合に 1 つずつインポートするのは不便なので、Eunoicon.vue という動的コンポーネントを作成しました。 リーリー

しかし、これをコンポーネントにインポートしようとすると、エラー

Uncaught (in Promise) TypeError: Unable tosolve module specifier '~icons/prime/copy' がスローされます。 このアプローチに関する提案、またはシンプルなアプローチを提供するアイコン ライブラリはありますか? vue font Awesome を試してみましたが、まだ思ったほど単純ではありません。

Answer 1

残念ながら、現時点ではインポートを動的に作成することはできません。私も数か月前に同じ問題を抱えていることに気づきました。私の解決策は、アイコンを SVG として扱い、次のようにプロジェクトに添付されたインポート ファイルを作成することでした。 リーリー

そして、以下に示すようにビュー コンポーネントを作成します。これは、小道具を使用して、指定された名前に対応するアイコンを取得します。

リーリー リーリー

もちろん、インポート ファイルを手動で作成するのは面倒なので、私の場合は、SVG アイコン フォルダーへのパスを取得し、各アイコンを処理して縮小し、インポート ファイルを自動的に作成する Python スクリプトを作成しました。 このスクリプトは、Phosphor Icon Library のアイコンで動作します。 スクリプトと Vue コンポーネントのコードは、github リポジトリで見つけることができます:

https://github.com/fchancel/Phosphor-icon-vue-component

Phosphor アイコンを使用することに決めた場合は、遠慮せずに、それにインスピレーションを得たり、変更したり、使用したりしてください