1. Download the icon file

Alibaba icon library location: iconfont-Alibaba vector icon library

eg: Search for the "bookmark" icon, click to add to the shopping cart, then enter the shopping cart, fill in the items to be added, or download directly, click to edit

The editor can set the color of the picture, or the pixel size, etc., and then click to download, and the downloaded file is a zip archive

2. Unzip the zip file and import the project

Copy the following files (you can also skip the .woff and .woff2 files, just don’t import them when importing) to the corresponding directory of the project static

3. Modify the iconfont.css file

iconfont is the name of the custom icon used
The src path is the downloaded tff file path
.bjs-icon-search is the custom icon name

@font-face {
  font-family: "iconfont"; /* Project id 4090979 */
  src: url('/static/ttf/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 自定义icon */
.bjs-icon-search:before {
  content: "\e615";
}

4. Import the file into the css of App.vue (can be used globally), or into the css of the corresponding page

	/* #ifndef APP-NVUE */
	// nvue 页面暂时不支持自定义图标
	@import '@/static/icon-css/customicons.css';
	@import "@/static/icon-css/iconfont.css";
	
	/* #endif */

5. Use custom icons

Note that if vue3 needs slot to be used in <template> node

<template v-slot:searchIcon>
	<uni-icons class="search-bar-icon" color="#999999" size="30" type="home" />
	<uni-icons custom-prefix="iconfont" type="bjs-icon-search" size="30"></uni-icons>
</template>

If it is vue2:

<uni-icons slot="searchIcon" custom-prefix="iconfont" type="bjs-icon-search" size="30"></uni-icons>

6. Use colorful icon color or modify size

In the project settings, select the color option, and then replace the original tff and other files. Sometimes the cache will cause the effect to fail. Clear the cache and try to compile again

7. Final effect

uniapp uses a custom icon icon