2

我有一些 Svg 文件，我想将它们作为 Remix 运行应用程序中的反应组件加载。例如在create-react-app你可以做这样的事情


import { ReactComponent as Logo } from './logo.svg';
function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

remix-run 中是否有类似的方法可以达到相同的效果？

4

1 回答 1

0

不幸的是，目前无法像在创建反应应用程序中那样直接在组件文件中导入 SVG 文件。

并且维护人员目前不允许通过插件操作 esbuild 配置来添加类似的功能（参见此合并请求中的讨论）。

如果你不需要为你的 SVG 设置样式，你可以简单地将它放在public/文件夹中，并在你的组件中包含一个img元素。

更小的 JS 包、更快的页面水合速度和网络上的不可变 .svg，这些文件只下载一次。（参见此消息）

function App() {
  return (
    <div>
      <img src="/logo.svg" alt="My logo" />
    </div>
  );
}

您也可以自己创建一个 JSX 组件并将 SVG 代码放入其中（对 prop 名称进行一些手动转换），甚至将 SVG 文件放在一个文件夹中，并使用SVGR等外部自动转换工具生成优化的 JSX 组件它使用一个简单的 CLI 命令。

在这种情况下，您有一个可以像任何其他组件一样导入的组件：

import Logo from './Logo.svg';
function App() {
  return (
    <div>
      <Logo />
    </div>
  );
}
于 2022-02-07T14:19:47.497 回答