Vueでカスタムアイコンを使用する方法

今回は、vue でカスタム アイコン を使用する方法を説明します。vue でカスタム アイコン アイコンを使用する場合の 注意事項 について、実際のケースを見てみましょう。

まず、elementUI にはアイコンが少なすぎるため、追加できる ベクター画像 を探す必要があります。次の方法がシンプルでわかりやすいと思います。皆さん

レンダリング:

Alibabaベクターアイコン管理、iconfont

使用方法: アカウントにログインし、必要なアイコンを見つけてショッピングカートに追加します

それからプロジェクトに追加します

それからコードをローカルにダウンロードします

コードファイルをダウンロードして解凍すると、このリストが表示されます

HTMLファイルを開いてメソッドを引用しますチュートリアル

私の落とし穴に追加するために、以前スタイルタグで @import "" について考えましたが、結果はエラーが発生し続けました。多くの方法を試しましたが、それでも効果はありませんでした。問題は複雑です

ステップ 1: fontclass コードを導入します。 Index.html 内:

<link rel="stylesheet" type="text/css" href="./iconfont.css" rel="external nofollow" >

ステップ 2: 対応するアイコンを選択してクラス名を取得し、ページに適用します:

<i class="iconfont icon-xxx"></i>

機能:

優れた互換性、ie8+ およびすべての最新ブラウザーをサポートします。

Unicode と比較すると、セマンティクスが明確で、より直感的に記述できます。このアイコンが何であるかは簡単にわかります。

アイコンの定義にはクラスを使用しているため、アイコンを置き換える場合は、クラス内のUnicode参照を変更するだけで済みます。

ただし、依然としてフォントを使用しているため、複数色のアイコンはまだサポートされていません。

シンボルリファレンス ステップ1: HTMLにシンボルコードを導入します:

<script src="./iconfont.js"></script>

ステップ2: 一般的なCSSコードを追加します(一度導入します):

<style type="text/css">.icon 
{ 
 width: 1em; 
height: 1em; 
 vertical-align: -0.15em; 
 fill: currentColor; 
overflow: hidden;}</style>

ステップ3: 対応するアイコンを選択し、クラス名を取得し、ページに適用します:

<svg class="icon" aria-hidden="true"> 
<use xlink:href="#icon-xxx" rel="external nofollow" >
</use>
</svg>

これは全く新しい使い方であり、今後の主流とも言える、現在推奨されているプラ​​ットフォームの使い方です。関連する紹介については、この記事を参照してください。実際には、この使用法は svg のコレクションです。他の 2 つと比較すると、次のような特徴があります。

• は、単色に制限されなくなりました。

• いくつかのトリックを通じて、<a href="http://www.php.cn/wiki/807.html" target="_blank">font-size<code><a href="http://www.php.cn/wiki/807.html" target="_blank">font-size</a> , color code を通じてフォントと同様にサポートします> 、color でスタイルを調整します。

• 互換性は低いですが、ie9+ と最新のブラウザをサポートしています。

• ブラウザレンダリング svg のパフォーマンスは平均的で、png ほど良くはありません。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

WebPackを使用してvueマルチページを構成する方法

Nodejsグローバルインストールモジュールがコマンドを見つけられないことを完全に処理する

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