web-dev-qa-db-fra.com

Comment utiliser un fichier SVG dans un SvgIcon dans Material-UI

J'ai un fichier SVG et je veux en faire un composant SvgIcon, comment dois-je faire?

Dans la documentation , tous les exemples utilisent des icônes de matériau prédéfinies ou une notation étrange de <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> dont je n'ai aucune idée de ce que c'est!

svgmaterial-ui
14
Mehran

<path /> est un chemin SVG, c’est-à-dire les bits internes du SVG. le composant SvgIcon devrait vraiment pouvoir prendre un chemin, mais ce n'est pas le cas :(

au lieu de cela, vous pouvez créer un composant comme https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727%81984d04b/src/svg-icons/action/home.js

avec votre source svg à la place de la path. (Je recommande de le réduire un peu en utilisant https://jakearchibald.github.io/svgomg/ )

9
Gerbal

Pour obtenir le chemin d'accès à SvgIcon, ouvrez le fichier svg avec l'éditeur de texte et copiez l'expression de chemin correspondante.

3
Eugene Tulika

Si vous créez plusieurs icônes, vous ne voudrez peut-être pas répéter toutes les références dans l'exemple cité dans la réponse acceptée. Vous pouvez utiliser un générateur de composant wrapper comme:

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

utilisé comme:

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)
1
Ed Staub