如何在React和ReasonML中使用SVG？

Question

使用 create-react-app 和 JavaScript / TypeScript，我知道我可以像下面所示一样“导入”SVG。如何在ReasonML中做到这一点？

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

- Ari

Answer 1

Create React App使用webpack将SVG文件转换为React组件。如果您正在使用CRA进行Reason开发，则只需提供生成的组件的绑定即可。但是，CRA只会在导入语句以特定方式编写时将SVG转换为组件，而这不是BuckleScript输出导入语句的方式。(这里有一个GitHub问题。) 您必须使用原始JavaScript导入它，然后绑定到导入的值：

%bs.raw
{|import {ReactComponent as _Logo} from "./logo.svg"|};

module Logo = {
  [@react.component] [@bs.val] external make: unit => React.element = "_Logo";
};

/* And we can use it like a regular component: */
[@react.component]
let make = () =>
  <div>
    <Logo />
  </div>;

根据加拿大税务局的文件:

导入的SVG React组件接受一个title prop，以及其他svg元素接受的props。

对于您想要使用的任何其他props，您都需要将它们添加到您的external绑定中。

如果您没有使用CRA，则需要配置您的打包工具来进行相同的转换。我不熟悉CRA的内部机制，但是这似乎是其webpack配置中相关的代码。

- user11305879

Answer 2

我们可以使用SVGR来处理webpack加载，然后像通常一样导入模块。

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      //...
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  //...
};

module Logo = {
  @bs.module(`../../../../src/img/logo.svg`) @react.component
  external make: {.} => React.element = "default"
}

... 

<Logo /> // works

来源：https://blog.logrocket.com/how-to-use-svgs-in-react/

- Raphael Rafatpanah

Answer 3

我是另一种不涉及webpack的解决方案的作者。 这是一个工具，可以直接将您的svg文件转换为.re文件: https://github.com/MoOx/react-from-svg 这可以为react（dom）或react-native(-web)创建文件（=>生成的文件使用react-native-svg）。 随意尝试它 :) 例如，您可以执行以下操作（当从npm安装该工具时）

$ react-from-svg src/SVGs src/SVGs/components --with-native-for-reason --remove-fill

这将把位于 svg/SVGs 的文件转换成 Reason 语法的 React 组件，并存储在 src/SVGs/components 中，以便在 React Native 中使用。

最后一个选项会移除所有 svg 填充属性，因此您可以将它们用作图标。

请注意，生成的组件接受 width、height 和 fill 属性，以便在使用时进行调整。

最后的奖励是，由于没有涉及 webpack，因此您只需更新 SVG 文件并直接通过 Node 运行时使用此代码（从 Reason 转换为 JS 时会删除 JSX，因此代码可以直接在 Node 中使用，无需任何转换——这对于微小的静态站点/页面非常方便）。

- MoOx