WU-UI

中文

English

中文

English

Appearance

自定义图标库 ​

wu-ui已通过大量的实践中，收集了用户最有可能需要用到的图标，见 Icon图标，但我们也相信，它肯定无法覆盖所有的场景和需求。

用户也可以使用标签的方式，自行引入字体图标，为何要通过自定义的方式集成呢？
这是因为 wu-ui 有统一的字体图标组件，使用方便，配置灵活，且风格统一。

说明

以下说明和演示，均针对阿里字体图标库，其他字体库源同理

基础说明 ​

我们假定您一个项目中，需要扩展多个图标，您应该把各个图标收集进一个阿里图标库的项目中，即使您后面不断的扩展图标，也能使它们在同一个库中。

一般情况下，我们建议您在收藏的项目中，使用"下载至本地"的功能，而后解压，复制文件夹中的"iconfont.css"与"iconfont.ttf"至uni-app项目中(其余的文件可忽略)

下面的操作默认您已进入阿里字体图标库中

  1. 搜索自己需要的图标并将自己需要的图标添加进购物车中并点击右上角的购物车

寻找需要的图标

  1. 点击添加至项目中并新建一个项目(名称为自己的项目名称即可)并点击确定(以后再添加图标还选择此项目即可)

添加至项目

新建项目

  1. 点击项目设置并修改"FontClass/Symbol 前缀"项为"custom-icon-"，修改"Font Family"为"custom-icon"，如下图：

项目设置项目设置

  1. 下载项目至本地

项目设置

  1. 复制文件夹中的"iconfont.css"与"iconfont.ttf"至项目中，一般放在根目录的static文件夹下

复制文件夹中的"iconfont.css"与"iconfont.ttf"至项目中

  1. 复制到项目中后打开"iconfont.css", 并修改部分内容如下：

修改"iconfont.css"部分内容

  1. 在项目根目录的"App.vue"中引入"iconfont.css", 注意自己的存放路径。
vue
/* App.vue */
<style>
/* 此处为style标签里面的最上面 */
@import "@/static/iconfont.css"
...
</style>
/* App.vue */
<style>
/* 此处为style标签里面的最上面 */
@import "@/static/iconfont.css"
...
</style>

VUE中使用自定义图标库 ​

vue
<!-- 注意 custom-prefix 的名称对应的是 "iconfont.css" 中的 font-family 的名称 -->
<wu-icon custom-prefix="custom-icon" name="aixin" size="30" color="#888888"></wu-icon>
<!-- 注意 custom-prefix 的名称对应的是 "iconfont.css" 中的 font-family 的名称 -->
<wu-icon custom-prefix="custom-icon" name="aixin" size="30" color="#888888"></wu-icon>

NVUE中使用自定义图标库 ​

由于 NVUE 中 @font-face css 属性会失效，因此我们需要使用原生的方法进行自定义图标库的添加。

打开 wu-icon.vue 并找到 script 中关于 APP-NVUE 原生引入字体图标库的部分

APP-NVUE原生字体图标库引入

vue
/* 在这部分添加自定义的图标库 */
<script>
    // #ifdef APP-NVUE
	// nvue通过weex的dom模块引入字体，相关文档地址如下：
	// https://weex.apache.org/zh/docs/modules/dom.html#addrule
	import iconUrl from './wuicons.ttf';
	import customUrl from '@/static/iconfont.ttf'; // 注意自己的路径
	const domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "wuicon-iconfont",
		'src': "url('" + iconUrl + "')"
	})
	domModule.addRule('fontFace', {
		'fontFamily': "custom-icon", // 注意fontFamily名称需要与"iconfont.css"中的fontFamily名称一致
		'src': "url('" + customUrl + "')"
	})
	// #endif
</script>
/* 在这部分添加自定义的图标库 */
<script>
    // #ifdef APP-NVUE
	// nvue通过weex的dom模块引入字体，相关文档地址如下：
	// https://weex.apache.org/zh/docs/modules/dom.html#addrule
	import iconUrl from './wuicons.ttf';
	import customUrl from '@/static/iconfont.ttf'; // 注意自己的路径
	const domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "wuicon-iconfont",
		'src': "url('" + iconUrl + "')"
	})
	domModule.addRule('fontFace', {
		'fontFamily': "custom-icon", // 注意fontFamily名称需要与"iconfont.css"中的fontFamily名称一致
		'src': "url('" + customUrl + "')"
	})
	// #endif
</script>

wu-icon组件使用自定义图标 ​

由于在 NVUE 中 css 的 :before 会失效，因此无法直接使用图标名称，需要使用图标的 unicode 码。

unicode 可在 "iconfont.css" 中查看

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"; /* 这就是图标对应unicode码, 使用时请忽略 \, 使用其后面的即可 */
}
/* 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"; /* 这就是图标对应unicode码, 使用时请忽略 \, 使用其后面的即可 */
}
vue
<!-- 注意 custom-prefix 的名称对应的是 "iconfont.css" 中的 font-family 的名称 -->
<wu-icon custom-prefix="custom-icon" name="e8c3" size="30" color="#888888"></wu-icon>
<!-- 注意 custom-prefix 的名称对应的是 "iconfont.css" 中的 font-family 的名称 -->
<wu-icon custom-prefix="custom-icon" name="e8c3" size="30" color="#888888"></wu-icon>