vue-auto-fontawesome v1.1.2

vue-auto-fontawesome

Automatically build and maintain Font Awesome library imports. This project was inspired by GTANAdam, and is based on the rewrite by M1CK431.

Installation

With the manual method:

npm install --save-dev vue-auto-fontawesome

With the automated method:

npm install --save-dev vue-auto-fontawesome before-build-webpack

Requirements

• Your application source must exist within the src folder of the project's root directory.
• Make sure you have installed vue-fontawesome and it's dependencies.

Setup

In your main.js entry file:

// Import Font Awesome component
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Vue.component('fa', FontAwesomeIcon)

// Import the auto-generated libraries
import "@/plugins/fontawesome.js";

Usage

Use icons as described by vue-fontawesome. The only exception, is that you cannot use the shorthand that assumes a prefix of "fas".

Use icons like this:

<fa :icon="['fas', 'rocket']" />

Generating Icon Imports

There are two ways to use this package, either manually or automatically.

Note: Pro versions of Font Awesome will be prioritized if installed.

Manually

Execute the following npm command to build the Font Awesome icon libraries:

npm explore vue-auto-fontawesome -- npm run gen

You should see the success output message:

- Fontawesome treeshaking list generated. (took 10 ms)

Automatically

You can automatically have your icon libraries generated at build time, by hooking into webpack. This package relies on an additonal library, before-build-webpack, to simplify that process.

Configuring webpack via vue.config.js:

/*
 * Vue CLI - Configuration
 */
const WebpackBeforeBuildPlugin = require('before-build-webpack');

module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      new WebpackBeforeBuildPlugin(function(stats, callback) {
        const {execSync} = require('child_process');
        console.log(execSync('npm explore vue-auto-fontawesome -- npm run gen').toString());
        callback();
      }, ['run', 'watchRun'])
    ]
  },
  // ...
}

You can then build your project as you normally would:

npm run build

This will also automatically rebuild your icon libraries while in development mode:

npm run dev

Result

Once the script has finished executing, it should produce a file at src/plugins/fontawesome.js with your generated libraries that looks similar to:

// Auto generated by vue-auto-fontawesome

// fab
import {
  faShopify as fabShopify,
  faWindows as fabWindows,
} from "@fortawesome/free-brands-svg-icons";

// fad
import {
  faClock as fadClock,
  faRocket as fadRocket,
} from "@fortawesome/pro-duotone-svg-icons";

// fal
import {
  faCopy as falCopy,
  faKey as falKey,
} from "@fortawesome/pro-light-svg-icons";

import { library } from "@fortawesome/fontawesome-svg-core";
library.add(
  fabShopify,
  fabWindows,
  fadClock,
  fadRocket,
  falCopy,
  falKey,
);

Experimental Vite Plugin

If you are building a project using Vue 3 and Vite, I have included an experimental plugin vite-auto-fontawesome.js. If you'd like to try it out, manually copy it into the root of your project (rename it as you see fit). Then, include it in your vite config:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoFontAwesome from './vite-auto-fontawesome'

export default defineConfig({
  plugins: [
    vue(),
    autoFontAwesome(),
  ],
})