Блог

Главная - Вопросы по программированию - SvgIcon, наследующий viewBox

SvgIcon, наследующий viewBox

#css #reactjs #material-ui

#css #reactjs #материал-пользовательский интерфейс

Вопрос:

У меня разные пользовательские SVG. У каждого из этих SVG есть собственное viewBox.

Первый Svg

 <svg viewBox="-4 -4 24 24"><path something/></svg>

Второй Svg

 <svg viewBox="-5 -7 24 24"><path something/></svg>

Третий Svg

 <svg viewBox="-2 -1 24 24"><path something/></svg>

И так далее…

Я использую компонент пользовательского интерфейса Material : SvgIcon .

 <SvgIcon
  component={component} // This is my custom SVG
/>

Имеет представление по SvgIcon умолчанию '0 0 24 24' , и это то, что «установлено» для каждого SVG. Я хочу, чтобы он наследовал от component .

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

 <SvgIcon
  component={component}
  viewBox="my values" // Example "0 0 20 20"
/>

но viewBox это зависит от разных SVG

Комментарии:

1. Можете ли вы переопределить свои пользовательские svgs как необработанный JS-объект со строковым путем и строковым viewBox? Как они определяются сейчас?

2. Именно так я это и сделал, но в идеале я хочу использовать < SvgIcon /> . Причина этого в том, что я использую сочетание пользовательских SVG и SVG Material UI. Проблема есть только у пользовательского viewBox

Ответ №1:

Одно из решений, которое я нашел, — предоставить компоненту MUI такое же совпадающее viewBox из вашего исходного файла svg SvgIcon . В противном случае SvgIcon MUI будет использовать значение по умолчанию 0 0 24 24 (определенное здесь ), которое может не совпадать с вашим svg.

Пример:

Исходный svg-файл может выглядеть следующим образом, определяя его собственное viewBox:

 <svg width="12" height="12" viewBox="0 0 12 12">
    <path d="..."/>
</svg>

Используйте свой пользовательский svg-файл с MUI SvgIcon :

 import MyCustomIcon from '../assets/MyCustomIcon.svg';

// ...

<SvgIcon
  component={MyCustomIcon}
  viewBox="0 0 12 12"
/>

Вы можете видеть, что поле просмотра, используемое в SvgIcon , совпадает с полем просмотра из исходного файла svg.

Я надеюсь, что это поможет.