3

使用create-react-appJavaScript/TypeScript，我知道我能够“导入”一个 SVG，如下所述。我如何使用 ReasonML 做到这一点？

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

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

3 回答 3

3

我们可以使用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/

于 2020-10-21T02:21:47.143 回答
3

Create React App 使用 webpack 将 SVG 文件转换为 React 组件。如果您将 Reason 与 CRA 一起使用，那么您需要做的就是提供与生成的组件的绑定。但是，如果 import 语句完全按照某种方式编写，CRA 只会将 SVG 转换为组件，这不是 BuckleScript 输出 import 语句的方式。（这里有一个关于它的 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>;

根据 CRA 文档：

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

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

如果您不使用 CRA，那么您需要配置您的捆绑器以执行相同的转换。我不熟悉 CRA 的内部结构，但这似乎是其 webpack 配置中的相关代码。

于 2020-03-25T16:11:09.320 回答
1

我是另一个不涉及 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/SVGsReact 组件转换src/SVGs/components为使用 Reason 语法与 React Native 兼容。最后一个选项删除所有 svg 填充道具，以便您可以将它们用作图标。

请注意，生成的组件接受width, height&fill道具，因此您可以在使用时对其进行调整。

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

于 2020-11-06T08:56:03.237 回答