Как отрендерить значок пользовательского интерфейса материала в React?
Я новичок в React и хочу отобразить значок пользовательского интерфейса материала (из https://www.npmjs.com/package/@material-ui/icons) в существующем компоненте.
Я заметил, что этот человек, который ранее работал над компонентом, включил значки с атрибутом, например:
<FieldWrapper scrollToOnFocus icon = {<SomeMaterialIcon />}>
Но мне нужно добавить свой значок, например, в какой-то существующий html, например:
<a href = "/somewhere">Read more ICON HERE</a>
Я не знаю, как это сделать. Добавление {<SomeMaterialIcon />} или <SomeMaterialIcon /> непосредственно в строку HTML нарушает работу компонента.
Кто-нибудь знает, как это сделать?
Возможный дубликат Как использовать значки Material UI в React?
Ответы 1
Предполагая, что вы уже установили пакет (@ material-ui / icons) и правильно импортировали значок, он должен быть таким же простым, как <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);
Как именно ломается компонент? Не могли бы вы предоставить контекст - так что еще немного кода?