微信小程序使用iconfont

iconfont

官网地址

在线加载

1. 选择图标添加入库（自定义ICON也可以，需要自己上传制作）
2. 添加至项目
   
3. 复制fontcss代码
   

本地加载

微信小程序不支持加载本地字体文件，但可以将字体文件转成base64引入

1. 下载字体文件
   
2. 转换字体文件
   
   文件转换地址
   
3. 复制base64至wxss
   

使用

1. 引入
   将复制下来的css代码，引入项目即可，如果使用本地则将src: url中的链接改变为base64即可

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

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

.icon-weixiu:before {
  content: "\e635";
}

.icon-shuidi:before {
  content: "\e616";
}

.icon-ppt:before {
  content: "\e605";
}

.icon-png:before {
  content: "\e715";
}

.icon-WORD:before {
  content: "\e607";
}

.icon-PDF:before {
  content: "\e60a";
}

2. 使用

<icon class="iconfont icon-shuidi"></icon>

封装component

基本概念就是将name，color，size单独提取出来

1. wxml

<text class="l-icon iconfont icon-{{ name }}" style="font-size: {{ size }}px;color: {{ color }};"></text>

2. js

name	color	size
icon名称	颜色	大小（px，可自行设置rpx）

properties: {
  name: String,
  size: {
    type: String,
    value: 22
  },
  color: {
    type: String,
    value: "#00B1DE"
  }
}

4. 引入wxss

@import "./font/iconfont.wxss"
.l-icon{
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

4. 使用
   组件名称可自行定义

<l-icon class="icon-box-img" name="shuidi" size="30" color="#fff"></l-icon>