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
.
- Make sure your source code exists within the "src" folder of the project's main directory.
- Make sure you have installed react/vue-fontawesome dependencies, if not, for VueJS, please check https://github.com/FortAwesome/vue-fontawesome#installation
$ yarn add -D @adambh/vue-fontawesome-autogen
$ npm install --save-dev @adambh/vue-fontawesome-autogen
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)
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', 'watchRun'])
]
},
// ...
then build the project as you normally would
Yarn
$ yarn build
NPM
$ 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)
//fas
import {
faCircle as fasCircle,
faAngleDown as fasAngleDown,
faBars as fasBars,
} from "@fortawesome/pro-solid-svg-icons";
//far
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);
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