Font Awesome component for Vuepress

This plugin allows you to use Font Awesome icons in Vuepress markdown file directly.

Support regular and solid icons ONLY

---

How to Use

Each icon's used as a Vuepress component, so you just need to input a directive start with Fa- then follow the Capitalised font awesome icon class name, for example:

<!-- Insert a address book icon, red colour, 3x large size -->
<Fa-AddressBook color="red" size="3x" />

---

Install

• Step 1: Install dependency

yarn add vuepress-plugin-font-awesome

• Step 2: Create a shortcut script, please add following codes in your package.json file

  "scripts": {
    "fa:build": "node node_modules/vuepress-plugin-font-awesome/index.js"
  }

---

Generate Font Awesome components

Generate all font awesome icon components

Simply run following command:

yarn fa:build

If in your project, you root folder is in other place, for example: 'docs', then pass the dest option:

yarn fa:build --dest=docs

The plugin will put the font awesome components in right place, which is .vuepress/components/Fa.

Generate specified icons only

By default, there are 152 regular and 957 solid icon components will be generated, which is a huge amount. Instead of pack them all, you might want to only generate some specified icons based on your demand. To do so, simply put them in the .vuepress/config.js file as below:

module.exports = {
    title: 'Hello VuePress',
    description: 'Just playing around',

    // Please append following lines into your config.js
    thirdPartyComponents: {
        fontAwesomeIcons:{
            regular:['address-card','file-audio'],  // Regular font awesome icon keys here
            solid:['battery-quarter']               // Solid font awesome icon keys here
        }
    }
  }

If you don't know what icon's key you could use, please refer the following:

• Font Awesome Regular icons
• Font Awesome Solid icons

The command is exactly same as above:

yarn fa:build

OR

yarn fa:build --dest=$YOUR_DOCS

---

Use Font Awesome in your markdown

In any of your markdown file, simply add:

<Fa-AddressBook />

Add props to icon:

<Fa-AddressBook color="red" size="3x" />

Here below are props you could pass:

• color: String, Color Hex Code
• size: String, Font Awesome size class: 'lg', 'xs', 'sm', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'
• pull: String, left/right
• rotation: [String, Number], degrees such as 90/180/270
• flip: String, such as 'horizontal', 'vertical', 'both'
• spin: true/false
• pulse: true/false
• border: true/false

---

Change Log

• v1.0.2: 23/Jul/2019

  • add specified icons generation feature
  • add regular and solid icons key list file

• v1.0.1: 22/Jul/2019

  • Support all props to pass to the component