Mam plik SVG i chcę utworzyć z niego komponent SvgIcon, jak powinienem to zrobić?Jak używać pliku SVG w SvgIcon w Material-UI
W przypadku wszystkich przykładów wykorzystano predefiniowane ikony materiałów lub dziwną notację o <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />, której nie mam pojęcia, co to jest!
<path /> jest ścieżką SVG, tj. Wewnętrznymi bitami SVG. naprawdę składnik SvgIcon powinny być w stanie podjąć drogę, ale to nie ma :(
zamiast można utworzyć komponent jak https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js
ze źródła SVG w miejscu path. (Polecam go minifying nieco używając https://jakearchibald.github.io/svgomg/)
przypadku dokonywania więcej niż jedną ikonę, może nie chcieć, aby powtórzyć cały Gotowa na przykład mowa w przyjętym odpowiedzi można użyć generatora składnik wrapper jak:.
const wrapSvgPath = (path, viewBox='0 0 24 24') => (props) => (
<SvgIcon {...props} viewBox={viewBox}>{path}</SvgIcon>
)
używane jak:
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)
Aby uzyskać ścieżkę SvgIcon, otwartego pliku svg z edytora tekstu i skopiuj odpowiedni wyraz ścieżki.