Webpack动态导入：如何同时导入Font Awesome同一图标全样式？

Nice question! I’ve dealt with this exact scenario before—manually importing every style variant of an icon gets tedious fast. Here’s how you can use Webpack’s built-in require.context to dynamically import all styles of a specific Font Awesome icon in one go:

Step-by-Step Solution #

Webpack’s require.context lets you create a context for dynamically loading modules that match a specific directory and file pattern. We’ll use this to target all faUser files across Font Awesome’s style packages (solid, regular, brands, etc.).

Full Code Example #

import fontawesome from '@fortawesome/fontawesome';

// Create a Webpack context to match all faUser icon files across style packages
const iconContext = require.context(
  '@fortawesome/fontawesome-free-', // Base path for all free style packages
  false, // Disable subdirectory search (icons are at package root)
  /faUser\.js$/ // Regex to match only the faUser.js files
);

// Iterate over all matched modules and add them to the Font Awesome library
iconContext.keys().forEach(iconPath => {
  const iconModule = iconContext(iconPath);
  // Add the default export (the icon object) to the library
  fontawesome.library.add(iconModule.default);
});

Key Explanations #

• require.context Parameters:
  1. The first argument targets the base prefix of Font Awesome’s style packages (fontawesome-free-), which works for solid, regular, and brands variants.
  2. Setting the second argument to false tells Webpack not to search subdirectories—since each icon file lives directly in the root of its style package.
  3. The regex /faUser\.js$/ ensures we only load the exact icon file we want; replace faUser with your target icon name (e.g., faStar) to adapt this for other icons.

Important Notes #

• Install Required Packages: Make sure you’ve installed all the Font Awesome style packages you want to include. For free variants, run:

  npm install @fortawesome/fontawesome @fortawesome/fontawesome-free-solid @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-brands
  

• Pro Version Adaptation: If you’re using Font Awesome Pro, change the base path to @fortawesome/fontawesome-pro- instead.
• Webpack Compatibility: require.context is a Webpack-specific feature, so this works with Webpack 2 and later (most modern projects use this).

Why This Works #

Instead of manually importing each variant (faUserSolid, faUserRegular, etc.), this approach automatically finds and loads every available style variant of the icon. It’s scalable—if you later add a new style package (like light for Pro), you won’t need to update your import code.

内容的提问来源于stack exchange，提问作者sunnyrjuneja