uniapp 自定义图标 超级简单
例如上边的图标,我们发现都是蓝白切换,这时候用img整个项目就太大了,占内存,这是我们可以把他做成uniapp内置的icon图标。
准备工作:
1.先把图片以svg格式导入阿里图标库(用ps把png格式图片转化成svg格式没用,这一步可以让设计直接上传阿里图标库,提前把png图片命名好发给设计部)
类似这种
(其实白色的精灵图可以不用命名)
2.去uniapp插件市场下载 iconfont 插件(iconfont插件)
下载好放入文件的组件部分,如下图:
3.在main.js里引入组件,如图
4.到阿里图标库的项目里,打开我们的项目,
选择Unicode 和 查看在线链接,点击后如图:
复制红框框里的内容,到组件的iconfont.css里,直接粘贴上去
5.再到阿里图标库里,选中Font class ,再选择下载到本地
下载后解压,打开会看到好多文件,我们能用到的只有iconfont.css
用编辑器打开iconfont.css,我们只需要用到下面的样式,红框框里
复制红框框里的代码,到项目里的iconfont.css里,直接覆盖之前的
粘贴过来以后发现是这样的,要做一些修改,看图:
修改后的样子:
6.现在我们可以直接调用了
示例:
自定义uniapp图标就完成啦