Vuepress-plugin-font-awesome NPM

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

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