1
votes

Comment utiliser un fichier SVG personnalisé avec le composant icône material-ui?

Dans mon projet, j'utilise des fichiers svg personnalisés dans le cadre de l'exigence. J'utilise material-ui@3.9.3 pour y parvenir. J'ai regardé l'exemple qui est disponible sur la documentation officielle -> https: // matériel -ui.com/style/icons/#svg-icons

Cependant, dans ma version, les icônes personnalisées n'apparaissent pas de la même manière. Ma version fourchue est disponible sur https://codesandbox.io/s/mqnq9qrqn8

Ce que je recherche, c'est un moyen d'utiliser les icônes personnalisées qui peuvent bien fonctionner avec le composant de Material-UI.

Quelqu'un pourrait-il m'aider s'il vous plaît? Merci

reactjs css material-ui icons svg

0 commentaires

3 Réponses :

4
votes

La réponse réside dans l'attribut viewBox (MDN) < / a>

Lorsque vous jouez avec des SVG, en particulier des copier / coller, vous devez affiner la viewBox pour encadrer correctement vos chemins. Je commence généralement par et augmente ou diminue, au goût. Après quelques manipulations, "0 0 60 50" semble plutôt bon (lien) .

En regardant la documentation MaterialUI (lien) , ils ont prévu ce genre de chose et permettez-le comme accessoire sur le composant.

2 commentaires

Merci beaucoup. Je me demande comment puis-je accéder à viewBox 0 0 24 24

Aucun problème. Pour changer la taille de l'icône, vous pouvez simplement utiliser les propriétés CSS, width et height . Vous pouvez également ajouter les attributs directement à . J'ai mis à jour le CodeSandbox pour démontrer (demo.js ligne 17). C'est difficile à expliquer pour moi, mais la façon dont je pense à viewBox est qu'il gère le centrage des chemins dans le SVG.

6
votes

Vous pouvez également utiliser le composant Material-UI IconButton et l'enrouler autour de votre image svg comme indiqué ci-dessous

import React from 'react'
import { Icon } from "@material-ui/core";
import YourLogo from './yourlogo.svg'

export const Logo = () => (
    <Icon>
        <img src={YourLogo} height={25} width={25}/>
    </Icon>
)

0 commentaires

3
votes

Vous pouvez importer le fichier svg en tant que composant React, puis l'utiliser directement dans un composant SvgIcon à partir de l'interface utilisateur matérielle. Cela vous permettra également de styliser votre composant.

import React from 'react';
import { SvgIcon, makeStyles } from '@material-ui/core';
import { ReactComponent as MySvg } from './img/someSvgFile.svg';

const useStyles = makeStyles(theme => {
  mySvgStyle:{
    fillColor: theme.palette.primary.main
  }
})

function MySvgIcon() {

  classes = useStyles();

  return(
    <SvgIcon className={classes.mySvgStyle}>
      <MySvg/>
    </SvgIcon>
  )
}

0 commentaires