Как использовать SVG с React и ReasonML? - PullRequest
Новая
       23

Как использовать SVG с React и ReasonML?

0 голосов
/ 23 марта 2020

С 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>
  );
}

1 Ответ

2 голосов
/ 25 марта 2020

Create React App использует веб-пакет для преобразования файлов SVG в компоненты React. Если вы используете Reason с CRA, то все, что вам нужно сделать, это предоставить привязку к сгенерированному компоненту. Однако CRA преобразует SVG в компонент только в том случае, если оператор импорта написан точно определенным образом, а не BuckleScript выводит операторы импорта. ( Здесь есть проблема с 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 принимает реквизит title вместе с другими реквизитами, которые принимает элемент svg.

Для любого из другие реквизиты, которые вы хотите использовать, вам нужно будет добавить их в привязку external.

Если вы не используете CRA, то вам необходимо настроить свой упаковщик сделать то же самое преобразование. Я не знаком с внутренними компонентами CRA, но это, кажется, соответствующий код из его конфигурации веб-пакета.

...