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

| 接口 | 数据类型 | 说明 | 选项 | 默认值 | 版本号 | | :--: | :--: | :--: | :--: | :--: | :--: | | iconName | String | 组件内容的icon名称 | 选填 | '' | 0.0.1 | | fontFamily | String | 扩展的字体资源名称设置 | 选填 | custom-font | 0.0.1 | | fontSource | String | 字体的资源路径需要为 | 选填 | '' | 0.0.1 |

Extend Class

| prop | 说明 | | :--: | :--: | | icon-style | 用于设置字体图标的样式 |

Event name

| Event name | 说明 | | :--: | :--: | | clickIcon | 组件点击事件 |

Global Config Props

| 接口 | 数据类型 | 说明 | 选项 | 默认值 | 版本号 | | :--: | :--: | :--: | :--: | :--: | :--: | | _$ViIcon | Object | 字体资源文件的相关配置 | 选填 | {} | 0.0.3 |

Icon Name 内置的图标名

| icon name | icon name | icon name | | :--: | :--: | :--: | | email | shooping | location | | cloud-download | cloud-upload | branch | | data | telephone | share | | price | full-screen | full-screen-cancel | | delete | qrCode | setting | | setting-cente | control | return | | link | link-cancel | shopping-case | | label | print | bluetooth | | add | reduce | right | | error | refresh | history | | bottom-left-arrow | bottom-right-arrow | top-right-arrow | | top-left-arrow | right-arrow | left-arrow | | bottom-arrow | top-arrow | bottom-arrow-doubl | | top-arrow-double | right-arrow-double | right-arrow-double | | left-arrow-double | - | - |

版本记录

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