Ich habe eine SVG-Datei und ich möchte eine SvgIcon-Komponente daraus machen, wie soll ich das machen?Wie verwende ich eine SVG-Datei in einem SvgIcon in Material-UI?
In der documentation, alle Beispiele verwenden entweder vordefinierte Material Icons oder eine seltsame Notation von <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />, die ich nicht weiß, was es ist!
<path /> ist ein SVG-Pfad, d. H. Die internen Bits des SVG. die SvgIcon Komponente sollte wirklich einen Weg nehmen können, aber es funktioniert :(nicht
stattdessen Sie eine Komponente wie https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js
mit svg Quelle anstelle des path erstellen können. (Ich kann es empfehlen minifying ein bisschen https://jakearchibald.github.io/svgomg/)
Wenn die mehr als ein Symbol verwenden, können Sie nicht alle Textvorschlag im Beispiel in der akzeptierte Antwort verwiesen wiederholen möchten Sie einen Wrapper Komponentengenerator wie verwenden können.
const wrapSvgPath = (path, viewBox='0 0 24 24') => (props) => (
<SvgIcon {...props} viewBox={viewBox}>{path}</SvgIcon>
)
verwendet wie:
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)
Um den Pfad für SvgIcon, offen svg-Datei mit dem Texteditor und kopieren Sie den entsprechenden Pfadausdruck zu erhalten.