Vue の要素を介してアイコン icon を使用する

element-ui 独自のアイコン ライブラリは十分に完成していないため、サードパーティのアイコンを導入する必要があります。以下に、Vue Element でアイコンを使用する方法のチュートリアルを紹介します。興味のある方は、element-ui に付属のアイコン ライブラリがまだ十分ではありません。サードパーティのアイコンを導入する必要があります。自分で使用する場合、いくつかの質問については、いくつかのチュートリアルを参照して詳細に記録します

私たちの場合、最初の選択肢はもちろん Alibaba アイコン ライブラリです

チュートリアル: 1 Alibaba を開きます。アイコン、登録 > ログイン > アイコン 管理 > マイ プロジェクト

アイコン管理 > をクリックして、

新しいプロジェクト

新しいプロジェクト

好きなようにプロジェクト名を入力します。接頭辞に注意してください。element-ui に付属するアイコン (接頭辞: el-icon) と同じ名前ではありません。

設定後、[新規]をクリックします

プレフィックスに注意してください。設定後、「新規」をクリックします

次に、Alibaba アイコンのホームページに戻り、必要なアイコン ライブラリをクリックします。ショッピング カートへの一括インポートがないため、通常は 1 つずつクリックする必要があり、無駄です。次に、コンソールに入力してください 次のコードをバッチでインポートします

var icons = document.querySelectorAll('.icon-gouwuche1');
 var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };
auto_click(0);

そして Enter をクリックすると、このライブラリのセットのすべてのアイコンがショッピング カートに追加されます

ページ上のショッピング カートをクリックします

ページの右側にあるショッピング カート アイコンをクリックして、

作成したプロジェクトにすべてのアイコンを追加します

追加

fontClass を設定し、ローカルにダウンロードします

ダウンロードローカルで解凍します

解凍後、これらのファイルを取得します。画像内の円を開きます

次のコードをファイルに追加します。注: el-icon-third は、前に設定した 2 番目の el-icon です。 - third の前にスペースがあります

 [class^="el-icon-third"], [class*=" el-icon-third"]/*这里有空格*/
 { font-family: "iconfont" !important;
 font-size: 16px;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }

緑色のボックス内のデータは一貫している必要があります

2. 上記を設定した後、src-assets の下に作成した vue プロジェクトを開きます。すべてのファイルを main.js にインポートします

忘れずにインポートしてから、もう一度 npm run dev を実行します

3. Alibaba アイコンでプロジェクトを開き、欲しいアイコンコード

アイコンコード: el-icon-ump-qianniudaidisenpm run dev 一下

3.打开在阿里icon的项目，复制你想要的图标代码

 

图标代码：el-icon-ump-qianniudaidise

2種類使用 引用方法は要素に付属の使用方法と同じです

最終的な効果:

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

関連記事:

jQuery で画像カルーセルを実装する方法

jQuery 同じイベントが繰り返し迅速​​にトリガーされるのを防ぐ方法

AnglarJs を使用してプルアップ読み込みを実装する

以上がVue の要素を介してアイコン icon を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。