Vue page quickly uses Alibaba vector icon library

I have already written an article before

How to use Alibaba vector icon_turbo summer soseki's blog-CSDN blog

This article explains in great detail how to use the Alibaba vector icon library in HTML pages

Below we explain several methods of introducing Alibaba vector icon library icon into the vue page.

Table of contents

1. Introduce online links

1. The ninth step link introduction in vue should be introduced in the entry file index.html

2. When using it, you can use it in the tag on any vue page like this

2. Download png

1. Save it to the project as described above.

2. Hover over the desired icon and click to download.

3. Select png download

4. Place it in the appropriate location under src/assets of the vue project

5. Set styles on the page

6. Tag introduction

7. Page display

---

1. Introduce online links

This method is almost the same as how to use Alibaba vector icon library in HTML pages. The blog entry is:

How to use Alibaba vector icons_turbo Summer Soseki's blog-CSDN blog https://blog.csdn.net/qq_62799214/article/details/131884248

Just modify the following steps:

1. The ninth step link introduction in vue should be introduced in the entry file index.html

2. When using it, you can use it in the tag on any vue page like this

2. Download png

1. Save it to the project as described above.

2. Hover over the desired icon and click to download.

3. Select png download

4. Place it in the appropriate location under src/assets of the vue project

5. Set styles on the page

.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. Tag introduction

7. Page display

Notice:

The vector image introduced in method 1 may be black and white, and the color can be customized in the style.