如何在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>
  );
}

Answer 1

创建React App使用webpack将svg文件转换为React组件。如果您将原因与CRA结合使用，那么您要做的就是提供对所生成组件的绑定：

module Logo = {
  [@bs.module "./logo.svg"] [@react.component]
  external make: (~title: string=?) => React.element = "ReactComponent";
};

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

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