導入動態反應圖標

Question

我需要動態導入一個圖標，道具將在組件中接收並返回與此兼容的圖標，我對此有疑問：

import { useEffect, useState } from 'react';

export default function Icon({ libraryName, iconName }) {
  const [icon, setIcon] = useState(null);

  async function getIcon() {
    const path = `../../../node_modules/react-icons/${libraryName}`;
    const returnedIcon = await import(path);
    if (returnedIcon) setIcon(returnedIcon[iconName]);
  }

  useEffect(() => {
    if (iconName) {
      getIcon();
    } else {
      setIcon(null);
    }
  }, []);

  return <span>{icon}</span>;
}

所以，如果你用這個來調用這個組件

<Icon libraryName="md" iconName="mdMonitor" />

這個作品！

但是，也許 const 路徑可以用另一條路徑更改？

我認為存在更好的方法來做到這一點，如果有人可以幫助我，我將不勝感激。

Answer 1

您不應該從組件中引用node_modules 。 您最終的生產構建將無法訪問該目錄，因為捆綁器（如 webpack）會將您所有的各種代碼和庫文件 package 合並到一個 JS 文件中。

如果您使用的是圖標庫，則應該像導入任何其他 JS 模塊一樣導入圖標，並根據需要使用它們。

如果您需要來自多個圖標庫的圖標，則需要npm install這兩個庫，然后在您的 UI 代碼中從每個庫中導入您需要的圖標。

也許您需要一個圖標包裝器：

import React from 'react';

export default function IconWrapper({icon}) {

  return <span>{icon}</span>;
}

您的 UI 代碼可能如下所示：

import React from 'react';
import {PlusIcon} from 'icon-lib-A';
import {MinusIcon} from 'icon-lib-B';

export default function App() {
  return (
    <div>
      <Icon icon={<PlusIcon} />
      <Icon icon={<MinusIcon} />
    </div>
  )
}