问题描述 #

我尝试在React组件中引入Feather Icons，但图标无法正常显示。我的组件代码如下：

const SomeComponent = () => { 
  <div> 
    <script src="https://unpkg.com/feather-icons/dist/feather.min.js"> </script> 
    <script> feather.replace() </script> 
    <i data-feather="home"></i> 
  </div> 
}

请问可能是什么原因导致的？

问题根源 #

嘿，这个坑我踩过！React的JSX渲染逻辑和普通HTML完全不一样，你这么写肯定不行：

• JSX里的<script>标签不会被执行：React在渲染JSX时，会忽略直接写在组件里的<script>标签（安全机制），所以你的Feather脚本根本没加载进来。
• 时机不对：就算脚本能加载，feather.replace()也会在组件DOM还没渲染完成时就执行，这时候<i data-feather="home"></i>还没出现在页面上，自然没法替换成图标。

正确的解决方法 #

给你两种靠谱的实现方式，按需选：

方案1：用官方React封装库（最推荐） #

Feather专门做了React适配包，完全符合React的开发方式，用起来超省心：

1. 先安装依赖：

npm install react-feather
# 或者用yarn
yarn add react-feather

2. 在组件里直接导入使用：

import { Home } from 'react-feather';

const SomeComponent = () => {
  return (
    <div>
      {/* 直接用组件，还能通过props改样式 */}
      <Home size={24} color="#333" />
    </div>
  );
};

这种方式不需要手动调用feather.replace()，组件会自动渲染SVG图标，还能灵活调整大小、颜色，比原生方式好用多了。

方案2：手动动态加载脚本（适合不想装包的场景） #

如果你不想额外装依赖，也可以用React的useEffect钩子来处理脚本加载和初始化：

import { useEffect } from 'react';

const SomeComponent = () => {
  useEffect(() => {
    // 动态创建脚本标签
    const featherScript = document.createElement('script');
    featherScript.src = 'https://unpkg.com/feather-icons/dist/feather.min.js';
    
    // 脚本加载完成后，再执行替换
    featherScript.onload = () => {
      window.feather.replace();
    };
    
    // 把脚本加到页面里
    document.body.appendChild(featherScript);

    // 组件卸载时清理脚本，避免内存泄漏
    return () => {
      document.body.removeChild(featherScript);
    };
  }, []); // 空数组确保只在组件挂载时执行一次

  return (
    <div>
      <i data-feather="home"></i>
    </div>
  );
};

这里用useEffect在组件挂载完成后再加载脚本，脚本加载好才调用feather.replace()，确保DOM元素已经存在，能正确替换图标。

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