How to import svg file?


#1

Hi all
I tried to import svg as following .

[%%raw {|import '../styles/navbulk.css'|}];
[%%raw {|import logo from '../images/logo.svg'|}];


let component = ReasonReact.statelessComponent("NavBulkView");

let setSectionRef = (theRef, _) => {
  let d: option(Dom.element) = Js.Nullable.toOption(theRef);
  switch d {
    | None => Js.log("Nothing")
    | Some(a) =>
      Js.log(ElementRe.innerText(a));
  };
};

let make = (_children) => {
  ...component,
  render: _self => {
    <nav className="navbar fixed-top navbar-light nav-bulk">
        <a className="navbar-brand" href="#">
          <img src={logo} width="30" height="30" alt="" />
        </a>
    </nav>
  }
};

the problem is here <img src={logo} width="30" height="30" alt="" />. What do I have to write instead of {logo}?

Thanks


#2

With ReactJs I would use inline SVG and not even bother using the . You should be able to copy paste the SVG source (minus the tag at the start) into your component’s current markup. I haven’t actually tried this with ReactReason though.


#3

I created a component for SVG. It uses a variant and returns the SVG code.

type icons =
  | Arrow;

let parse = fun
  | "arrow" => Arrow

let getIcon = (~iconName, ~classList="") => {
  let icon = parse(iconName);
  switch (icon) {
  | Arrow =>
    <svg className={"o-icon arrow " ++ classList} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
      <path className="o-icon arrow-path" d="M6.101 261.899L25.9 281.698c4.686 4.686 12.284 4.686 16.971 0L198 126.568V468c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12V126.568l155.13 155.13c4.686 4.686 12.284 4.686 16.971 0l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L232.485 35.515c-4.686-4.686-12.284-4.686-16.971 0L6.101 244.929c-4.687 4.686-4.687 12.284 0 16.97z"/>
    </svg>

You can probably remove the parse and just use the variant directly. It works splendidless though


#4

Try it

[@bs.module "../images/logo.svg"]
external logo : string = "default";

Reason will transpile it approx. as:

var logo = require("../images/logo.svg");

and logo will be considered a string.


How can I require a image without using [%raw ]