uview 使用自定义图标

最新推荐文章于 2025-03-06 09:24:05 发布
最新推荐文章于 2025-03-06 09:24:05 发布
阅读量8.3k 收藏 3
点赞数
分类专栏： uview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VOID_Pointer_G/article/details/109574455
版权

资料准备

  1. 阿里字体图标库

  2. 查阅文档：uni-app 的自定义图标 u-icon

在这里插入图片描述

操作
1. 下载svg格式的文件（如果是png等图片，先将图片转svg）
2. 上传svg文件到阿里字体图标库

在这里插入图片描述
在这里插入图片描述
根据需求填写（这里选择上传到项目）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 下载解压缩，修改 iconfont.css 文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4. 最后效果：

在这里插入图片描述

5. 项目中引入文件

在这里插入图片描述

6. 图标库使用
 <u-icon
	custom-prefix="custom-icon"
	name="range" 
	color="pink"
></u-icon>
uview2.0 如何自定义图标
weixin_44179923的博客
12-12 3351
首先去iconfont这个网站添加自己想要的图标，然后下载下来 把ttf文件放到根目录 static/iconfont.ttf 把css放到根目录的common/iconfont.css 打开App.vue 文件 修改成下面 <script> export default { onLaunch: function() { // #ifndef MP const domModule = weex.requireModule('dom') domModule.add.
css雪碧图（精灵图）与字体图标的介绍以及对比
qq_35436516的博客
09-24 461
css雪碧图（精灵图）与字体图标的介绍以及对比 设想一个实际场景：在一个页面为了展示，我们放置了很多独立的小图片，浏览器在显示页面的时候，就需要向服务器就会发送很多请求，来获取并加载这些小图片，但是这样的话，就会导致请求数量太多，造成资源浪费，以及访问速度变慢。 碰到这样的情况，可以使用两种方式解决这种问题：CSS雪碧图以及字体图标。但是这两种方式也都有不同的适用场景，需要根据实际需求来做取舍。 ...
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
11-23
「微信小程序」的开发框架体验起来，还不错——自带了UI框架。但是问题是他的IDE，表现起来相当的糟糕——其实主要是因为，我当时买WebStorm License买了好多年。所以，我觉得他的IDE真不如我这个付费好用。 而且，作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」。微信在「微信小程序」引导着Web开向封闭，我们再也不能愉快地分享我们的代码了。 如果我们放任下去，未来的Web世界令人堪忧。 好了，废话说完了： 文章太长不想看，可以直接看Demo哈哈： GitHub: https://github.com/phodal/weapp-webdemo 预览：htt
【uni-app u-icon打包后显示异常】
最新发布
weixin_45658815的博客
03-06 969
uView中集成的icon使用的是在线地址，如果打包后安装的硬件限制了网络访问就会出现这种情况。ps:非原创，但转载处找不到了404~
字体图标和精灵图的区别
qq_43654065的博客
01-20 194
css雪碧图（精灵图）与字体图标的介绍以及对比_JHCan333的博客-CSDN博客css雪碧图（精灵图）与字体图标的介绍以及对比设想一个实际场景：在一个页面为了展示，我们放置了很多独立的小图片，浏览器在显示页面的时候，就需要向服务器就会发送很多请求，来获取并加载这些小图片，但是这样的话，就会导致请求数量太多，造成资源浪费，以及访问速度变慢。碰到这样的情况，可以使用两种方式解决这种问题：CSS雪碧图以及字体图标。但是这两种方式也都有不同的适用场景，需要根据实际需求来做取舍。...https://blog.c
使用uview框架的icon组件之扩展自定义图标库
weixin_44168109的博客
01-26 6436
uView已经有很多图标，但也没办法满足我们所有的需求。此时，我们就需要自己扩展图标库。 icon组件之扩展自定义图标库选择以及下载图标项目配置以及使用 选择以及下载图标 1、首先可以选择自己喜欢的图标库，这里以阿里图标库为例。 2、接着选择自己的想要的图标并且加入购物车。 3、然后打开购物车把图标添加到项目中。 4、点击更多操作，选择编辑项目。 5、然后按照图片相应的填写好。 项目配置以及使用 ...
uview2 swipeAction 自定义关闭事件
weixin_44826388的博客
04-03 2059
#当我们使用uview2的swiperAction时，需要实现操作后关闭打开的item,在uview2中没有对应的api,可能是考虑优化的问题没有集成关闭全部的功能，也没有集成滑动成功的回调方法，而在uview1中存在集成滑动的方法回调 open所有这里可以根据uview1实现的两种实现方式。
uView自定义图标和普通引入图标（iconfont-阿里巴巴图标库）
章小鱼的博客
10-10 4211
CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架。
uni-app 引入本地iconfont
IT_iosers的博客
05-26 479
一、首先下载字体文件 二、然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件放入到 static 下，修改 iconfont.css 文件，如下 在需要的地方引入 样式文件 效果
扩展uview复选组件库支持自定义图片+自定义内容
luck332的专栏
09-25 1160
开启自定义图标，分别设置默认图片及选中图片可以先外层造 好自己想要的FLEX布局的内容，开启自定义模板，把FLEX内容往里一拖，重新生成源码即可。
vue中使用svg
Hello_oll的博客
07-24 1068
在svg文件里添加一张svgName.svg图片，iconClass跟图片名称保持一致，class可以自己添加类。注意：需要把svg图片文件的(需要修改的)fill以及stroke修改成currentColor或者直接删除。icons下创建svg目录，用来存放项目所使用的所有图标 svg 文件。比如下面的svg文件就stroke=“currentColor”在 main.js 入口文件中 全局引入 icons。完成上面操作后页面使用以及样式修改。icons下index.js文件。isExternal校验。
在uView UI中扩展和使用自定义图标
苛学加记事
08-10 4367
uView UI uView UI 是 uni-app 生态最优秀的UI框架之一，提供了众多常有组件。 在一般的项目中，都会涉及一些定制的图标，以美化界面上的展示效果。 以下记录uView UI扩展和使用自定义图标的步骤；主要有五步操作，按照步骤来，分分钟搞定。 1. 准备图标素材 这里使用阿里巴巴矢量图标库iconfont，进行图标的查找和管理。 创建一个和项目对应的图标库项目 然后设置项目FontClass/Symbol 前缀和Font Family的值分别为custom-icon-和custom-
uniapp 使用uview 自定义图标 (引入阿里矢量图标)
小小雨伞的博客
09-05 2966
1.首先获取图标下载图标的svg 2.完成后,点击资源管理进入我的项目 点击上传你下载的图标 3.上传完成后,点击项目设置 4.点击更新代码 复制代码到前端的一个css页面 @font-face { font-family: 'custom-icon'; /* Project id 2757918 */ src: url('你的代码'); } .custom-icon { font-family: "custom-icon" !important; font-size
SwipeAction 滑动单元格
qq_44645934的博客
05-26 1646
icons8是高质量的免费图标资源网站，支持在线改色、添加文字或背景装饰等.网址。
uView 2.0使用自定义iconfont图标
baidu_37302589的博客
05-16 5225
view2.0暂不支持使用自定义图标，只能通过修改源码去实现 实现后的效果如下 1、先去图标库选择想要的icon加入项目，再生成代码 2、再点击下载代码，解压后如下 3、编写test.js文件，并通过 node test.js 执行 let path1 = "./iconfont.json"; let fs = require('fs'); const path = require('path'); let plays = JSON.parse(fs.readFileSync(path1)); co
解决uView添加自定义图标不成功
renovateF5的博客
07-11 3299
自定义图标的添加方法：CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架这里1.0版本和2.0版本教程都是一样的，估计是很长没解决了。解决步骤：1.先按照上述链接把图标css文件下载下来，然后把css中的修改成和官方教程中的一样2.修改css中的类名，把custom-icon改成custom-icon-，（原理在最下面） 3.写代码，把图标引入进去，注意这里用的代码和官方的不同 原理（可以不看）：官方说的给两个值
如何使用uni-app在开发app中引入本地图片
m0_71963731的博客
11-16 2588
如何使用uni-app在app、小程序、H5中引入本地图片
如何在vue中使用svg图片及修改样式
csdnuu123的博客
11-05 2438
你可以根据项目的具体需求选择适合的方法。如果需要动态控制 SVG 的样式或行为，建议使用嵌入或方法；如果只是需要显示静态图标，使用标签或 CSS 背景图会更简单。使用 SVG 组件时，可以用结合 CSS 类、动态style绑定和 props 等多种方式调整样式，从而获得极大的灵活性。这也是 SVG 在前端开发中越来越受欢迎的原因之一。
vue3 iconify 图标几种使用 并加载本地 svg 图标
weixin_43512977的博客
11-22 4985
vue3 iconify 图标几种使用 并加载本地 svg 图标
uview steps 步骤条自定义图标
11-16
UView是一个轻量级、高性能的Vue UI组件库，其中的步骤条（Steps）组件用于展示任务流程的各个阶段。如果你想要自定义UView Steps的图标，可以按照以下步骤操作： 1. **引入依赖**：首先确保已经在项目中安装并引入了`@uview/uview`库。 ```html <template> <u-steps :options="stepOptions" /> </template> <script> import { Steps } from '@uview/uview'; export default { components: { USteps: Steps, }, data() { return { stepOptions: { // ... }, }; }, }; </script> ``` 2. **配置选项**：在data里，设置`stepOptions`对象，其中包含`activeIcon`、`finishIcon`等属性来指定当前步骤和完成步骤的图标。你可以传递一个字符串（如SVG路径或者字体图标名称），或者一个HTML元素。 ```js stepOptions: { activeIcon: 'path/to/your/current-icon', // 当前步进状态的图标 finishIcon: 'path/to/your/completed-icon', // 完成步进状态的图标 // 更多可选配置项：title、description等 } ``` 3. **定制图标**：如果需要动态图标，可以考虑通过CSS class或提供一个函数返回路径，或者使用第三方图标库提供的API来生成图标。 4. **使用图标库**：例如，如果你想使用Font Awesome，可以用`fa-check-square`这样的类名作为图标路径。 ```js stepOptions: { activeIcon: 'fa-circle-notch', finishIcon: 'fa-check-square', } ``` 5. **显示效果**：保存更改后，页面上就会显示你自定义的步骤条了。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值