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';


fontawesome-autogen npm

As per demand from the Vue community using vue-fontawesome, this script was written 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.


  • Automatically imports treeshaken fontawesome icons.
  • Automatically extracts custom component name (VueJS).
  • Compatible with vue-fontawesome.
  • Compatible with react-fontawesome.
  • Compatible with npm run serve.




$ yarn add -D @adambh/vue-fontawesome-autogen


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

Setting up

Make sure to have imported the fontawesome library and registered the component as per https://github.com/FortAwesome/vue-fontawesome#usage or alternative for react.

Then add this definition to your entry point such as your "main.js" file


import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
Vue.component("font-awesome-icon", FontAwesomeIcon);

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


import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

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



Nothing needs changing, even if your registered vue component name is different, it will be parsed.

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


<FontAwesomeIcon icon="video" />
<FontAwesomeIcon icon={["fas", "video"]} />


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

Note: This tool will prioritize the pro versions of the installed svg icons set, so if for instance you have both free-solid-svg-icons and pro-solid-svg-icons, then the tool will use the pro one, otherwise the free one.


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());
        }, ['run', 'watchRun'])
// ...

then build the project as you normally would


$ yarn build


$ npm run build

The output of build should include the following line

- Fontawesome treeshaking list generated. (took 10 ms)


Once the script has finished executing, it should produce a file at src/plugins/fontawesome-autogen.js which its content would look like the following:

// Auto generated @ Thu Oct 22 2020 19:45:52 GMT+0300 (Eastern European Summer Time)

import {
  faCircle as fasCircle,
  faAngleDown as fasAngleDown,
  faBars as fasBars,
} from "@fortawesome/pro-solid-svg-icons";

import {
  faSignOutAlt as farSignOutAlt,
  faComments as farComments,
} from "@fortawesome/pro-regular-svg-icons";

import { library } from "@fortawesome/fontawesome-svg-core";
library.add(fasCircle, fasAngleDown, farSignOutAlt, fasBars, farComments);

Optional customized syntax (VueJS)

If you want a vanilla fontawesome syntax approach, like:

<fa icon="far-video" />

// support forduotone's primary and secondary color attributes
<fa icon="fad-video" primaryColor="red" secondaryColor="white" /> 

// support for advanced attributes
<fa icon="far-check" transform="shrink-6" :style="{ color: 'white' }" /> 

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

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

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