@adambh/vue-fontawesome-autogen

Automates the importing of used fontawesome icons.

Usage no npm install needed!

<script type="module">
  import adambhVueFontawesomeAutogen from 'https://cdn.skypack.dev/@adambh/vue-fontawesome-autogen';
</script>

README

vue-fontawesome-autogen

This script is created to make managing imported fontawesome icons in VueJS uncumbersome. It implements simple parsing techniques that would generate a file that imports all of your used icons without having to manage them every single time.

Installation

$ npm install --save-dev @adambh/vue-fontawesome-autogen

Requirements

Setting up

Add these definitions to your entry point such your "main.js" file

// Import autogenerated fontawesome imports
import "@/plugins/fontawesome-autogen.js";

// Import shim component for fontawesome
import Fa from "@adambh/vue-fontawesome-autogen/Fa.vue";
Vue.component("fa", Fa);

Usage

The usage is almost identical to how you would noramlly use with vue-fontawesome but instead, it alleviates the headache of having to deal with the arrays drama when wanting to use a different icon type, such as:

<font-awesome-icon :icon="['far', 'video']" />

instead, you would just have write the following, which is much more practical:

<fa icon="far-video" />

Examples

Basic usage:

<fa icon="far-video" />

There's also support for duotone's primary and secondary color attributes, in example:

<fa icon="fad-video" primaryColor="red" secondaryColor="white" /> 

You can also use the advanced attributes, as you would normally with vue-fontawesome, in example:

<fa icon="fas-check" transform="shrink-6" :style="{ color: 'white' }" />

Generating icon imports

There's basically two ways to do this, either manually or automatically.

Manually

Executing the following npm command would run the script:

$ npm explore @adambh/vue-fontawesome-autogen -- npm run gen

And you should see the success output message such as:

- Fontawesome treeshaking list generated. (took 10 ms)

Automatically upon build-time

This is achieved by hooking into webhook's events, so an additonal library is required, in our case, we'll be using before-build-webpack

$ npm install --save-dev before-build-webpack

Configuring webpack, via vue.config.js or alternative, you can check the example provided.

var WebpackBeforeBuildPlugin = require('before-build-webpack');
// ...
  module: {
    plugins: [
        new WebpackBeforeBuildPlugin(function(stats, callback) {
            const {execSync} = require('child_process');
            console.log(execSync('npm explore @adambh/vue-fontawesome-autogen -- npm run gen').toString());
            callback();
        }, ['run'])
    ]
  },
// ...

then build the project as you normally would

$ npm run build

The output of build should include the following line

- Fontawesome treeshaking list generated. (took 10 ms)

If you're confused, you can check the example project above.