如何将 SVG 与 React 和 ReasonML 一起使用？答案

【问题标题】：How to Use SVG with React and ReasonML?如何将 SVG 与 React 和 ReasonML 一起使用？
【发布时间】：2020-11-06 16:56:03
【问题描述】：

使用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>
  );
}

【问题讨论】：

标签： reactjs reason rescript

【解决方案1】：

Create React App 使用 webpack 将 SVG 文件转换为 React 组件。如果您将 Reason 与 CRA 一起使用，那么您需要做的就是提供与生成的组件的绑定。但是，如果 import 语句完全以某种方式编写，CRA 只会将 SVG 转换为组件，这不是 BuckleScript 输出 import 语句的方式。 (There's a GitHub issue about it here.) 您必须使用原始 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>;

According to the CRA docs:

导入的 SVG React 组件接受 title 属性以及 svg 元素接受的其他属性。

对于您想要使用的任何其他道具，您必须将它们添加到您的 external 绑定中。

如果您不使用 CRA，那么您需要配置您的捆绑器以执行相同的转换。我对CRA的内部不熟悉，但是this seems to be the relevant code from its webpack configuration.

【讨论】：

【解决方案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/

【讨论】：

【解决方案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 转换为 React 组件到 src/SVGs/components 与 React Native 兼容并使用 Reason 语法。最后一个选项删除所有 svg 填充道具，以便您可以将它们用作图标。

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

最后的好处：由于不涉及 webpack，因此您只能在更新 SVG 文件并在 Node 运行时直接使用此代码时使用此转换（当转换为 JS 时，来自 Reason 的 JSX 会被删除，因此可以直接使用代码通过 Node 无需任何转换 - 这对于微小的静态站点/页面非常方便）。

【讨论】：