前言
开发小程序过程中,个人比较喜欢Vant的UI,美中不足的是Vant的Icon组件自带的图标实在太少了,于是探索一番之后找到了在Vant中使用Material Design图标的方法。示意图如下:
相关链接
Material Design
VantWeapp
正文
1. 引入Material Design样式表
在项目根目录的"utils"文件夹下新建“MD_Wxss/index.wxss”
@font-face { font-family: 'Material Icons'; font-style: normal; font-display: auto; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v43/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 18px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; display: flex; align-items: center; }
2. 在“app.wxss”中加载上一步创建好的文件
@import '/utils/MD_Wxss/index.wxss';
3. 在WXML中测试使用Material Design
<view class="material-icons"> room </view>
至此,我们已经能够看到崭新的图标出现在了小程序中。
4. 修改Vant组件源代码,使其可以使用Material Design
找到icon组件的文件夹,打开index.wxml,将下面的代码复制进去。
<wxs src="../wxs/utils.wxs" module="utils" /> <view class="custom-class {{ classPrefix }} {{ isImageName ? 'van-icon--image' : classPrefix + '-' + name }}" style="position:relative;color: {{ color }};font-size: {{ utils.addUnit(size) }};{{ customStyle }}" bind:tap="onClick" > <view wx:if="{{classPrefix!=='van-icon'}}"> {{name}} </view> <van-info wx:if="{{ info !== null || dot }}" dot="{{ dot }}" info="{{ info }}" custom-class="van-icon__info" /> <image wx:if="{{ isImageName }}" src="{{ name }}" mode="aspectFit" class="van-icon__image" /> </view>
主要是修改了两个地方:
position:relative;
<view wx:if="{{classPrefix!=='van-icon'}}"> {{name}} </view>
自此,我们在使用<van-icon> 组件的时候只需:
<van-icon class-prefix='material-icons' size="50" name="work"/>
即可既保留该组件的全部功能,也可以使用自定义组件。
但是,在这种情况下我们每次使用自定义图标的时候都得添加一句
class-prefix='material-icons'
而且在使用其他的一些有调用<van-icon> 组件的Vant组件时,也必须使用插槽,造成麻烦。
所以考虑将material-icons设置为默认的类前缀名。
只需找到icon组件的文件夹,打开index.js,将classPrefix 的默认值修改为material-icons :
classPrefix: { type: String, value: 'material-icons', }
这样我们就可以向原生Vant图标一样使用Material Design图标啦
|