矢量图标库Font Awesome的SVG新版本图标库5.x

Bootstrap已经到4.3.x,随之常用的图标组件Font Awesome也发布5.8版本。
其4.7是4.x系列最后一个版本，从5.x开始，开始从font转向SVG的绘制矢量图标。
这几乎是未来的方向，SVG开始越来越多的应用了。

Font Awesome v4.7旧版

比较大的变化是有了收费的pro版本和免费的free版本。
有四组图标集，Solid和Brands是免费的，Regular和Light是收费的。

Font Awesome 5.x

关键我看了下pro版授权的解释，真得很难界定creators和你的clients，一不小心就需要购买一个seat。

免费的和以前一样强大，而且依然可以选择如旧版那样使用字体库的方式引用。

也可以尝试SVG+JS的方式引用。

字体库方式和SVG方式的主要特性区别：

Feature/Option	Web Fonts & CSS	SVG & JS
How Icons Render	As CSS pseudo-elements and styled as the Font Awesome font-family.	As SVG elements in your page's HTML.
Best For	People who are used to Font Awesome's older versions. People who projects already using Font Awesome 4.X. People using content management systems and site building tools like Wordpress and Squarespace.	People who prefer to use SVGs to display icons. People who don't mind rolling up their sleeves with Front End code. People who want Auto-Accessibility enabled for their icons.
Upgrading Difficulty	Similar file structure and framework. Shim available.	Different files and references needed. Some rendering proofing is needed. Shim available.
Requirements	CSS and a browser that supports web fonts (leveraging @font-face).	CSS, JavaScript, and a browser that supports rendering SVGs.
Icon Sizing	Supported	Supported
Icon Rotating	Supported	Supported
Listed, Bordered, and Pulled Styling	Supported	Supported
Icon Animations	Supported	Supported
Stacking Icons	Supported	Supported
Power Transforms	Not supported	Supported
Masking	Not supported	Supported
Layering Text and Counters	Not supported	Supported
Auto-Accessibility	Not supported	Supported

除了使用CDN在外网使用，还可以下载到本地，或者通过npm的包管理器引入到本地工程中。

为流行的一些框架、组件及应用，编写了相关的插件便于适配和集成，支持Angular，Ember，jQuery，Less，React，Sass，Turbolinks，Vue.js，WordPress。

我比较感兴趣的是Vue.js，引入和使用，简单又略显繁琐。

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

src/main.js 

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

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

src/App.vue

注意，每一个使用的图标都需要在使用前这样引入

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner, faAlignLeft } from '@fortawesome/free-solid-svg-icons'

library.add(faSpinner, faAlignLeft)

如果想省事的话，这样

import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fab)

然而官方不建议这样做，因为这样会失去了繁琐带来的好处，减少不必须的引入，增加了包体积。
其实吧，我更愿意避免麻烦，因为一个个引入真的好费神。

参考：

Font Awesome v5.x with Vue.js

Font Awesome v4.7.0