vi-icon v0.0.3

vi-icon

组件效果预览

使用

npm i vi-icon --save

使用微信开发者工具构建NPM并使用NPM模块

"usingComponents": {
  "ViIcon": "vi-icon",
}

示例

使用内置图标

iconName接收内置的图标名称

icon-style 用于定义图标的样式

<template>
  <ViIcon iconName="email" icon-style="vi-icon-email"></ViIcon>
</template>

如果要定义图标的字体大小，请给类名加上 before伪元素

内置图标的字体大小为14px

.vi-icon-email::before {
  font-size: 30px;
  color: red;
}

扩展图标库

使用图标库扩展功能请先阅读微信小程序的字体API

fontSource 接收图标库的资源文件。文件类型为 .ttf或者 .woff

<template>
  <ViIcon 
    fontSource="url('https://at.alicdn.com/t/font_629189_c2m154yp2ts.ttf')" 
    icon-style="icon-local">
  </ViIcon>
</template>

content 中的内容为字体的 unicode 编码

.icon-local::before {
  content: '\e602';
  font-size: 20px;
}

修改扩展图标的fontFamily

fontFamily 用于修改字体文件的css引用名称

<template>
  <ViIcon 
    fontSource="url('https://at.alicdn.com/t/font_849474_p1bye6fkj5.woff')" 
    icon-style="icon-network-error"
    fontFamily="viAbnormalTips">
  </ViIcon>
</template>

.icon-network-error::before {
  content: '\e602';
  font-size: 66px;
}

全局配置扩展图标的文件资源

如果是使用全局配置，请在app.js的options对象上挂载_$ViIcon配置信息

// app.js
App({
  onLaunch: function () {
  },
  ...serverData,
  globalData: {
    userInfo: null
  },
  _$ViIcon: {
    fontSource: 'url("https://at.alicdn.com/t/font_629189_c2m154yp2ts.ttf")',
    fontFamily: 'man-rong' // 可选项，如果不填，fontFamily为custom-fon
  }
})

如果是全局配置过了字体文件资源，那么只需要定义icon的样式即可

<template>
  <ViIcon 
    icon-style="icon-carams">
  </ViIcon>
</template>

.icon-carams::before {
  content: '\e603';
  color: aqua;
  font-size: 44px;
}

Config Props

Extend Class

Event name

Global Config Props

Icon Name 内置的图标名

版本记录

• v0.0.1 初始版本
• v0.0.3 新增全局配置外部字体文件功能