目录

chen 的个人博客

VX:ZzzChChen
Phone:13403656751
Email:zxydczzs@gmail.com

X

uView组件u-icon扩展自定义图标

一、需求分析

在使用 uni-app 开发时,组件的使用是势在必行的,而 uView 组件则提供了非常多快捷便利的组件可以供我们使用,感兴趣的可以去看看。

在使用 uView 的 u-icon 组件时,发现并没有自己想要的图标怎么办?别担心,uView 提供了完整的一套解决方法,虽然感觉有点过时了。扩展自定义图标库

这是官网的文档,可是我做了之后发现不一样了,所以略微改动了一下。

二、问题解决

1、先打开阿里巴巴矢量图标库,先在右侧导航栏找到登录按钮进行登录,我这里使用了 github 账户进行登录。

image.png

2、登录成功后,在导航栏中找到“资源管理”→“我的项目”,点击进入,需要先创建新的项目,名称自定义,将 FontClass/Symbol 前缀和 Font Family 修改为和图中一样,注意 Font Family 少一个横杠,编辑完成点击新建。

image.png

3、在阿里矢量图标库首页中搜索你想要的图标,找到并下载下来,注意要下载 SVG 格式

image.png

image.png

4、下载完成后找到你下载的 SVG 图标,打开刚刚创建的项目,选择上传图标至项目。

image.png

点击过后选择左边这个,然后将你刚刚下载好的 SVG 图标上传,直接点击“保留颜色并提交”。

image.png

这样这个图标就出现在你的项目里了。

image.png

5、接下来就是将图标运用在 uniapp 项目当中,在阿里矢量图我的项目中选择下载至本地,这样我们就拿到了我们所需的文件,下方标注的就是所需要的文件

image.png

image.png

6、打开你的 uni-app 项目,将这四个文件放在项目中的任意位置,我单独把 iconfont.css 放在了/common/css 目录下,然后将其他三个放在了分了包的目录下,/subPackage/common/css

image.png

image.png

7、在 APP.vue 中引用 iconfont.css

在 style 标签中第一行写入,注意和自己的目录对好,然后打开 iconfont.css

“style”:

1@import url("./common/css/iconfont.css");

“iconfont.css”:

1@font-face {
2  font-family: "custom-icon"; /* Project id 2534396 */
3  src: url('subPackage/common/css/iconfont.woff2?t=1620701598353') format('woff2'),
4       url('subPackage/common/css/iconfont.woff?t=1620701598353') format('woff'),
5       url('subPackage/common/css/iconfont.ttf?t=1620701598353') format('truetype');
6}

src 内的三个 url 对应那三个文件的位置。

8、引用成功,项目没有报错,如果在 APP.vue 中引入 iconfont.css 路径是错误的,项目会报错,如果在 iconfont.css 中引入其他三个文件的路径是错误的,项目也会报错,注意配置好路径。配置完成后,就可以使用了。使用方法:

1<u-icon name="wendu" custom-prefix="custom-icon" size="28" style="margin-right: 8rpx;"></u-icon>

主要点在于 custom-prefix 和 name 属性,按照我的步骤下来的就不需要改变 custom-prefix,只需要在你的阿里矢量图中找到想用的图标,点击编辑,将 Font Class / Symbol 复制下来替换 name 中的值即可。

image.png

image.png


标题:uView组件u-icon扩展自定义图标
作者:zzzzchen
地址:https://www.dczzs.com/articles/2021/05/11/1620711812280.html