[WeChat Mini Program - Native Development] Add custom icons (using Ali icon library as an example)

Method 1: Download svg and import

• Advantages: easy to operate, support colorful icons
• Cons: increases source code size

Download the icon image in svg format and put it into the source code for use

The path in the applet project isassets\icon\美食.svg

When using - code example

<image class="imgIcon" src="/assets/icon/美食.svg" />

.imgIcon {
    
    
  height: 60rpx;
  width: 60rpx;
  margin-right: 20rpx;
}

Method 2: import wxss

• Pros: Does not increase source code size
• Disadvantages: does not support colorful icons, it is troublesome to update

After adding the icon to your own icon project, generate the corresponding css link

The browser opens the css link

Copy it assets\icon\icon.wxssto

@font-face {
    
    
  font-family: "iconfont";
  /* Project id 1167694 */
  src: url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.woff2?t=1681094540417') format('woff2'),
    url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.woff?t=1681094540417') format('woff'),
    url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.ttf?t=1681094540417') format('truetype');
}

.iconfont {
    
    
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-feiji:before {
    
    
  content: "\e8b2";
}

.icon-zhuizhuiju:before {
    
    
  content: "\ebdb";
}

.icon-lvyou:before {
    
    
  content: "\e618";
}

.icon-meishi:before {
    
    
  content: "\fab7";
}

.icon-kejian:before {
    
    
  content: "\e630";
}

.icon-bukejian:before {
    
    
  content: "\e604";
}

When using - code example

  <view class="iconfont icon-meishi">
  </view>

In the wxss of the page, remember to import the wxss file of the icon

@import "/assets/icon/icon.wxss"