class的引用方式
<template>
<i :class="cls" :style="style"></i>
</template>
<script>
export default {
name: 'iconfont',
props: {
icon: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: 12
},
color: {
type: String,
default: '#222'
}
},
data() {
return {
cls: [
'iconfont',
`icon-${this.icon}`
]
};
},
computed: {
style() {
return `font-size: ${this.size}px; color: ${this.color}`;
}
},
}
</script>
<style lang='scss' scoped>
// 这是iconfont.css文件,实际项目中导入到main.js
// @import '../../assets/font/src/iconfont.css';
</style>