background

When antdesign's icons no longer meet the needs, a third-party icon library is needed. Antdesign recommends using icon, but the official document recommends using online iconfont, but I personally prefer to use it offline for a sense of security hhh

Version

View: View3
Ant Design : 2.x

step

1 Add the required icons to the iconfont library

https://www.iconfont.cnhttps://www.iconfont.cn

2 Custom icon

2.1 Open the icon of the shopping cart, which contains the icon just added into the warehouse

2.2 Add the icon to the project

2.3 Custom icon

You can customize and edit the color and size of the icon. I am using Font Class here. Symbol is the method recommended by antdesign. The official website has posted useful methods, which I will not introduce here.

3 Download to local

Click "Download to local"

The file directory inside the open file is roughly as follows

Copy these files into your own project

4 Move the downloaded file to your own project

Put the folder you just downloaded under src. I put it under the asset directory and renamed it "font_icon". Of course, it depends on personal habits. If you quote it later, just remember to quote the correct path.

5 Use icons

5.1 First define a common class

The style inside depends on the individual situation. I defined common.css in the common directory

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

5.2 Introduce css in main.js

One is the common class just defined

The other is to download the iconfont.css in the iconfont and import it according to the path defined by yourself

import './common/common.css'
import './assets/font_icon/iconfont.css'

5.3 Use icon in vue file

First import the js file in the <script> of the vue file, and import it according to the path defined by yourself (this step is also available, you can try it)

import iconfont from "../assets/font_icon/iconfont.js"

Finally, use the icon in the current vue file.

 <span class="icon iconfont icon-news"></span>

Everyone will be confused, how do I know the class name of the icon I use? Hehehehe, the html file in the iconfont file I just downloaded has instructions on how to use it, and the class name of the icon is also very considerately posted. Okay, just copy it yourself, because the specific usage in it is not suitable for vue3, so I record it here

How to use IconFont offline with Vue3+Antdesign2