1 Introduction
If the icon library used in the project is not based on some specific business, you can basically find the corresponding icon in the Alibaba icon library , which greatly reduces the pressure on the UI. We can create any icons ourselves. For the project, categorize and package the required icons into the project, and then download it and quote it directly.
Second, create an icon library
1 Go to the icon library official website, register and log in (you can log in directly with a github account), and then create a project:
2 Then click Create Project
3 Go to the homepage to search for the corresponding icon, and then click Add Storage to complete the storage operation.
4 The icon after the storage needs to be added to the project, click the shopping cart option, you can see the icon we just added to the storage inside:
5 Add to our previous project
6 Follow this method to get 2-3 icons, go back to the project just now, pack and download.
7 The structure of the downloaded file is as follows.
3. Cite files in common projects
The most basic usage, if you don't use any front-end framework, pure html and jquery, then you only need to put the above resource files in your project, and then import the iconfont.csssum of the above files iconfont.js. In your project, you can demo_index.htmluse the icon in the same way as in.
Fourth, expand Icon component in iview
In the vue project, you must first main.jsuse the icon file in
In this way, if you use iview in your project, then you can directly use the icon you defined~ The syntax is as follows
<Icon custom="iconfont icontriangle-right"></Icon>
Note that iconfont must be filled in as its class name. Otherwise the picture cannot be recognized