vue-cli 如何使用vue-awesome？

Posted 2020-10-30 shengnan_2017

font-awesome 有很多图标字体可供使用，那么，如何在vue中使用呢？

进入重点。。。

1.安装vue-awesome

npm insatll vue-awesome 

2.在main.js 注册

项目入口 main.js 引用字体库

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘

// 引入vue-awesome
import Icon from ‘vue-awesome/components/Icon‘
import ‘vue-awesome/icons/index.js‘

// 全局注册
Vue.component(‘icon‘, Icon)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

 

3.在组件中使用 图表字体

<template>
  <div id="nav">
    <div class="left">
      <img src="../assets/logo.png" >
      <ul>
        <li>
          <icon name="home"></icon>
          home</li>
        <li>details</li>
      </ul>
    </div>
    <div class="right">
      <ul>
        <li>hello</li>
        <li>worldl</li>
      </ul>
    </div>
    {{msg}}
  </div>
</template>

<script>
export default {
  name: ‘navbar‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

1. import Icon.vue 组件
2. new you-icon.js，里面通过 Icon.register 注册图标
3. 【可选】 新建图标文件出口文件，这个在使用的图标很多的时候比较方便
4. <icon name="you icon name"></icon> 引用图标
5. 给图标设置样式（大小可以通过 transform: scale() 来设置）