Vue ページは Alibaba ベクター アイコン ライブラリをすぐに使用します

以前にも記事を書きましたが、

Alibaba ベクター icon_turbo の使い方 夏目漱石のブログ - CSDN ブログ

この記事では、HTML ページで Alibaba ベクター アイコン ライブラリを使用する方法を詳しく説明します。

以下では、Alibaba ベクター アイコン ライブラリ アイコンを vue ページに導入するいくつかの方法を説明します。

目次

1. オンラインリンクを導入する

1. vue の 9 番目のステップのリンク導入は、エントリ ファイルindex.html に導入する必要があります。

2. 使用する場合は、このように任意の vue ページのタグ内で使用できます。

2.pngをダウンロードする

1. 上で説明したように、それをプロジェクトに保存します。

2. 目的のアイコンの上にマウスを置き、クリックしてダウンロードします。

3. pngダウンロードを選択します

4. vue プロジェクトの src/assets の下の適切な場所に配置します。

5. ページ上でスタイルを設定する

6. タグの紹介

7. ページ表示

---

1. オンラインリンクを導入する

この方法は、HTML ページで Alibaba ベクター アイコン ライブラリを使用する方法とほぼ同じです。ブログ エントリは次のとおりです。

Alibaba Vector icons_turbo の使い方 夏目漱石のブログ - CSDN ブログhttps://blog.csdn.net/qq_62799214/article/details/131884248

次の手順を変更するだけです。

1. vue の 9 番目のステップのリンク導入は、エントリ ファイルindex.html に導入する必要があります。

2. 使用する場合は、このように任意の vue ページのタグ内で使用できます。

2.pngをダウンロードする

1. 上で説明したように、それをプロジェクトに保存します。

2. 目的のアイコンの上にマウスを置き、クリックしてダウンロードします。

3. pngダウンロードを選択します

4. vue プロジェクトの src/assets の下の適切な場所に配置します。

5. ページ上でスタイルを設定する

.logo {
      top: 9px;
      left: 9px;
      margin-right: 10px;
      width: 30px;
      height: 30px;
      // border-radius: 4px;
      background: url("../assets/images/mulu2.png") no-repeat;
      background-size: contain;
    }

6. タグの紹介

7. ページ表示

知らせ：

方法 1 で導入したベクター画像は白黒でもよく、色はスタイルでカスタマイズできます。