Reactjs иконки материалов в css - PullRequest
Новая
       21

Reactjs иконки материалов в css

0 голосов
/ 05 августа 2020

У меня установлен следующий пакет значков материалов: 

@material-ui/icons@4.9.1

Мне нужно установить значение 'content' для одного из классов в моем CSS файле на стрелку вниз. Как мне это сделать?

1 Ответ

0 голосов
/ 05 августа 2020

Значки пользовательского интерфейса материалов из @material-ui/icons@4.9.1 экспортируются как компоненты React, поэтому вы не можете использовать их в CSS.

Но у вас есть несколько вариантов.

  1. Включить шрифт значков материалов и используйте его. Подробнее здесь и здесь

Проверьте codepen

После включения шрифта на своей странице вы можете использовать его в CSS вот так 

p::after, 
div::after {
  content: "face";
  color: blue;
}
Но мне не нравится импортировать весь файл шрифтов только для того, чтобы иметь один значок. Вот что я делал раньше.

Получить svg значка. Проверьте значок на странице значков пользовательского интерфейса материала, получите код svg и создайте новый файл svg с скопированным html и поместите его в свой проект.

введите описание изображения здесь

После того, как у вас есть файл svg, в вашем CSS используйте его следующим образом 

.download:before {
  display: block;
  content: ' ';
  background-image: url('path-to-svg-folder/download.svg');
  background-size: 24px 24px;
  height: 24px;
  width: 24px;
}

NB: если вы не хотите иметь файл svg, вы можете использовать данные url и включите весь svg в свой CSS файл.

...