[WeChat Mini Program] A little exploration about using Material Design in Vant component

Posted May 27, 20203 min read

Foreword

In the process of developing small programs, I personally like Vant's UI. The only thing I miss is that Vant's Icon component comes with too few icons, so I found a way to use Material Design icons in Vant after exploring. The schematic diagram is as follows:

02.png

Material Design
VantWeapp

Text

1 . Introduce Material Design style sheet

Create a new "MD \ _Wxss/index.wxss" under the "utils" folder in the project root directory

//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 . Load the file created in the previous step in "app.wxss"

@import '/utils/MD_Wxss/index.wxss';

3 . Testing using Material Design in WXML

<view class = "material-icons">
    room
</view>

So far, we have been able to see brand new icons appear in the applet.
01.png

4 . Modify the Vant component source code so that it can use Material Design

Find the icon component folder, open index.wxml, and copy the code below.

<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>

There are two main changes:

  • Add style to the outermost view

    position:relative; //Without this code, the dot, info and other functions of the van-icon component cannot be used normally

  • Add a new view to the outermost view

    //The principle can be seen in the third step
    //The condition judgment here is mainly to prevent conflicts with Vant native icons

    {{name}}

Since then, when we use the <van-icon> component, we only need to:

<van-icon class-prefix = 'material-icons' size = "50" name = "work" />

You can keep all the functions of the component or use custom components.
However, in this case we have to add a sentence every time we use a custom icon

class-prefix = 'material-icons'

And when using some other Vant components that call <van-icon> components, you must also use slots, causing trouble.
So consider setting material-icons as the default class prefix.
Just find the folder of the icon component, open index.js, and modify the default value of classPrefix to material-icons:

classPrefix:{
  type:String,
  value:'material-icons',
}

This way we can use the Material Design icon just like the native Vant icon

Conclusion

In view of the limited front-end level of the author, please forgive me for any offense.
I haven't found a solution to this problem. The current method of modifying the source code will be very confusing. I can only hope to find a more elegant solution in the future. I hope this article can help my friends who have common doubts with me. If you find a more elegant solution, please leave a message ~