Neighborly Package Megalodon

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Latest Stable Version License

    Font Awesome Autoload

    This will search your views and find all Font Awesome Icons you are using and generate an autoload file that you can require in your project. This will help with treeshaking when you are using the Font Awesome Javascript API to manually configure Font Awesome and set up, but you still include your icons in your views directly using <i> tags.

    Without an autoload file it is impossible for Font Awesome to properly do tree shaking.

    Supported Versions

    This is made for Font Awesome 6 and has no intentional support for earlier versions.


    using npm

    npm install @devlop-ab/fontawesome-autoload-webpack-plugin


    Configure the plugin in your webpack.config.js.

    const FontAwesomeAutoloadWebpackPlugin = require('@devlop-ab/fontawesome-autoload-webpack-plugin');
    module.exports = {
        plugins: [
            new FontAwesomeAutoloadWebpackPlugin({
                // (REQUIRED) the paths to search 
                paths: [
                    path.resolve(__dirname, 'resources/views/**/*.blade.php'),
                // (OPTIONAL) 
                // the path where the autoload file will be saved
                // default is node_modules/.cache/fontawesome-autoload/index.js
                outputPath: path.resolve(__dirname, './node_modules/.cache/fontawesome-autoload/index.js'),
                // (OPTIONAL) specify icons to always include in the autoload, must be the fa6 "long prefix" followed by the icon name
                include: [
                    // 'fa-brands fa-font-awesome',
                    // 'fa-solid fa-elephant',
                    // 'fa-regular fa-1','
                    // 'fa-light fa-3','
                    // 'fa-thin fa-3','
                    // 'fa-duotone fa-7','
                // (OPTIONAL)
                // if you want to modify the search logic you can pass your own extractor callback
                // the callback will receive two arguments, file contents and the default extractor
                // and should return an array of found icons, each being an object with prefix and name.
                // optionally you can merge your extractor results with the default extractor results.
                extractor: function (contents, defaultExtractor) {
                    // psuedo code example:
                    let icons = [];
                    // search the contents ...
                    // add the icons you find
                        prefix: 'fa-solid',
                        name: 'fa-rabbit'
                    // return the icons
                    return icons;
                    // optionally also apply the findings from the defaultExtractor
                    return [...icons, ...defaultExtractor(contents)];
                // (OPTIONAL) the packages you are using, expects only the package name excluding vendor prefix
                packages: [
                    // this is the defaults if not configured
                    // 'free-brands-svg-icons',
                    // 'pro-duotone-svg-icons',
                    // 'pro-light-svg-icons',
                    // 'pro-regular-svg-icons',
                    // 'pro-solid-svg-icons',
                    // 'pro-thin-svg-icons',

    Require the generated file in your javascript where you configure Font Awesome.

    import { library, dom } from '@fortawesome/fontawesome-svg-core';
    import icons from '.cache/fontawesome-autoload'; // must match the outputPath




    npm i @devlop-ab/fontawesome-autoload-webpack-plugin

    DownloadsWeekly Downloads






    Unpacked Size

    22.3 kB

    Total Files


    Last publish


    • johanrosenson