@fortawesome/vue-fontawesome 0.1.0-4 → 0.1.2

package/README.md

@@ -1,3 +1,7 @@
+<a href="https://fontawesome.com">
+  <img align="right" width="100" height="100" alt="Official Javascript Component" src="https://img.fortawesome.com/349cfdf6/official-javascript-component.svg">
+</a>
+
 # vue-fontawesome
 
 [![npm](https://img.shields.io/npm/v/@fortawesome/vue-fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/vue-fontawesome)
@@ -5,6 +9,47 @@
 
 > Font Awesome 5 Vue component using SVG with JS
 
+<!-- toc -->
+
+- [Introduction](#introduction)
+    + [Upgrading Font Awesome?](#upgrading-font-awesome)
+    + [Get started](#get-started)
+    + [Learn about our new SVG implementation](#learn-about-our-new-svg-implementation)
+    + [Going from 0.0.x to 0.1.0](#going-from-00x-to-010)
+- [Installation](#installation)
+- [Add more styles or Pro icons](#add-more-styles-or-pro-icons)
+- [Usage](#usage)
+  * [Recommended](#recommended)
+    + [Quick warning about self-closing tags](#quick-warning-about-self-closing-tags)
+    + [Processing i tags into svg using Font Awesome](#processing-i-tags-into-svg-using-font-awesome)
+  * [The icon property](#the-icon-property)
+    + [Shorthand that assumes a prefix of "fas"](#shorthand-that-assumes-a-prefix-of-fas)
+    + [Explicit prefix (note the Vue bind shorthand because this uses an array)](#explicit-prefix-note-the-vue-bind-shorthand-because-this-uses-an-array)
+    + [Explicit icon definition through something like a computed property](#explicit-icon-definition-through-something-like-a-computed-property)
+  * [Alternative using component property](#alternative-using-component-property)
+  * [Why use the concept of a library?](#why-use-the-concept-of-a-library)
+    + [Import the specific icons that you need](#import-the-specific-icons-that-you-need)
+    + [Import entire styles](#import-entire-styles)
+  * [Tree shaking alternative](#tree-shaking-alternative)
+- [Features](#features)
+  * [Register your components first](#register-your-components-first)
+  * [Basic](#basic)
+  * [Advanced](#advanced)
+- [Integrating with other tools and frameworks](#integrating-with-other-tools-and-frameworks)
+  * [Nuxt.js](#nuxtjs)
+- [FAQ](#faq)
+  * [Why so explicit (the :icon="['far', 'coffee']" syntax)?](#why-so-explicit-the-iconfar-coffee-syntax)
+    + [How about a separate property for the prefix?](#how-about-a-separate-property-for-the-prefix)
+    + [Bindings become boilerplate and verbose](#bindings-become-boilerplate-and-verbose)
+    + [Properties can disagree with each other](#properties-can-disagree-with-each-other)
+- [How to Help](#how-to-help)
+- [Contributors](#contributors)
+- [Releasing this project](#releasing-this-project)
+
+<!-- tocstop -->
+
+## Introduction
+
 Hey there! We're glad you're here...
 
 #### Upgrading Font Awesome?
@@ -12,21 +57,21 @@ Hey there! We're glad you're here...
 If you've used Font Awesome in the past (version 4 or older) there are some
 things that you should learn before you dive in.
 
-> https://fontawesome.com/how-to-use/upgrading-from-4
+> https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
 
 #### Get started
 
 This package is for integrating with Vue.js. If you aren't using Vue then it's
 not going to help you. Head over to our "Get Started" page for some guidance.
 
-> https://fontawesome.com/get-started
+> https://fontawesome.com/how-to-use/on-the-web/setup/getting-started
 
 #### Learn about our new SVG implementation
 
 This package, under the hood, uses SVG with JS and the `@fortawesome/fontawesome-svg-core` library. This implementation differs drastically from
 the web fonts implementation that was used in version 4 and older of Font Awesome. You might head over there to learn about how it works.
 
-> https://fontawesome.com/how-to-use/svg-with-js
+> https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core
 
 #### Going from 0.0.x to 0.1.0
 
@@ -62,9 +107,9 @@ $ npm i --save @fortawesome/pro-regular-svg-icons
 $ npm i --save @fortawesome/pro-light-svg-icons
 ```
 
-Using the Pro packages requires [additional configuration](https://fontawesome.com/how-to-use/js-component-packages).
+Using the Pro packages requires [additional configuration](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers).
 
-## or with Yarn
+Or with Yarn:
 
 ```
 $ yarn add @fortawesome/fontawesome-svg-core
@@ -84,10 +129,10 @@ The following examples are based on a project configured with [vue-cli](https://
 import Vue from 'vue'
 import App from './App'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCoffee } from '@fortawesome/free-solid-svg-icons'
+import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-library.add(faCoffee)
+library.add(faUserSecret)
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
@@ -106,7 +151,7 @@ new Vue({
 ```javascript
 <template>
   <div id="app">
-    <font-awesome-icon icon="coffee" />
+    <font-awesome-icon icon="user-secret" />
   </div>
 </template>
 
@@ -129,9 +174,9 @@ If you are writing these types of templates make sure and use valid HTML syntax:
 <font-awesome-icon icon="coffee"></font-awesome-icon>
 ```
 
-#### Processing `<i>` tags into `<svg>` using Font Awesome
+#### Processing i tags into svg using Font Awesome
 
-A basic installation of [Font Awesome](https://fontawesome.com/get-started) has
+A basic installation of [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=svg-with-js) has
 the ability to automatically transform `<i class="fas fa-coffee"></i>` into
 `<svg class="...">...</svg>` icons. This technology works with the browser's
 DOM, [`requestAnimationFrame`][raf], and [`MutationObserver`][mo].
@@ -153,23 +198,33 @@ dom.watch() // This will kick of the initial replacement of i to svg tags and co
 
 The `icon` property of the `FontAwesomeIcon` component can be used in the following way:
 
-#### Shorthand that assumes a prefix of `fas`:
+#### Shorthand that assumes a prefix of "fas"
 
 ```javascript
 <font-awesome-icon icon="spinner" />
+<font-awesome-icon icon="align-left" />
+
 <font-awesome-icon :icon="['fas', 'spinner']" /> # Same as above
+<font-awesome-icon :icon="['fas', 'align-left']" /> # Same as above
 ```
 
-For the above to work you must add the `spinner` icon to the library.
+For the above to work you must add the `spinner` and `align-left` icon to the library.
 
 ```javascript
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faAlignLeft } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faSpinner)
+library.add(faSpinner, faAlignLeft)
+```
+
+In the event that you are using an icon with a multi-word name please note that
+you would need to pass in the icon name using _kebab-case_ as opposed to _camelCase_.
+
+```javascript
+<font-awesome-icon icon="address-card" />  # import { faAddressCard } from '@fortawesome/free-solid-svg-icons'
 ```
 
-#### Explicit prefix (note the Vue bind shorthand because this uses an array):
+#### Explicit prefix (note the Vue bind shorthand because this uses an array)
 
 ```javascript
 <font-awesome-icon :icon="['far', 'spinner']" />
@@ -184,7 +239,7 @@ import { faSpinner } from '@fortawesome/pro-regular-svg-icons'
 library.add(faSpinner)
 ```
 
-#### Explicit icon definition through something like a computed property:
+#### Explicit icon definition through something like a computed property
 
 ```javascript
 <template>
@@ -245,14 +300,14 @@ Explicitly selecting icons offer the advantage of only bundling the icons that y
 use in your final bundled file. This allows us to subset Font Awesome's
 thousands of icons to just the small number that are normally used.
 
-#### Import the specific icons that you need:
+#### Import the specific icons that you need
 
 ```javascript
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCoffee } from '@fortawesome/free-solid-svg-icons'
 import { faSpinner } from '@fortawesome/pro-light-svg-icons'
 
-library.add(faCoffee, fab, faSpinner)
+library.add(faCoffee, faSpinner)
 ```
 
 #### Import entire styles
@@ -288,7 +343,7 @@ that specific icon.
 
 ## Features
 
-The following features are available as [part of Font Awesome](https://fontawesome.com/how-to-use/svg-with-js).
+The following features are available as part of Font Awesome. Note that the syntax is different from our general web-use documentation.
 
 ### Register your components first
 
@@ -300,7 +355,7 @@ library** before you bootstrap your Vue application.
 
 ```
 import Vue from 'vue'
-import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from 'vue-fontawesome'
+import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.component('font-awesome-layers', FontAwesomeLayers)
@@ -309,23 +364,26 @@ Vue.component('font-awesome-layers-text', FontAwesomeLayersText)
 
 ### Basic
 
-Spin and pulse animation:
+[Size](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons):
 
 ```html
-<font-awesome-icon icon="spinner" spin />
-<font-awesome-icon icon="spinner" pulse />
+<font-awesome-icon icon="spinner" size="xs" />
+<font-awesome-icon icon="spinner" size="lg" />
+<font-awesome-icon icon="spinner" size="6x" />
 ```
 
-Fixed width:
+[Fixed width](https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons):
 
 ```html
 <font-awesome-icon icon="spinner" fixed-width />
 ```
 
-Border:
+[Rotate](https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons):
 
 ```html
-<font-awesome-icon icon="spinner" border />
+<font-awesome-icon icon="spinner" rotation="90" />
+<font-awesome-icon icon="spinner" rotation="180" />
+<font-awesome-icon icon="spinner" rotation="270" />
 ```
 
 Flip horizontally, vertically, or both:
@@ -336,23 +394,20 @@ Flip horizontally, vertically, or both:
 <font-awesome-icon icon="spinner" flip="both" />
 ```
 
-Size:
+Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons):
 
 ```html
-<font-awesome-icon icon="spinner" size="xs" />
-<font-awesome-icon icon="spinner" size="lg" />
-<font-awesome-icon icon="spinner" size="6x" />
+<font-awesome-icon icon="spinner" spin />
+<font-awesome-icon icon="spinner" pulse />
 ```
 
-Rotate:
+[Border](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons):
 
 ```html
-<font-awesome-icon icon="spinner" rotation="90" />
-<font-awesome-icon icon="spinner" rotation="180" />
-<font-awesome-icon icon="spinner" rotation="270" />
+<font-awesome-icon icon="spinner" border />
 ```
 
-Pull left or right:
+[Pull left or right](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons):
 
 ```html
 <font-awesome-icon icon="spinner" pull="left" />
@@ -361,36 +416,36 @@ Pull left or right:
 
 ### Advanced
 
-Power Transforms:
+[Power Transforms]((https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)):
 
 ```html
 <font-awesome-icon icon="spinner" transform="shrink-6 left-4" />
 <font-awesome-icon icon="spinner" :transform="{ rotate: 42 }" />
 ```
 
-Masking:
+[Masking](https://fontawesome.com/how-to-use/on-the-web/styling/masking):
 
 ```html
 <font-awesome-icon icon="coffee" :mask="['far', 'circle']" />
 ```
 
-Symbols:
+[Symbols](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-symbols):
 
 ```html
 <font-awesome-icon icon="edit" symbol />
 <font-awesome-icon icon="edit" symbol="edit-icon" />
 ```
 
-Layers:
+[Layers](https://fontawesome.com/how-to-use/on-the-web/styling/layering):
 
 ```html
 <font-awesome-layers class="fa-lg">
   <font-awesome-icon icon="circle" />
-  <font-awesome-icon icon="check" transform="shrink-6" style="color: white;" />
+  <font-awesome-icon icon="check" transform="shrink-6" :style="{ color: 'white' }" />
 </font-awesome-layers>
 ```
 
-Layers text:
+[Layers text](https://fontawesome.com/how-to-use/on-the-web/styling/layering):
 
 ```html
 <font-awesome-layers full-width class="fa-4x">
@@ -398,3 +453,199 @@ Layers text:
   <font-awesome-layers-text class="gray8" transform="down-2 shrink-8" value="Q" />
 </font-awesome-layers>
 ```
+
+## Integrating with other tools and frameworks
+
+### Nuxt.js
+
+Install `@fortawesome/vue-fontawesome` and `@fortawesome/fontawesome-svg-core` and any icon packages.
+
+```
+npm install --save @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
+```
+
+Inside your Nuxt.js project add a `plugins/fontawesome.js` file.
+
+```javascript
+import Vue from 'vue'
+import { library, config } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+
+// This is important, we are going to let Nuxt.js worry about the CSS
+config.autoAddCss = false
+
+// You can add your icons directly in this plugin. See other examples for how you
+// can add other styles or just individual icons.
+library.add(fas)
+
+// Register the component globally
+Vue.component('font-awesome-icon', FontAwesomeIcon)
+```
+
+Modify `nuxt.config.js` adding to the `css` and `plugins` sections.
+
+```javascript
+css: [
+  '@fortawesome/fontawesome-svg-core/styles.css'
+]
+```
+
+```javascript
+plugins: [
+  '~/plugins/fontawesome.js'
+]
+```
+
+## FAQ
+
+### Why so explicit (the :icon="['far', 'coffee']" syntax)?
+
+It's been brought up a few times that the array syntax used for specifying an
+icon from the library is a bit cumbersome. Initially, this does seem to
+be the case but we do have good reasons.
+
+#### How about a separate property for the prefix?
+
+```html
+<font-awesome-icon far icon="spinner" />
+```
+
+or
+
+```html
+<font-awesome-icon prefix="far" icon="spinner" />
+```
+
+The problem with this is that it does not provide a consistent or concise way to specify the mask.
+
+```html
+<font-awesome-icon far icon="spinner" mask="circle" />
+```
+
+Does the `far` apply to the icon or the mask? What is the prefix for the property it does not apply to?
+
+Whereas this is consistent and concise:
+
+```html
+<font-awesome-icon :icon="['far', 'spinner']" :mask="['fas', 'circle']" />
+```
+
+#### Bindings become boilerplate and verbose
+
+Since icons are not always static but can change based on Vue component
+`methods` or `computed` values we have to take that into consideration.
+
+Icon properties end up being more verbose:
+
+```html
+<font-awesome-icon :far="style === 'far'" :fal="style === 'fal'" :icon="icon" />
+```
+
+vs.
+
+```html
+<font-awesome-icon :icon="[style, icon]" />
+```
+
+Or if you are using a `prefix` property it smells of needless boilerplate:
+
+```html
+<template>
+  <font-awesome-icon :prefix="iconPrefix" :icon="iconName" />
+</template>
+
+<script>
+export default {
+  computed: {
+    iconPrefix() {
+      return 'fas'
+    },
+    iconName() {
+      return 'coffee'
+    }
+  }
+}
+</script>
+```
+
+vs.
+
+```html
+<template>
+  <font-awesome-icon :icon="icon" />
+</template>
+
+<script>
+export default {
+  computed: {
+    icon() {
+      return ['fas', 'coffee']
+    }
+  }
+}
+</script>
+```
+
+#### Properties can disagree with each other
+
+If we allow prefix definition through a property and we also allow an icon to
+be specified as an object through direct import these two have a chance to
+argue with eachother. This could lead to some head-scratching when an icon
+doesn't appear in the expected style.
+
+In the following case which style should be used (light from the icon definition or regular from the far boolean):
+
+```html
+import { faSpinner } from `@fortawesome/pro-light-svg-icons`
+
+<template>
+  <font-awesome-icon far :icon="faSpinner" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      faSpinner
+    }
+  }
+}
+</script>
+```
+
+## How to Help
+
+Review the following docs before diving in:
+
+* [CONTRIBUTING.md](CONTRIBUTING.md)
+* [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
+
+And then:
+
+1. Check the existing issue and see if you can help!
+
+## Contributors
+
+The following contributors have either hepled to start this project, have contributed
+code, are actively maintaining it (including documentation), or in other ways
+being awesome contributors to this project. **We'd like to take a moment to recognize them.**
+
+|                                                            | Name           | GitHub                                             |
+| :--------------------------------------------------------: | -------------- | -------------------------------------------------- |
+| <img src="https://github.com/SirLamer.png?size=72" />      | SirLamer       | [@SirLamer](https://github.com/SirLamer)           |
+
+If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.
+
+The Font Awesome team:
+
+|                                                            | Name           | GitHub                                             |
+| :--------------------------------------------------------: | -------------- | -------------------------------------------------- |
+| <img src="https://github.com/supercodepoet.png?size=72" /> | Travis Chase   | [@supercodepoet](https://github.com/supercodepoet) |
+| <img src="https://github.com/robmadole.png?size=72" />     | Rob Madole     | [@robmadole](https://github.com/robmadole)         |
+| <img src="https://github.com/mlwilkerson.png?size=72" />   | Mike Wilkerson | [@mlwilkerson](https://github.com/mlwilkerson)     |
+| <img src="https://github.com/talbs.png?size=72" />         | Brian Talbot   | [@talbs](https://github.com/talbs)                 |
+
+## Releasing this project
+
+See [DEVELOPMENT.md](DEVELOPMENT.md#release)

package/UPGRADING.md

@@ -42,23 +42,23 @@ What does that mean?
 ~~Old way:~~
 
 ```javascript
-import fontawesome from '@fontawesome/fontawesome'
+import fontawesome from '@fortawesome/fontawesome'
 import solid from '@fortawesome/fontawesome-free-solid'
 import faTwitter from '@fortawesome/fontawesome-free-brands/faTwitter'
 import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
 
-import fontaweome.library.add(solid, faTwitter)
+fontawesome.library.add(solid, faTwitter)
 ```
 
 New way:
 
 ```javascript
-import { library } from '@fontawesome/fontawesome-svg-core'
-import { fas } from '@fortawesome/fontawesome-free-solid'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
 import { faTwitter } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-import library.add(fas, faTwitter)
+library.add(fas, faTwitter)
 ```
 
 This is also a valid way to import icons that works if your tool does not support tree shaking:
@@ -107,7 +107,7 @@ If you were previously relying on Font Awesome to replace any `<i>` tags in
 your page or app with `<svg>` you'll need to explicitly control that now.
 
 ```javascript
-import { watch } from '@fortawesome/fontawesome-svg-core'
+import { dom } from '@fortawesome/fontawesome-svg-core'
 
-watch() // This will kick of the replacement of i tags and configure a MutationObserver
+dom.watch() // This will kick of the replacement of i tags and configure a MutationObserver
 ```

package/examples/vue-cli/package.json

@@ -10,50 +10,50 @@
     "build": "node build/build.js"
   },
   "dependencies": {
-    "vue": "^2.5.2"
+    "vue": "^2.5.17"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.0-7",
-    "@fortawesome/free-brands-svg-icons": "^5.1.0-4",
-    "@fortawesome/free-regular-svg-icons": "^5.1.0-4",
-    "@fortawesome/free-solid-svg-icons": "^5.1.0-4",
-    "@fortawesome/vue-fontawesome": "^0.1.0-1",
-    "ajv": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.6",
+    "@fortawesome/free-brands-svg-icons": "^5.4.1",
+    "@fortawesome/free-regular-svg-icons": "^5.4.1",
+    "@fortawesome/free-solid-svg-icons": "^5.4.1",
+    "@fortawesome/vue-fontawesome": "^0.1.1",
+    "ajv": "^6.5.4",
     "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
+    "babel-core": "^6.26.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^7.1.5",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-preset-env": "^1.3.2",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-stage-2": "^6.22.0",
-    "chalk": "^2.0.1",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
+    "chalk": "^2.4.1",
+    "copy-webpack-plugin": "^4.5.3",
+    "css-loader": "^0.28.11",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
-    "friendly-errors-webpack-plugin": "^1.6.1",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^2.30.1",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
-    "portfinder": "^1.0.13",
+    "portfinder": "^1.0.17",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
-    "postcss-url": "^7.2.1",
+    "postcss-loader": "^2.1.6",
+    "postcss-url": "^7.3.2",
     "rimraf": "^2.6.0",
-    "semver": "^5.3.0",
+    "semver": "^5.6.0",
     "shelljs": "^0.7.6",
-    "uglifyjs-webpack-plugin": "^1.1.1",
+    "uglifyjs-webpack-plugin": "^1.3.0",
     "url-loader": "^0.5.8",
-    "vue-loader": "^13.3.0",
+    "vue-loader": "^13.7.3",
     "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
+    "vue-template-compiler": "^2.5.17",
+    "webpack": "^3.12.0",
+    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-dev-server": "^2.11.3",
+    "webpack-merge": "^4.1.4"
   },
   "engines": {
     "node": ">= 6.0.0",

package/examples/vue-cli/src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <main class="w-100 min-vh-100 bg-gray8 white sans-serif pa6 flex flex-column justify-center items-center">
       <div class="mw8 center overflow-hidden">
-        <h2 class="tc ttu tracked3 b f2 mt0 mb2 teal0 o-30">react-fontawesome</h2>
+        <h2 class="tc ttu tracked3 b f2 mt0 mb2 teal0 o-30">vue-fontawesome</h2>
 
         <ul class="list ma0 pa0 flex flex-row flex-wrap teal4">
           <li class="pv3 ph2 ma0 link grow">