利用阿里的字体图标库封装一个icon组件

如何生产字体图标

1. 打开 www.iconfont.cn/

2. 在搜索区域搜索你想要的图标(比如success),然后加入购物车

3. 

4. 点击导航栏上面的购物车图标

5. 点击下载代码

6. 然后就会下载到你本地,里面有如下几个文件

7. 

8. 打开demo_index.html,查看使用方式

9. 

10. 封装一个使用font class的图标组件

11. 目标使用方式 

12. 

13. h-icon 代码如下

<template>  

<span  :class="classname"></span>
</template>
<script>

export default {  
props: {    
  name: {      
     type: String,      default: ''    
  }  
},  
computed: {    
     classname(){        return `iconfont icon-${this.name}`    }  
},  
data() {    
     return {}  
 }
}
</script>
<style scoped>
@import "../assets/iconFont/iconfont.css";
</style>

1. 使用方式;