How to Use SVG with React and ReasonML?

Question

With create-react-app and JavaScript/TypeScript, I understand I'm able to "import" an SVG as noted below. How may I do so with ReasonML?

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

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

Answer 1

Create React App uses webpack to transform SVG files into React components. If you’re using Reason with CRA, then all you need to do is provide a binding to the generated component. However, CRA will only transform the SVG into a component if the import statement is written exactly a certain way, which isn't how BuckleScript outputs import statements. (There's a GitHub issue about it here.) You have to import it with raw JavaScript and then bind to the imported value:

%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:

The imported SVG React Component accepts a title prop along with other props that a svg element accepts.

For any of the other props you want to use, you'll have to add them to your external binding.

If you're not using CRA, then you'll need to configure your bundler to do the same transformation. I'm not familiar with the internals of CRA, but this seems to be the relevant code from its webpack configuration.