Как использовать пользовательский SVG-файл с Material-UI Icon Component?

Question

В моем проекте я использую пользовательские svg файлы как часть требования. Я использую material-ui@3.9.3 для достижения этой цели. Я посмотрел на пример, который доступен в официальной документации -> https://material -ui.com / style / icons / # svg-icons

Однако в моей версии пользовательские значки выглядят не так. Моя разветвленная версия доступна на https://codesandbox.io/s/mqnq9qrqn8

То, что я ищу, - это способ использования пользовательских значков, которые могут хорошо работать с компонентом <Icon> Material-UI.

Может ли кто-нибудь помочь мне с этим? Спасибо

Answer 1

Ответ лежит в атрибуте viewBox (MDN)

Когда вы возитесь с SVG, особенно копируемыми / вставленными, вы должны отточить viewBox, чтобы правильно оформить ваши пути. Я обычно начинаю с <svg viewBox="0 0 100 100" /> и увеличиваю или уменьшаю по вкусу. * * * * * * * * * * * * * * * * * * * * * * * * * * * После некоторых "1006" выглядит довольно хорошо " (ссылка)" .

Глядя на документы MaterialUI (ссылка) , они планировали подобные вещи и разрешают это в качестве опоры для компонента.