Как мне отобразить значок пользовательского интерфейса материала в React?

Question

Я новичок в React и хочу визуализировать значок Material UI (из https://www.npmjs.com/package/@material-ui/icons) в существующем компоненте.

Я заметил, что люди, которые ранее работали над компонентом, включили значкис таким атрибутом, как:

<FieldWrapper scrollToOnFocus icon={<SomeMaterialIcon />}>

Но мне нужно добавить свой значок, как в некотором существующем HTML, например:

<a href="/somewhere">Read more ICON HERE</a>

Я не уверен, как это сделать. Добавление {<SomeMaterialIcon />} или <SomeMaterialIcon /> прямо в строку HTML разбивает компонент.

Кто-нибудь знает, как это сделать?

Answer 1

Если вы уже установили пакет (@ material-ui / icons) и правильно импортировали Icon, он должен быть таким же простым, как <SomeMaterialIcon />.

Пример:

import React from "react";
import ReactDOM from "react-dom";

import AddIcon from '@material-ui/icons/Add';

function App() {
  return (
    <div>
      <a href="/somewhere"><AddIcon /></a>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);