ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事に注目してください。
推奨読書:
Nodejsグローバルインストールモジュールがコマンドを見つけられないことを完全に処理する
以上がVueでカスタムアイコンを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。