如何自定义vant组件的图标

已于 2023-12-12 09:49:52 修改
阅读量1k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： 前端 javascript
于 2023-11-21 11:31:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59411260/article/details/134528024
博客介绍了前端问题的解决办法，一是采用template + #组件属性名的方式；二是通过import引入图片，并将引入的名字写到对应属性位置，如 :clear-icon=\clearIcon\。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.解决办法：template +  #组件属性名

示例：（class为自己设定）

      <van-cell-group inset class="group">
          <van-field
            class="question-description"
            v-model="descriptionContent"
            autosize
            type="textarea"
            maxlength="300"
            placeholder="补充问题情境或详细的问题描述，更容易得到准确的回答"
            show-word-limit
          >
          <template #left-icon>
            <img class="description-icon" src="@/assets/img/community/description_icon.png" 
             alt="" >
          </template>
        </van-field>
      </van-cell-group>

2.import引入图片  将引入的名字写到对应属性的位置

比如： :clear-icon="clearIcon"

Vant使用自定义图标(阿里图标)
大圣归来圣骑士清欢的博客
04-08 2770
Vant使用自定义图标
vant字体图标下怎么添加文字_Vant的Field使用自定义图标
weixin_39533280的博客
12-19 1245
Vant自带的图标比较少，有时候不能满足使用。普通使用第三方图标关于Vant怎么使用第三方图标，网上有文章，以使用iconfont为例，有几种方法，说其中一种：首先下载图标到本地：image.png下载完成后放在项目中，如放在src/assets下，像demo.html、demo.css等示范文件可选择性删除。在main.js中添加上述样式的引入代码：import "@/assets/font/i...
Vant使用 van-icon自定义图标以及其他组件设置icon属性
传播是知识存在的意义
09-15 9212
使用微信开发者工具，开发微信小程序的时候需要使用到大量的图标，使用阿里巴巴矢量图标库（https://www.iconfont.cn/）里面的图标。开发环境：macOS + 微信开发者工具,van-icon使用自定义图标，以及其他组件配置 icon属性
用CSS自定义vant中toast样式
最新发布
2201_75691491的博客
07-22 202
如何用CSS自定义toast轻提示样式。通过设置自定义类名或直接使用van-toast类名，可以手动修改toast的宽高、图标大小、字体等样式。需要注意的是，自定义样式时不能使用scss和scoped，否则会导致样式不生效。文章提供了完整的CSS样式代码，帮助开发者快速实现美观的toast提示效果。
Vant自定义图标
zxl0428的博客
01-06 5879
使用本地字体文件 Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置url-loader import ‘vant/lib/icon/local.css’;（替换为本地） 自定义图标 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可...
vant使用自定义图标
m0_52364694的博客
08-20 2030
1.组件添加icon-prefix属性，属性值为iconfont图标前缀 2.left-icon添加属性值"一半的图标名和iconfont"
【Vant4】Vant4使用自定义图标(阿里图标)
此人太懒，没有任何简介
12-22 4632
Vant4使用自定义图标(阿里图标)
Vant 使用 iconfont 自定义图标
qq_33160523的博客
11-24 3301
vant官方文档 刚开始看官方文档不是很清楚，后面百度加上自己验证后才弄清楚使用方法 一、到iconfont下新建一个项目 https://www.iconfont.cn/ 这里的Font Family就是对应vant的class-prefix属性，FontClass/Symbol 前缀设为Font Family后面加上’- 二、把所需的图标加入的新建的项目 选择对应图标加入购物车 点击右上角购物车然后加入新建的项目 下载然后把文件夹解压复制到项目src/下某个目录，（demo.css和demo
vant自定义引入iconfont图标
qq_41672008的博客
06-06 3万+
我也算是使用vant UI的初学者，但是我这个人比较喜欢思考一些问题，喜欢钻研一些问题，2333. 想要了解vantUI的可以点击https://youzan.github.io/vant/#/zh-CN/intro 因为vantUI给的图标非常少，为了满足自己的需求，就应该找到一种方法来向vant添加自己自定义的图标，对于自定义图标我第一时间想到的就是阿里的iconfont矢量图库，相信大家...
vant 自定义 van-dropdown-item的用法
10-15
本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 Vant UI 中的一个下拉菜单组件，通常用于展示一个可折叠的选项列表。在默认情况下，`van-dropdown-...
vue+vant 组件图片上传自定义删除组件
onlylele的博客
11-20 5665
使用vant组件中的图片上传功能，删除不完善，如何自己定义vant中图片上传功能的删除功能； 1、html模板文件： css: .van-doc-demo-block__title {margin: 0;font-weight: 400;font-size: .14rem;color: rgba(69,90,100,.6);padding: .35rem .15rem .15rem;} ....
在vant 中使用cell组件 定义图标该图片和位置操作
01-18
@本来想直接使用icon组件，使用阿里的图标库，可是怎么弄也不行，折腾一下午，最后决定使用最笨的办法，直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <!--../../assets/tou.png--> <!----> <van-cell value=未完成 lab
android中CheckBox加载自定义选中与未选中图片样式
09-25
简单实现自定义checkbox控件四种选择状态的图片样式
Vant UI使用iconfont自定义图标
前端三疯的博客
06-21 2291
在使用Vant UI做h5页面时，不可避免的会使用到各种小图标，但是Vant 官方提供的图标是有限的，考虑到这种情况，vant也提供了一种方法去自定义图标，自定义图标。可能有些同学看到这里也是一头雾水，下面有详细的教程 iconfont 让我们的UI设计小姐姐将图标上传到iconfont 注意，我们尽量让UI小姐姐将图标的前缀统一，点击右上角的 “项目设置” 下载项目 将项目下载到本地，将文件 iconfont.css 和iconfont.ttf文件放入项目文件夹/assets/icon_font 配置
vant组件修改样式,修改vant框架组件，实现tab组件增加自定义事件
weixin_32676541的博客
03-27 3360
修改vant框架组件，实现tab组件增加自定义事件修改vant框架组件，实现tab组件增加自定义事件在使用vant组件中，项目需要我们把框架的组件修改，加多一个按钮，用做用户的偏好设置需求：要求按钮不能影响组件的欢动效果，并且也要拥有组件的粘性定位布局组件：我们修改框架组件是很麻烦的事情，vue的vant 不能直接修改组件结构，所以我们不会使用修改结构的方法，修改标签的数据也会很麻烦，所以我们直接...
vant自定义引入iconfont图标以及字体
weixin_61710685的博客
03-17 6450
修改想要了解vantUI的可以点击https://youzan.github.io/vant/#/zh-CN/intro因为vantUI给的图标非常少，为了满足自己的需求，就应该找到一种方法来向vant添加自己自定义的图标，对于自定义图标我想到一种引入vant引入iconfont图标的方法就是阿里的iconfont矢量图库。
vant中van-icon使用自定义图标简单粗暴
热门推荐
weixin_42565137的博客
07-15 5万+
图标库是iconfont，这里面的图标够用了吧 一.新建项目 二.选择喜欢的图标，加入购物车，再添加到项目 三.生成代码 四.将链接粘贴到地址栏，将css内容复制到icon.css 五.在App.vue进行全局引用 六.在相应组件使用van-icon，iconfont类是必须要有的，不同的图标就是不同的percy-icon-xxxx ...
van-field实现自定义图标
月兒~圓
03-24 2050
1.在在阿里巴巴图标库https://www.iconfont.cn/中找到需要的icon加购物车。代码中class-prefix的值和name的值拼接起来要和下图中的class名一致。3.把以下四个文件放到assets中。2.在购物车中下载代码。
wx小程序 实现自定义图标复选框组(vant weapp)
m0_46364033的博客
04-27 1512
要实现以下如图效果 (简洁说明一下遇到的问题：参考vant weapp - Checkbox复选框 - 利用自定义图标<image slot="icon" src="{{ checked ? activeIcon : inactiveIcon }}" /> ===》 出现的问题：即使onChange之后value值是变了，但是页面中图标并未发生变化，后发现可能还是得setData才行) 以下是自己用的解决代码： index.wxml ( direction："组"的排列方向 ；label-p
vant自定义图标微信小程序
05-26
要在微信小程序中使用自定义图标，可以使用 Vant Weapp 组件库提供的 icon 组件。Vant Weapp 提供了一些内置的图标，同时也支持自定义图标。 以下是使用 Vant Weapp 自定义图标的步骤： 1. 将自定义图标转换为 base64 格式，可以使用在线工具或者自己编写代码进行转换。将转换后的 base64 字符串保存到一个变量中，例如： ``` const customIcon = 'data:image/png;base64,iVBORw0KG...'; ``` 2. 在需要使用自定义图标的页面或组件中引入 Vant Weapp 组件库： ``` import { Icon } from 'vant-weapp'; ``` 3. 在页面或组件中使用 Icon 组件，并传入自定义图标的 base64 字符串作为 icon 属性的值： ``` <icon name="custom" class="custom-icon" :src="customIcon" /> ``` 其中，name 属性的值可以任意设置，只要不与 Vant Weapp 内置的图标名称重复即可。通过设置 class 属性，可以对自定义图标进行样式调整。 4. 在页面或组件的样式文件中定义自定义图标的样式： ``` .custom-icon { display: inline-block; width: 24px; height: 24px; background-size: cover; } ``` 其中，width 和 height 属性可以根据实际情况进行调整，background-size 属性设置为 cover 可以保证图片按比例缩放并填满容器。 以上就是在微信小程序中使用 Vant Weapp 自定义图标的方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值