如何在Remix.js中实现FontAwesome/Remix Icons动态加载？

不需要依赖Babel，Remix原生支持ES模块的import()动态导入语法，下面分别给出FontAwesome和Remix Icons的实现方案，以及通用图标组件的写法。

一、FontAwesome 动态导入方案 #

1. 安装依赖 #

npm install @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons
# 若需品牌/常规样式图标，额外安装对应包
npm install @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons

2. 通用FontAwesome图标组件 #

创建components/FAIcon.jsx：

import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export default function FAIcon({ name, prefix = 'solid', ...props }) {
  const [icon, setIcon] = useState(null);

  useEffect(() => {
    const loadIcon = async () => {
      try {
        // 格式化图标名：首字母大写，如 "home" → "FaHome"
        const formattedName = name.charAt(0).toUpperCase() + name.slice(1);
        // 根据前缀匹配对应图标包路径
        const basePath = prefix === 'solid' 
          ? '@fortawesome/free-solid-svg-icons/fa'
          : prefix === 'brands'
          ? '@fortawesome/free-brands-svg-icons/fa'
          : '@fortawesome/free-regular-svg-icons/fa';
        
        const iconModule = await import(`${basePath}${formattedName}.js`);
        setIcon(iconModule.default);
      } catch (err) {
        console.error(`无法加载FontAwesome图标: ${name}`, err);
      }
    };

    if (name) loadIcon();
  }, [name, prefix]);

  // 加载中可返回占位符
  if (!icon) return <span className="icon-placeholder"></span>;

  return <FontAwesomeIcon icon={icon} {...props} />;
}

使用方式 #

// 加载实心样式Home图标
<FAIcon name="home" size="lg" />
// 加载品牌样式GitHub图标
<FAIcon name="github" prefix="brands" color="#333" />

二、Remix Icons 动态导入方案 #

1. 安装依赖 #

npm install remix-icons

2. 通用Remix Icons图标组件 #

创建components/RemixIcon.jsx：

import { useEffect, useState } from 'react';

export default function RemixIcon({ category = 'ri', name, ...props }) {
  const [IconComponent, setIconComponent] = useState(null);

  useEffect(() => {
    const loadIcon = async () => {
      try {
        // Remix Icons路径格式：remix-icons/${category}/${name}
        // 例：category="ri"，name="HomeFill" → remix-icons/ri/HomeFill
        const iconModule = await import(`remix-icons/${category}/${name}.js`);
        setIconComponent(iconModule.default);
      } catch (err) {
        console.error(`无法加载Remix图标: ${category}/${name}`, err);
      }
    };

    if (category && name) loadIcon();
  }, [category, name]);

  if (!IconComponent) return <span className="icon-placeholder"></span>;

  return <IconComponent {...props} />;
}

使用方式 #

// 加载填充样式Home图标
<RemixIcon name="HomeFill" size={24} />
// 加载线性样式Search图标
<RemixIcon name="SearchLine" size={20} color="#666" />

三、注意事项 #

• SSR与加载状态：动态导入的图标在服务端渲染时不会预加载，首次客户端渲染会有短暂延迟，可通过React.Suspense包裹组件添加加载提示：

  <Suspense fallback={<span className="icon-loading">加载中...</span>}>
    <FAIcon name="home" />
  </Suspense>
  

• 常用图标预加载：高频使用的图标可在根路由/布局组件中提前导入，避免重复加载：

  // 在routes/_layout.jsx中预加载
  import { faHome } from '@fortawesome/free-solid-svg-icons';
  

• 图标名称准确性：必须严格匹配官方图标名称（注意大小写、后缀，如Remix Icons的HomeFill/HomeLine），否则会加载失败。

内容的提问来源于stack exchange，提问作者Humberto de Angeli Neto