Vue.js 使用 FontAwesome

这里以使用微信和支付宝的 Icon 为例。

步骤

1. 安装包

   其中 fontawesome-svg-core 为核心包，free-solid-svg-icons 为默认的 fas 资源包，free-brands-svg-icons 为品牌图标的 fab 资源包。
   另外这里使用的 vue 2.x ，需要安装 vue-fontawesome@latest 包。

   npm i --save @fortawesome/fontawesome-svg-core
   npm i --save @fortawesome/free-solid-svg-icons
   npm i --save @fortawesome/free-brands-svg-icons
   npm i --save @fortawesome/vue-fontawesome@latest

2. 在 main.js 中导入组件和图标

   import { library } from '@fortawesome/fontawesome-svg-core'
   import { faWeixin, faAlipay } from '@fortawesome/free-brands-svg-icons'
   import { faRetweet, faArrowCircleDown } from '@fortawesome/free-solid-svg-icons'
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
   
   library.add(faWeixin, faAlipay)
   library.add(faRetweet, faArrowCircleDown)
   
   Vue.component('font-awesome-icon', FontAwesomeIcon)

3. 在页面展示图片

   <font-awesome-icon :icon="['fab', 'weixin']" style="color: #03dd6c;" />
   <font-awesome-icon :icon="['fab', 'alipay']" style="color: #1977ff;" />

其它包

除了上面用到的包之外，还有如下这些，其中 pro 开头的几个包是要付费使用的。
安装方式和上面的类似。

package name	prefix
free-solid-svg-icons	fas
free-regular-svg-icons	far
free-brands-svg-icons	fab
pro-solid-svg-icons	fas
pro-regular-svg-icons	far
pro-light-svg-icons	fal
pro-duotone-svg-icons	fad

链接

1. @fortawesome_vue-fontawesome - npm
2. GitHub - FortAwesome_vue-fontawesome_ Font Awesome 5 Vue component