Use Alibaba icon library iconfont offline in vue

1. Open the iconfont Alibaba official website https://www.iconfont.cn

2. New project (this is convenient for later maintenance of icon library)

 

image.png

3. Add the required icons to the shopping cart

 

image.png

4. Open the shopping cart and select add to item, then OK

 

image.png

5. At this time, you can see the svg icon you selected in the project. At this time, you can click to download to the local

 

image.png

6. Open the downloaded zip package, you can see the files inside, take out the following files

 

image.png

7. Create an icon folder under the vue assets folder, and put the extracted files into this folder

8. Introduce import './assets/icon/iconfont.css' in main.js so that you can use the svg icon you downloaded in the vue project

9. In vue, you can write <span class = "icon iconfont icon-right"> </ span> to display the iconfont icon normally. You only need to modify the icon-right class when modifying it. The class name can be in see in font class

 

If you want to add pictures later, copy them in iconfont.css and add them to the project

 Each time you add an icon, you must overwrite the resource file

Published 266 original articles · praised 17 · 10,000+ views

Guess you like

Origin blog.csdn.net/qq_18671415/article/details/105391986