私は unplugin-icon を使用してアイコン コンポーネントを作成しています。通常は、たとえば
をインポートできます。 リーリーこれは動作しますが、別のアイコンを使用したい場合に 1 つずつインポートするのは不便なので、Eunoicon.vue という動的コンポーネントを作成しました。 リーリー
しかし、これをコンポーネントにインポートしようとすると、エラーUncaught (in Promise) TypeError: Unable tosolve module specifier '~icons/prime/copy' がスローされます。
このアプローチに関する提案、またはシンプルなアプローチを提供するアイコン ライブラリはありますか? vue font Awesome を試してみましたが、まだ思ったほど単純ではありません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
残念ながら、現時点ではインポートを動的に作成することはできません。私も数か月前に同じ問題を抱えていることに気づきました。私の解決策は、アイコンを SVG として扱い、次のようにプロジェクトに添付されたインポート ファイルを作成することでした。 リーリー
そして、以下に示すようにビュー コンポーネントを作成します。これは、小道具を使用して、指定された名前に対応するアイコンを取得します。リーリー リーリー
もちろん、インポート ファイルを手動で作成するのは面倒なので、私の場合は、SVG アイコン フォルダーへのパスを取得し、各アイコンを処理して縮小し、インポート ファイルを自動的に作成する Python スクリプトを作成しました。 このスクリプトは、Phosphor Icon Library のアイコンで動作します。 スクリプトと Vue コンポーネントのコードは、github リポジトリで見つけることができます:https://github.com/fchancel/Phosphor-icon-vue-component
Phosphor アイコンを使用することに決めた場合は、遠慮せずに、それにインスピレーションを得たり、変更したり、使用したりしてください