Как использовать иконки в Material-UI v.1.3?

Я запутался в том, как использовать иконки в текущей версии Material-UI.

Согласно материалам-документам по иконкам, под SVG Material icons:

Мы предоставляем отдельный пакет NPM, @ material-ui / icons, который включает более 1000 официальных значков материалов, преобразованных в SvgIcon компоненты.

(...)

Вы можете использовать material.io/tools/icons, чтобы найти конкретную иконку. При импорте значка имейте в виду, что имена иконок - это PascalCase, например:

  • delete выставляется как @material-ui/icons/Delete
  • delete forever выставляется как @material-ui/icons/DeleteForever

Пример, который они показывают:

// Import icon
import DeleteIcon from '@material-ui/icons/Delete';

// ...

// Use icon in react somewhere
render() { return (
    <DeleteIcon />
)}

Это работает для многих иконок, но не для file_copy-icon.

Тем не менее, я могу заставить его работать с:

<i className="material-icons">file_copy</i>

Каков ожидаемый подход, чтобы сделать эту работу?

У меня есть, с npm install --save, установлены @material-ui/icons а также material-design-icons, (Изначально только первый, но после того, как все иконки не заработали, я тоже попробовал второй)

Я также включил <link />-метки из материала-UI руководство по установке

Тем не менее, я импортирую с import FileCopy from '@material-ui/icons/FileCopy';

Источник

2 ответа

Решение

Это довольно просто, как только вы установили значок:

import IconName from '@material-ui/icons/{icon-name-here}';

<IconName/>

Как вы, возможно, заметили, внутри @material-ui/icons однако, если вы перейдете к файлам svg в material.io, вы можете выбрать загрузку значка svg, который вы обычно можете использовать в том же соглашении, или вы можете делать то же, что и в пакете Material Icons, используя SvgIcon и вставив код SVG, взятый из material.io Веб-сайт.

<SvgIcon>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <circle cx="17" cy="4.54" r="2"/>
    <path d="M14 17h-2c0 1.65-1.35 3-3 3s-3-1.35-3-3 1.35-3 3-3v-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5zm3-3.5h-1.86l1.67-3.67C17.42 8.5 16.44 7 14.96 7h-5.2c-.81 0-1.54.47-1.87 1.2L7.22 10l1.92.53L9.79 9H12l-1.83 4.1c-.6 1.33.39 2.9 1.85 2.9H17v5h2v-5.5c0-1.1-.9-2-2-2z"/>
    <path fill="none" d="M0 0h24v24H0z"/>
</svg>
</SvgIcon>

Затем его можно экспортировать как компонент, чтобы его можно было использовать повторно. Вышеуказанное будет работать для вашей копии Icon, которую вы хотите использовать.

Источник

Вы можете обнаружить material-ui имена значков при просмотре node_modules/@material-ui/icons: иногда они немного отличаются от тех, что на сайте дизайна материалов Google!

В этом случае значок file_copy с сайта Google называется "ContentCopy" в material-ui:

 import ContentCopy from '@material-ui/icons/ContentCopy';
Источник
Другие вопросы по тегам