uniapp 自定义图标icon

2024-05-21 23:34:35

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图标就完成啦

后续问题：客户内网无法连接外网时，是不显示图标的
这时候就需要把下载下来的安装包全部放到项目里

这边就不用复制成外网地址了

uniapp 自定义图标icon相关推荐

百度地图自定义图标icon 添加本地图片无法显示问题解决
百度地图自定义图标icon 添加本地图片无法显示问题解决我们在阿里巴巴矢量库找的icon 保存到本地结论我们在阿里巴巴矢量库找的icon 保存到本地链接: 阿里巴巴矢量库. 图片: 随便找一个 ...
vue、vue 所有图标属性、vue Icon 所有图标属性、vue 图标所有类型属性、vue 自定义图标 Icon属性
vue.vue 所有图标属性.vue Icon 所有图标属性.vue 图标所有类型属性.vue 自定义图标 Icon属性使用方法 1.线框风格 1.方向性图标 2.提示建议性图标 3.编辑类图标 4 ...
React给antd中TreeSelect组件左侧加自定义图标icon
很多时候官网并没有给我们过多地详解来解释他们的产品怎么使用. 今天碰到了一个很恶心的问题,就是在给antd的treeSelect组件加左侧icon的时候,总是报一个警告, Warning: Each ...
制作自定义图标(icon)
icon在线制作:https://www.online-convert.com/result/df8f12c7-3854-4f02-8499-8e628682b6d7 需科学上网
uni-app 自定义图标
https://blog.csdn.net/IT_iosers/article/details/113278091 1.在page.json里的配置项主要注意:fontSrc:图标类型为ttf te ...
Android自定义app图标,自定义app图标(Icon) - Cordova中文网
自定义图标(Icon) 这节将介绍如何为不同的平台配置一个app的图标.对启动画面(splash screen)的支持已经被移动到Cordova自己的插件中了.配置选项可以在Splashscreen插 ...
uni-app引入自定义图标库——Iconfont-阿里巴巴
uni-app修炼之路(四) 导语 [Iconfont 官网](https://www.iconfont.cn) 1.首先在[官网](https://www.iconfont.cn)登录注册,选择你需 ...
iview weapp icon组件自定义图标小程序
写小程序图标没有想要的,需要自定义的时候.可以使用阿里巴巴矢量图标库自定义图标. 找到自己需要的,然后先加入购物车,点开购物车选择下载代码,然后解压压缩包. 复制 iconfont.css中的内容,到 ...
uni-app：uni-icons的使用及如何自定义图标
官方文档:https://uniapp.dcloud.io/component/uniui/uni-icons.html uni-icons 已经收录了日常开发中常用的图标 ,但是因为体积问题 ,不可 ...

最新文章

热门文章