mpvue 中使用 iconfont

mpvue 中使用 iconfont

静态页面

如果是静态写入 html 的图标可以直接使用 unicode 方式引用，将生成的代码写入app.vue的样式内即可：

// app.vue
<style>
  @font-face {
    font-family 'iconfont' /* project id 796664 */
    src url('//at.alicdn.com/t/font_796664_ekixfyr2isj.eot')
    src url('//at.alicdn.com/t/font_796664_ekixfyr2isj.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_796664_ekixfyr2isj.woff') format('woff'), url('//at.alicdn.com/t/font_796664_ekixfyr2isj.ttf') format('truetype'), url('//at.alicdn.com/t/font_796664_ekixfyr2isj.svg#iconfont') format('svg')
  }
  .iconfont {
    font-family 'iconfont'
    font-size 16px
    font-style normal
    color #9e9595
  }
</style>
复制代码

JSON 数据动态注入

无论是本地 JSON 还是异步请求到的数据，都无法用 unicode 方式正确编译图标，这时可以使用 Font class 方式引用，当然在 Vue 原生中首推这种方式引用，但是在 npvue 中 受限于小程序，无法直接使用@import引入生成的样式链接，不过通过一个小步骤也可以解决：

获取链接代码

将获取到的代码 保存在本地路径下assets/style/iconfont.css

引用本地文件

// app.vue
<style>@import 'assets/styles/iconfont.css'</style>
复制代码

动态写入图标

<span :class="['iconfont','icon-'+item]" v-for="(item, index) in goodsData.info.label" :key="index"></span>
复制代码

更新库

新增图标后只要重新获取生成链接的代码即可

---

转载于:https://juejin.im/post/5b9b26616fb9a05d2c43993e