图标库使用一（vue-fontawesome）

Font Awesome是一套流行的图标字体库，我们在实际开发的过程中会经常遇到需要使用图标的场景，对于一些常用的图标，不用设计师，我们可以直接在Font Awesome中找到并且使用。

1.安装

#核心依赖
npm install --save @fortawesome/fontawesome-svg-core
#兼容vue的组件
npm install --save @fortawesome/vue-fontawesome
#awesome的solid风格图标
npm install --save @fortawesome/free-solid-svg-icons

#awesome的商标图标(可选)
npm install --save @fortawesome/free-brands-svg-icons

2.配置(main.js)

...
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
...
Vue.component('font-awesome-icon', FontAwesomeIcon);
...

   我们已经引入了Font Awesome的主要内容，并注册了Font Awesome组件，但是我们还没有引入任何一个图标，让我们先去Font Awesome官网找一下我们需要的图标。

...
// 引入需要的图标
import { 
    faUser,
} from '@fortawesome/free-solid-svg-icons';
import {
    faWeixin,
} from '@fortawesome/free-brands-svg-icons';
...
//添加到库中
library.add(
    faUser,
  	faWeixin
)

3.使用

<font-awesome-icon :icon="['fas', 'user']"></font-awesome-icon>
<font-awesome-icon :icon="['fab', 'weixin']"></font-awesome-icon>

        其中font-awesome-icon是我们刚刚注册好的组件名，:icon属性是一个数组，用来指定具体图标，刚刚的class中有两个属性，分别是fas和fa-user，第一个fas保留(代表时那个库的)，第二个fa-user去掉开头的fa-保留剩下的，作为数组的两个元素，就可以正确指定我们要的图标了。

4.个性化

        渲染出来实际上这是一个<svg>标签，我们可以把它包裹在其他HTML标签中，给这个图标设置大小和颜色，例如：

<template>
  <div id="app">
    <span class="my-icon">
      <font-awesome-icon :icon="['fas', 'user']"></font-awesome-icon>
    </span>
  </div>
</template>

<script>
  export default {
    name: 'app',
  };
</script>

<style>
  .my-icon {
    color: red;
    background-color: blue;
    font-size: 32px;
  }
</style>