Как использовать SVG-файл в SvgIcon в Material-UI

У меня есть файл SVG, и я хочу сделать из него компонент SvgIcon, как мне это сделать?

на документация, во всех примерах используются либо предопределенные значки материалов, либо странная нотация <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> что я понятия не имею, что это такое!

8
material-ui svg

3 ответов

<path /> - Это путь SVG, т. е. внутренние биты SVG. the SvgIcon компонент действительно должен иметь возможность принимать путь, но это не так: (

вы можете создать компонент, как https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js

С вашим источником svg вместо path. (Я рекомендую уменьшить его немного, используя https://jakearchibald.github.io/svgomg/)

6

Если вы создадите более одного значка, вы можете не захотеть повторять весь шаблон в Примере, указанном в принятом ответе. Вы можете использовать генератор компонентов оболочки, например:

const wrapSvgPath = (path, viewBox='0 0 24 24') => (props) => (
    <SvgIcon {...props} viewBox={viewBox}>{path}</SvgIcon>
)

Как использовать:

const facebookPath = (<path
        d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
)
export const FacebookIcon = wrapSvgPath(facebookPath)
0

чтобы получить путь к SvgIcon, откройте файл svg в текстовом редакторе и скопируйте соответствующее выражение пути.

0