Vueプロジェクトにアイコンアイコンを導入する方法

この記事では、Vue がアイコンをどのように導入するかを主に写真とテキストで詳しく紹介します。多数のベクター アイコンをカスタマイズすることもできます。もちろん、Alibaba のベクター アイコン ライブラリにアクセスして、必要な小さなアイコンをダウンロードすることもできます。クリックして icomoon ウェブサイトに入り、右上隅にある「IcoMoon アプリ」をクリックし、必要なアイコンを見つけて選択し、右下隅にある「フォントを生成」をクリックし、上部にある 2 番目のボタン「設定」をクリックします。左隅をクリックして、ダウンロードするアイコン情報をカスタマイズします。通常は、「フォント名」を変更してから、戻って右下隅の「ダウンロード」をクリックして、アイコンをダウンロードします。

2. ダウンロードしたアイコン圧縮パッケージを解凍し、次のようなファイルを取得します。

3. vue プロジェクトの src フォルダーに新しい共通フォルダーを作成し、ここのフォントを common にコピーします。フォルダーに新しいスタイラスフォルダーを作成し、ここにある style.css をスタイラスにコピーします。この CSS ファイルには、アイコンに関連するスタイル コードが含まれています。これを配置した後、識別しやすいように icon.styl に変更しました。使用するスタイラス プリプロセッサ プロセッサを使用するため、接尾辞 styl を付けて新しいスタイラスを作成します。これは、コードの仕様に従ってください。

4. ここからが重要です。はい、解凍したファイルの style.css の @font-face の URL パスをプロジェクト内のパスに変更する必要があります:

5. 次に、このファイルを App.vue に導入します。それ以外の場合は効果がありません:

6. 次に、テンプレートに対応するクラス名を書き込み、スタイルを追加します。

結果のページは次のようになります。以下の通りです:

上記は私がまとめたものです。今後皆さんのお役に立てれば幸いです。

関連記事:

Nodeデバッグツールチュートリアルの簡単な紹介

jsおよびcssのWebpackパッケージ化と圧縮方法の例

js/cssファイルを動的にロードおよび削除するためのサンプルコード

以上がVueプロジェクトにアイコンアイコンを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。