赞
踩
自定义图标的添加方法:
CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
这里1.0版本和2.0版本教程都是一样的,估计是很长没动过了。
解决步骤:
1.先按照上述链接把图标css文件下载下来,然后把css中的修改成和官方教程中的一样
2.修改css中的类名,把custom-icon改成custom-icon-,(原理在最下面)
- 修改之后的,
- @font-face {
- /* 声明"custom-icon"字体 */
- font-family: "custom-icon";
- src: url('data:application/x-font-woff2;charset=utf-8;base64,xxxxxxxx') format('woff2');
- }
-
- .custom-icon- {
- /* 引用上面声明的"custom-icon"字体 */
- font-family: "custom-icon" !important;
- font-size: 16px;
- font-style: normal;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- /* 字体图标的前缀为"custom-icon-" */
- .custom-icon-copy:before {
- content: "\e641";
- }
3.写代码,把图标引入进去,注意这里用的代码和官方的不同
<u-icon custom-prefix="custom-icon-copy custom-icon"></u-icon>
原理(可以不看):
官方说的给两个值,一个是custom-prefix,一个是name,其实在内部合并成了custom-prefix-name。举例:
<u-icon custom-prefix="custom-icon" name="copy"></u-icon>
在组件u-icon内部处理出两个参数,一个是uClasses,是个类组成的数组,这里会push进去custom-prefix加上-和name拼接成的类名,也就是第一步的css中类名;一个是icon,自定义图标下用的是name。
也就是参数传递进去的组件和下面的一样
- <text
- class="custom-icon-copy"
- >copy</text>
这样自定义图标是出不来的。换个写法就行了,同时不把name传递进去,因为图标遮不住这个参数name的文字。
- <text
- class="custom-icon-copy custom-icon"
- ></text>
所以写法应该是这样的。之所以在第一步把css的类名后面加-,是因为组件u-icon内部会自己拼接上减号,custom-icon传进去会变成custom-icon-
<u-icon custom-prefix="custom-icon-copy custom-icon"></u-icon>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。