reactjs Vite，Elastic UI：无法为EuiIcon动态导入图标

rn0zuynd 于 2023-10-17 发布在 React

关注(0)|答案(1)|浏览(105)

https://github.com/rorymcd98/spot-the-image-gen
这是我的回收物要安装，只需执行以下操作：
Yarn安装器
Yarn发展
我遇到的问题是在./src/components/Counters.tsx中使用Elastic UI的EuiIcon。我正在尝试导入shard和bullseye类型的图标。
问题：正如您所看到的，在当前版本中，它们未进行渲染。在dev服务器中，我得到一个错误：
caught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:5174/node_modules/.vite/deps/assets/bullseye?import
我已经尝试了很多东西，但根据文档，我不能告诉我哪里出错了。我尝试为每个文件创建一个public/assets/{name}.svg文件，但这似乎不起作用。
有人能简单地看看我的回购，看看我错在哪里吗？谢谢.

reactjs

来源：https://stackoverflow.com/questions/76202223/vite-elastic-ui-failing-to-dynamically-import-icons-for-euiicon

1条答案

按热度按时间

idfiyjo81#

我对此做了一些快速的研究。在wiki中找到了解决方案。
只需导入图标并将其传递给函数appendIconComponentCache即可。

import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon';

import { icon as EuiIconArrowDown } from '@elastic/eui/es/components/icon/assets/arrow_down';
import { icon as EuiIconArrowLeft } from '@elastic/eui/es/components/icon/assets/arrow_left';

// One or more icons are passed in as an object of iconKey (string): IconComponent
appendIconComponentCache({
  arrowDown: EuiIconArrowDown,
  arrowLeft: EuiIconArrowLeft,
});

https://github.com/elastic/eui/tree/main/wiki/consuming-eui#failing-icon-imports

赞(0）回复(0）举报 2023-10-17

我来回答

reactjs Vite，Elastic UI：无法为EuiIcon动态导入图标

1条答案

相关问题

热门标签

最新问答