Table of contents
demand background
It is inevitable to use some icons in the development process of enterprise projects, especially when developing H5 pages and applets, basically icons are used, although some existing ui component libraries also provide some icons that can be used directly. But when these icons cannot meet the needs of our project, we need to introduce some custom icons. This article mainly introduces in detail how to introduce Ali's monochrome and color font icons in the vue3 project.如果觉得本篇文章对您有帮助，还望点赞、收藏+关注一下，希望能够帮助到更多需要的小伙伴,谢谢！
Create a vue3 project
The case code in this article is to use vite to create a vue3 project. Using font icons has nothing to do with build tools. If you already have a project, you can skip this step.
Execute the following command to create a vue3 project:
# npm 6.x
npm create vite@latest iconfont-vue-app --template vue
# npm 7+, npm7+以上版本使用以下命令创建
npm create vite@latest iconfont-vue-app -- --template vue
After the project is created, enter the root directory of the project to execute npm ithe installation dependencies, and execute npm run devthe startup project after the installation is complete.
Monochrome font icons referenced in projects
The so-called monochrome font icon is an icon that only supports setting one color.
There are two reference methods for monochrome font icons:
1. Unicode reference method
2. Font-class class name reference method
Download font icons:
First, we go to the Alibaba vector icon library to download the icons we need in our project
Add to the project:
Download icon:
After downloading and decompressing, we get the following directory structure:
Import font icons into the project:
Copy the iconfont.css and iconfont.ttf files into the project, here I copied them to /src/assets/iconfontthe directory under the root directory of the project:
Then import the iconfont.css file globally in main.js:
Unicode reference method:
Unicode is the most original application method of fonts on the web page. Its characteristics are:
1. The best compatibility, supporting IE6+ and all modern browsers.
2. Support to dynamically adjust the icon size, color, etc. according to the font.
3. But because it is a font, it does not support multi-color. You can only use monochrome icons on the platform, even if there are multi-color icons in the project, they will be automatically decolorized.
Reference the font icon in the template:
<span class="iconfont"></span>
Font-class class name reference method (recommended method):
Font-class is a variant of Unicode usage, mainly to solve the problems of unintuitive writing and ambiguous semantics of Unicode.
Compared with Unicode usage, it has the following characteristics:
1. Good compatibility, supporting IE8+ and all modern browsers.
2. Compared with Unicode, the semantics are clear, and the writing is more intuitive. It's easy to tell what this icon is.
3. Because the class is used to define the icon, when the icon needs to be replaced, only the Unicode reference in the class needs to be modified.
4. However, because the font is still used in essence, multi-color icons are still not supported.
Reference the font icon in the template:
<span class="iconfont icon-gouwuche"></span>
Project References Colored Icons
The so-called color icons refer to icons with multiple colors. The characteristics of color icons are as follows:
1. Multi-color icons are supported, no longer limited by single color.
2. Through some techniques, it is supported to adjust the style through font-size and color like fonts.
3. Poor compatibility, supports IE9+, and modern browsers.
Download color icons:
Similarly, go to the Alibaba vector icon library to search and download the color icon you want
Then add it to the project and click the download icon:
After the download is complete, unzip to get the following directory structure:
Introduce colored icons in your project:
彩色图标是不能直接引入到项目中使用的，需要借助第三方的iconfont-tools工具转换为对应的css文件才能引入到项目中使用！
Install the iconfont-tools tool globally:
npm install -g iconfont-tools
Then execute iconfont-toolsthe command . According to the prompt, press Enter by default, or you can enter the desired file name and other information.
Finally, an iconfont-weapp folder will be generated in the current directory:
copy the iconfont-weapp-icon.css file in this folder to the project /src/assets/iconfontdirectory, and then import the style file globally in the main.js file:
Finally, you can use colored icons in the template through the class name!
<span class="t-icon t-icon-feiji"></span>
**最后再啰嗦一下**：
t-icon corresponds to the css prefix entered when executing the iconfont-tools command, and the class name of the font icon needs to be prefixed with t-
Friends who still don’t understand iconfont-weapp-icon.csswill understand after opening the file generated by the tool!
It is not easy to create, if you think this article is helpful to you, please like, bookmark + follow and support, thank you!