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