Vue で Alibaba のアイコンフォント ベクター アイコンを使用する方法について

インターネット上には多くのインポート方法があり、公式も3つのインポート方法を提供していますが、インポート後に表示されない、またはスタイルをカスタマイズできないという人がほとんどです。次の方法は、上記の問題がなく、現在導入するのに最適な方法です。

1. Alibaba ベクターライブラリの Web サイトは、使用前にログインする必要があります。まず登録してログインしてください。

2. ログイン後、ユーザー、ショッピングカートなど、必要なアイコンを検索します。

3. マウスを目的のアイコンに移動して、「ライブラリに追加」をクリックします。SVG コードをコピーしたり、他のインポート方法で直接インポートすることはお勧めしません。最初にライブラリに追加してからダウンロードすることをお勧めします。

4. ウェブサイトの右上隅にあるショッピングカートを開き、選択したアイコンをクリックして「アイテムに追加」します。

5. ローカルにダウンロードすると、圧縮されたパッケージが取得されるので、現在のフォルダに解凍します。

6. 以下の内容が表示されますので、demo で始まるファイルを除くすべてのファイルをプロジェクトの「asset」フォルダの下の「iconfont」フォルダにコピーします。そのようなフォルダがない場合は、自分で新しいフォルダを作成します。

7. 次に、ブラウザを使用して、解凍したフォルダ内の demo_index.html を開きます。これらのコードは各アイコンに対応しており、後で使用されます。

8. これをコードに記述すると、プロジェクトのウェブページに最初のアイコン、つまり上の画像に対応するアイコンが表示されます == &#xe601 ==

<テンプレート>

 <span class="iconfont">&#xe601;</span>
<テンプレート>

<スクリプト>
    import '../asset/iconfont/iconfont.css'; //これはあなたのiconfont.cssへのパスです。私のものとは異なる場合があります</script>

9. アイコン スタイルを変更するには、スタイル タグ内の .iconfont クラスを変更するだけです。

<テンプレート>

 <span class="iconfont">&#xe601;</span>
<テンプレート>

<スクリプト>
    import '../asset/iconfont/iconfont.css'; //これはあなたのiconfont.cssへのパスです。私のものとは異なる場合があります</script>


<スタイル>
.アイコンフォント{
  フォントファミリ: "iconfont" !important;
  フォントサイズ: 16px;
  フォントスタイル: 通常;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
}
</スタイル>

10. 完了です。アイコンを使用するページで、そのページにimport '../asset/iconfont/iconfont.css';だけです。

11.知らせAlibaba Vector Libraryから新しいアイコンを追加する場合は、プロジェクト内のiconfontフォルダを削除し、この記事の手順2から再度開始して、選択、ダウンロード、インポートする必要があります。

これで、Alibaba の iconfont ベクター アイコンを使用した Vue に関するこの記事は終了です。Vue ベクター アイコンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。