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>
复制代码
更新库
新增图标后只要重新获取生成链接的代码即可