1. The past and present of small icons.
Once upon a time, H5 development still used sprite images as a solution for small icons; however, with the passage of time, in today's front-end development environment, the usage rate of small icons is getting higher and higher, and the requirements are becoming more and more refined. Although component libraries such as Element, Iview, and Vant also provide some built-in icons, in the eyes of PM who pursues excellence, small and tall icons are what they want. In line with the mentality of professionals doing professional things, selecting and using the best, the best small icons has become a criterion for front-end developers.
2. Alibaba -- iconfont.
Among the many small icon resource stations, Alibaba's iconfont is undoubtedly the leader. It not only has abundant resources, but also has a series of advantages such as multi-person collaboration and project resource sharing. This article takes this as an example to teach you how to use it elegantly and efficiently in a vue project. Official website portal
3. Select the desired icon and add it to the project.
- Ali iconfont official website searches for the name of the small icon you want (this article takes 'Valentine's Day' as an example, the dream of a single dog), select the desired ones and add them to the library one by one.
- After selecting all icons and adding them to the library, add them to the project, and you can customize the project name.
- After that, you can view the project you just created and all the collections of small icons in My Project.
- At this point, the small icon preparation work before development is completed (ps: Of course, in actual development, it may be that pm or Miss UI selects these small icon icons for you and adds them to the project, you only need to give the account to the administrator can be added to the project).
4. Method 1: Online introduction method.
- Select the project above, and then copy the online code of the project (if it is the first time, then click 'no code, click here to generate'; note: if there is any small icon to update the project in the future, then you have to do it again Click the Regenerate link ).
- Introduce the css link copied above into the index.html entry file of the vue project, and then use it directly in the page you want to use. (xxx below is the small icon code copied in the icon project).
5. Method 2: download resource method.
- Select the corresponding project above, then download it to the local, and then copy the entire file to the static resource folder of the vue project after decompression.
-
Introduce the iconfont static resource in Vue's entry file main.js.
- Finally, use it directly where you need to use the corresponding small icon. (xxx below is the small icon code copied in the icon project)
6. Conclusion.
The above is all the content of this article. From the beginning to the end, it tells how to add small icons and items to the Alibaba iconfont resource station and how to use them in Vue (providing two mainstream solutions). Although simple, but can deepen the impression is not. The code words are not easy, please do more and more.