Neighborly Package Megalodon

    @devlop-ab/fontawesome-autoload-webpack-plugin
    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 dom.watch, 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.

    Installing

    using npm

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

    Usage

    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
                    icons.push({
                        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
    
    library.add(...icons);
    dom.watch();

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    22.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • johanrosenson