公式は 3 つの導入方法を示しました (ここでは 2 つだけ詳しく説明します)
1. フォントクラスのリファレンス
- 優れた互換性、ie8+ およびすべての最新ブラウザをサポートします。
- Unicode と比較すると、セマンティクスが明確で、より直感的に記述できます。このアイコンが何であるかは簡単にわかります。
- クラスはアイコンの定義に使用されるため、アイコンを置き換える必要がある場合は、クラス内の Unicode 参照のみを変更する必要があります。
- 多色のアイコンはサポートされていません。
使用手順:
ステップ 1: 新しいプロジェクトを作成し、プロジェクトで使用されているアイコンをプロジェクトに追加します
ステップ 2: 新しいプロジェクトで [ローカルにダウンロード] をクリックし、新しい iconFont フォルダーを作成し、解凍されたファイルをこのフォルダーにコピーします。
ステップ 3: Main.js にindex.css を導入する
import '../../shared/library/iconFont/index.css'
ステップ 4: 対応するアイコンを選択してクラス名を取得し、それをページに適用します
<i class="iconfont icon-xxx"></i>
2、シンボルリファレンス
プラットフォームの推奨使用法
- マルチカラーアイコンがサポートされ、モノクロに制限されなくなりました。
- いくつかのトリックにより、フォントのサイズや色などのスタイルを調整することがサポートされています。
- 互換性は低く、ie9 以降と最新のブラウザをサポートします。
- ブラウザーの svg レンダリングのパフォーマンスは平均的で、png ほど良くはありません。
使用手順:
ステップ 1: 同様
ステップ 2: 次のコード行をindex.html に追加します。
// 项目下的图标在线地址
<script type="text/javascript" src="https://at.alicdn.com/t/font_2797108_z8bjfxy68us.js"></script>
ステップ 3: 共通 CSS コードを追加する (一度だけ導入します)
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
ステップ 4: 対応するアイコンを選択してクラス名を取得し、それをページに適用します
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
ローカル参照はダウンロードしたローカルjsをmain.jsに参照することで、その他の操作は同様です