Vue project uses Alibaba vector icon library detailed tutorial (downloaded to local in symbol mode)

1. Enter the official website: iconfont-Alibaba vector icon library

2. Search for the icon you want to use in the search box, select the icon you like and click Add to Cart, you can choose more than one.

 3. After the selection is complete, click the shopping cart in the upper right corner, click Add to Item after the page pops up, and click OK after selecting the item

 

 4. Select symbol, then click Download to local

 

5. Unzip the downloaded folder, create a new "iconfont" folder in the project folder (the name can be chosen by yourself), and copy all the compressed files to the iconfont folder

6. Introduce iconfont in the main.js file in the project, note: the import path is subject to your own project

 

/** iconfont
 * Symbol 引用
 */
import './assets/iconfont/iconfont'

 7. Just apply it where you need to use it in the project, import it according to the icon name you downloaded, or modify the icon name in iconfont.svg

   <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-gaosugonglu" />
                </svg>