WU-UICustom Icon Library
wu-ui has collected the icons that users are most likely to need through extensive practice, as shown in Icon Icon, but we also believe that it cannot cover all scenarios and requirements. Users can also use labels to introduce font icons on their own. Why integrate through custom methods?
This is because wu-ui has a unified font icon component, which is easy to use, flexible to configure, and has a unified style.
description
The following instructions and demonstrations are for Alibaba Font Icon Library The same applies to other font library sources
Basic Description
We assume that you need to expand multiple icons in a project, and you should collect each icon into a project in an Alibaba icon library. Even if you continue to expand the icons later, they can still be in the same library.
In general, we recommend that you use the "Download to Local" function in your favorite projects, then unzip and copy the "iconfont.css" and "iconfont.ttf" files from the folder to the uni app project (the remaining files can be ignored)
The following actions assume that you have entered the Alibaba Font Icon Library Medium
- Search for the icon you need and add it to your shopping cart, then click on the shopping cart in the upper right corner
- Click on "Add to Project" and create a new project (with the name of your own project) and click "OK" (you can also select this project by adding an icon later)
- Click on the project settings and modify the "FontClass/Symbol Prefix" item to "custom icon -", and modify the "Font Family" to "custom icon", as shown in the following figure:
- Download the project locally
- Copy "iconfont.css" and "iconfont.ttf" from the folder to the project, usually placed in the static folder of the root directory
- After copying to the project, open "iconfont.css" and modify some of the content as follows:
- Introduce "iconfont.css" in the "App.vue" of the project root directory, and pay attention to your storage path.
/*App.vue*/
<style>
/*This is the top of the style label*/
@Import "@/static/iconfont.css"
</style>/*App.vue*/
<style>
/*This is the top of the style label*/
@Import "@/static/iconfont.css"
</style>Using custom icon libraries in VUE
<!-- Note that the name of custom-prefix corresponds to the font family name in "iconfont.css" -->
<wu-icon custom-prefix="custom-icon" name="aixin" size="30" color="#888888"></wu-icon><!-- Note that the name of custom-prefix corresponds to the font family name in "iconfont.css" -->
<wu-icon custom-prefix="custom-icon" name="aixin" size="30" color="#888888"></wu-icon>Using custom icon libraries in NVUE
Due to the invalidity of the @font-face CSS attribute in NVUE, we need to use native methods to add custom icon libraries.
Open wu-icon.vue and locate the section in script about the APP-NVUE native imported font icon library
/*Add a custom icon library in this section*/
<script>
// #ifdef APP-NVUE
// NVUE introduces fonts through Weex's dom module, and the relevant document addresses are as follows:
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
import iconUrl from './wuicons.ttf';
import customUrl from '@/static/iconfont.ttf'; // Pay attention to your own path
const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "wuicon-iconfont",
'src': "url('" + iconUrl + "')"
})
domModule.addRule('fontFace', {
'fontFamily': "custom-icon", // Note that the fontFamily name needs to be consistent with the fontFamily name in "iconfont.css"
'src': "url('" + customUrl + "')"
})
// #endif
</script>/*Add a custom icon library in this section*/
<script>
// #ifdef APP-NVUE
// NVUE introduces fonts through Weex's dom module, and the relevant document addresses are as follows:
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
import iconUrl from './wuicons.ttf';
import customUrl from '@/static/iconfont.ttf'; // Pay attention to your own path
const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "wuicon-iconfont",
'src': "url('" + iconUrl + "')"
})
domModule.addRule('fontFace', {
'fontFamily': "custom-icon", // Note that the fontFamily name needs to be consistent with the fontFamily name in "iconfont.css"
'src': "url('" + customUrl + "')"
})
// #endif
</script>Using custom icons for wu-icon components
Due to the invalidation of (css in :before) in NVUE , the icon name cannot be directly used, and the unicode code of the icon needs to be used.
unicode can be viewed in "iconfont.css"
/* iconfont.css */
@font-face {
font-family: custom-icon; /* Project id 4198942 */
src: url('@/static/iconfont.ttf') format('truetype');
}
.custom-icon {
font-family: custom-icon !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.custom-icon-aixin:before {
content: "\e8c3"; /* This is the unicode code corresponding to the icon. When using it, please ignore and use the one following it \ */
}/* iconfont.css */
@font-face {
font-family: custom-icon; /* Project id 4198942 */
src: url('@/static/iconfont.ttf') format('truetype');
}
.custom-icon {
font-family: custom-icon !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.custom-icon-aixin:before {
content: "\e8c3"; /* This is the unicode code corresponding to the icon. When using it, please ignore and use the one following it \ */
}<!-- Note that the name of custom-prefix corresponds to the font family name in "iconfont.css" -->
<wu-icon custom-prefix="custom-icon" name="e8c3" size="30" color="#888888"></wu-icon><!-- Note that the name of custom-prefix corresponds to the font family name in "iconfont.css" -->
<wu-icon custom-prefix="custom-icon" name="e8c3" size="30" color="#888888"></wu-icon>