Cómo usar un archivo SVG en un SvgIcon en Material-UI

Emiliano, parte de este gran equipo de trabajo, nos hizo el favor de redactar esta crónica porque conoce a la perfección el tema.

Solución:

1. Usando componente y un

elemento

Para usar un archivo SVG como ícono, usé el componente con un elemento interior, configurando el height: 100% hacia img elemento y textAlign: center hacia root clase de la componente hizo el truco:

JSX:

import Icon from '@material-ui/core/Icon';
import  makeStyles  from '@material-ui/styles';
...


  

Estilos:

const useStyles = makeStyles(
  imageIcon: 
    height: '100%'
  ,
  iconRoot: 
    textAlign: 'center'
  
);

Resultado:

ACTUALIZAR

Como menciona Lorenz Haase en los comentarios, hay un ligero corte del SVG en la parte inferior, que se puede arreglar si usamos flexbox y heredamos ancho y alto:

const useStyles = makeStyles(
  imageIcon: 
    display: 'flex',
    height: 'inherit',
    width: 'inherit'
  
);

2. Usando componente y @svgr/webpack cargador de paquetes web

Según la documentación oficial de MUI, podemos usar accesorios de componentes y tener un @svgr/webpack cargador para cargar .svg archivos mediante importaciones de ESM.

accesorio de componente

Puedes usar el SvgIcon envoltorio incluso si sus iconos se guardan en el
.svg formato. svgr tiene cargadores para importar archivos SVG y usarlos como componentes de React. Por ejemplo, con el paquete web:

// webpack.config.js

  test: /.svg$/,
  use: ['@svgr/webpack'],


// ---
import StarIcon from './star.svg';

También es posible usarlo con “url-loader” o “file-loader”. Es el enfoque utilizado por Create React App.

// webpack.config.js

  test: /.svg$/,
  use: ['@svgr/webpack', 'url-loader'],


// ---
import  ReactComponent as StarIcon  from './star.svg';

es una ruta SVG, es decir, los bits internos del SVG. la SvgIcon el componente realmente debería poder tomar un camino, pero no lo hace 🙁

en su lugar, puede crear un componente como https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js

con su fuente svg en lugar de la path. (Recomiendo minimizarlo un poco usando https://jakearchibald.github.io/svgomg/)

Puede importar archivos SVG directamente como componentes de React y usarlos en :

import React from "react";
import  ReactComponent as Logo  from "./logo.svg";
import SvgIcon from "@material-ui/core/SvgIcon";

const App = () => (
  
    
  
);

export default App;

Consulte también: https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

Desafortunadamente, parece que React no puede renderizar todo tipo de SVG (por ejemplo, modificado con Inkscape, Illustrator) todavía. Pero al menos por defecto logo.svg dentro de una create-react-app obras del proyecto.

Recuerda que puedes permitirte agregar una reseña si hallaste tu traba justo a tiempo.

---

---

Utiliza Nuestro Buscador