Как мне изменить размеры значков материалов Google в React? - PullRequest
Новая
       54

Как мне изменить размеры значков материалов Google в React?

0 голосов
/ 04 ноября 2019

Я пытаюсь использовать Google Material Icons в своем приложении React, и у меня возникают проблемы с их изменением. Я импортирую их как компоненты React, используя @material-ui/icons.

import { ArrowForward as IconArrowRight } from '@material-ui/icons';

Это мои стили, которые предназначены для переопределения по умолчанию SvgIcon styles: 

svg {
  display: inline-block;
  width: auto;
  height: 40px;
}

По какой-то причине между моим SVG и путем есть пробел, который я хотел бы удалить, но я не знаю, почему он вообще существует. Как я могу удалить это место?

enter image description here

Ответы [ 2 ]

1 голос
/ 04 ноября 2019

Вы должны использовать Icon. Для демонстрационного использования, пожалуйста, смотрите здесь . Эти свойства также применяются к иконкам, импортированным из @material-ui/icons.

. Вы можете использовать его с fontSize или путем изменения стилей / классов. Поэтому вам следует взглянуть на реализацию Icon.

0 голосов
/ 05 ноября 2019

После проверки фактических SVG я узнал, что там есть дополнительное пространство, потому что все SVG имеют одинаковый квадратный путь. Определение размера SVG приведет к изменению размера квадратного контура и не обязательно формы внутри него (в моем случае X). 

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
</svg>

Квадрат без заливки, поэтому вы не можете его видеть, но он есть(<path d="M0 0h24v24H0z" fill="none"/>).

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

...