vue はカスタム アイコンのアイコン ステップ分析を使用します

今回は、Vue でカスタムアイコンを使用する方法を段階的に分析します。Vue でカスタム アイコンを使用する場合の注意事項は何ですか。実際のケースを見てみましょう。まず、elementUI にはアイコンが少なすぎるため、追加できる

を探す必要があります。次の方法がシンプルでわかりやすいと思います。皆さんレンダリング:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

は、単色に制限されなくなりました。
いくつかのトリックを通じて、 font-size
• code を通じてフォントと同様にサポートします> 、colorでスタイルを調整します。

  font-size,color

  互換性は低いですが、ie9+ と最新のブラウザをサポートしています。
ブラウザレンダリング svg のパフォーマンスは平均的で、png ほど良くはありません。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。