About using Alibaba's iconfont vector icon in Vue

There are many import methods on the Internet, and the official also provides three import methods, but most people will not display after importing, or cannot customize the style. The following method will not have the above problems and is currently the best way to introduce.

1. The website of Alibaba vector library requires login before use. Please register and log in first.

2. After logging in, search for the icon you want, such as user, shopping cart, etc.

3. Move the mouse to the desired icon and click "Add to Library". It is recommended not to directly import it by copying the SVG code or other import methods. It is best to add it to the library first and then download it.

4. Open the shopping cart in the upper right corner of the website and click the icon you selected to "Add to Items"

5. Download to local, you will get a compressed package, unzip it to the current folder

6. The following contents will appear. Copy all files except the one starting with demo into the "iconfont" folder under the "asset" folder of the project. If there is no such folder, create a new folder yourself.

7. Next, use a browser to open the demo_index.html in the unzipped folder. These codes correspond to each icon and will be used later.

8. Write this in the code, and your project webpage will display the first icon, the icon corresponding to the above picture == &#xe601 ==

<template>

 <span class="iconfont">&#xe601;</span>
<template>

<script>
    import '../asset/iconfont/iconfont.css'; //This is the path to your iconfont.css, which may be different from mine</script>

9. To modify the icon style, just modify the .iconfont class in the style tag.

<template>

 <span class="iconfont">&#xe601;</span>
<template>

<script>
    import '../asset/iconfont/iconfont.css'; //This is the path to your iconfont.css, which may be different from mine</script>


<style>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

10. Finished. On which page you want to use the icon, just import '../asset/iconfont/iconfont.css'; on that page.

11. Notice If you want to add some new icons from Alibaba Vector Library, you need to delete the iconfont folder in the project and start again from step 2 of this article, select, download, and import

This is the end of this article about Vue using Alibaba's iconfont vector icons. For more relevant Vue vector icon content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!