uniapp 自定义图标icon

时间:2024-03-14 16:09:11

uniapp 自定义图标 超级简单

uniapp 自定义图标icon
例如上边的图标,我们发现都是蓝白切换,这时候用img整个项目就太大了,占内存,这是我们可以把他做成uniapp内置的icon图标。

准备工作:

1.先把图片以svg格式导入阿里图标库(用ps把png格式图片转化成svg格式没用,这一步可以让设计直接上传阿里图标库,提前把png图片命名好发给设计部)
类似这种
uniapp 自定义图标icon

(其实白色的精灵图可以不用命名)

2.去uniapp插件市场下载 iconfont 插件(iconfont插件
下载好放入文件的组件部分,如下图:
uniapp 自定义图标icon

3.在main.js里引入组件,如图
uniapp 自定义图标icon

4.到阿里图标库的项目里,打开我们的项目,
选择Unicode 和 查看在线链接,点击后如图:
uniapp 自定义图标icon

复制红框框里的内容,到组件的iconfont.css里,直接粘贴上去
uniapp 自定义图标icon

5.再到阿里图标库里,选中Font class ,再选择下载到本地
uniapp 自定义图标icon

下载后解压,打开会看到好多文件,我们能用到的只有iconfont.css
uniapp 自定义图标icon

用编辑器打开iconfont.css,我们只需要用到下面的样式,红框框里
uniapp 自定义图标icon

复制红框框里的代码,到项目里的iconfont.css里,直接覆盖之前的
粘贴过来以后发现是这样的,要做一些修改,看图:
uniapp 自定义图标icon

修改后的样子:
uniapp 自定义图标icon

6.现在我们可以直接调用了
示例:uniapp 自定义图标icon
自定义uniapp图标就完成啦