Een SVG-bestand gebruiken in een SvgIcon in Material-UI

Ik heb een SVG-bestand en ik wil er een SvgIcon-component van maken, hoe moet ik dat doen?

In de documentatiegebruiken alle voorbeelden vooraf gedefinieerde materiaalpictogrammen of een vreemde notatie van <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />waarvan ik geen idee heb wat het is!

Antwoord 1, autoriteit 100%

1. Gebruik <Icon/>component en een <img/>element

Om een ​​SVG-bestand als pictogram te gebruiken, gebruikte ik de component <Icon/>met een <img/>-element erin, waarbij ik de height: 100%naar het imgelement en textAlign: centernaar de rootklasse van de <Icon/>component deed het:

JSX:

import Icon from '@material-ui/core/Icon';
import { makeStyles } from '@material-ui/styles';
...
<Icon classes={{root: classes.iconRoot}}>
  <img className={classes.imageIcon} src="/graphics/firebase-logo.svg"/>
</Icon>

Stijlen:

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

Resultaat:

UPDATE

Zoals Lorenz Haase in de opmerkingen vermeldt, is er een klein stukje van de SVG onderaan, wat kan worden opgelost als we flexbox gebruiken en de breedte en hoogte overnemen:

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

2. Met behulp van <SvgIcon/>component en @svgr/webpackwebpack-lader

Volgens de officiële MUI-documentatiekunnen we <SvgIcon/>componentrekwisieten en hebben een @svgr/webpack-lader om .svg-bestanden te laden met behulp van ESM-import.

Onderdeelsteun

U kunt de SvgIconwrapper gebruiken, zelfs als uw pictogrammen zijn opgeslagen in de
.svg-indeling. svgrheeft laders om SVG-bestanden te importeren en te gebruiken
als React-componenten. Bijvoorbeeld met webpack:

// webpack.config.js
{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}
// ---
import StarIcon from './star.svg';
<SvgIcon component={StarIcon} viewBox="0 0 600 476.6" />

Het is ook mogelijk om het te gebruiken met “url-loader” of “file-loader”. Zijn
de aanpak die wordt gebruikt door Create React App.

// webpack.config.js
{
  test: /\.svg$/,
  use: ['@svgr/webpack', 'url-loader'],
}
// ---
import { ReactComponent as StarIcon } from './star.svg';
<SvgIcon component={StarIcon} viewBox="0 0 600 476.6" />

Antwoord 2, autoriteit 60%

<path />is een SVG-pad, d.w.z. de interne bits van de SVG. de component SvgIconzou eigenlijk een pad moeten kunnen nemen, maar dat doet het niet 🙁

in plaats daarvan kun je een component maken zoals https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js

met je svg-bron in plaats van het path. (Ik raad aan om het een beetje te verkleinen met https://jakearchibald.github.io/svgomg/)

Antwoord 3, autoriteit 44%

U kunt SVG’s rechtstreeks importeren als React-componenten en ze gebruiken in <SvgIcon>:

import React from "react";
import { ReactComponent as Logo } from "./logo.svg";
import SvgIcon from "@material-ui/core/SvgIcon";
const App = () => (
  <SvgIcon>
    <Logo />
  </SvgIcon>
);
export default App;

Zie ook: https:// create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

Helaas lijkt React nog niet in staat om alle soorten SVG’s weer te geven (bijvoorbeeld aangepast met Inkscape, Illustrator). Maar in ieder geval werkt de standaard logo.svgin een create-react-app-project.

Antwoord 4, autoriteit 16%

Om het pad voor SvgIcon te verkrijgen, opent u het SVG-bestand met de teksteditor en kopieert u de corresponderende paduitdrukking.

Antwoord 5, autoriteit 9%

De oplossing die voor mij werkte, is de volgende

import React from 'react';
 import pure from 'recompose/pure';
 import {SvgIcon} from '@material-ui/core';
 let smile = (props) => (
   <SvgIcon {...props} >
<path d="M256,32C132.281,32,32,132.281,32,256s100.281,224,224,224s224-100.281,224-224S379.719,32,256,32z M256,448
c-105.875,0-192-86.125-192-192S150.125,64,256,64s192,86.125,192,192S361.875,448,256,448z M160,192c0-26.5,14.313-48,32-48
s32,21.5,32,48c0,26.531-14.313,48-32,48S160,218.531,160,192z M288,192c0-26.5,14.313-48,32-48s32,21.5,32,48
c0,26.531-14.313,48-32,48S288,218.531,288,192z M384,288c-16.594,56.875-68.75,96-128,96c-59.266,0-111.406-39.125-128-96"/>
   </SvgIcon>
 );
 smile = pure(smile);
 smile.displayName = 'smile';     
 smile.muiName = 'SvgIcon';
 export default smile;

Bekijk dit voorbeeld van materiaal ui-pictogram

Antwoord 6, autoriteit 7%

De SvgIconis hier niet voor bedoeld. Meer hierover @ Github.

Waarschijnlijk zoekt u dit startIcon={<img src={google}></img>}

import google from "../../Assets/img/google.svg";
import GitHubIcon from "@material-ui/icons/GitHub";
const useStyles = makeStyles((theme) => ({
         root: {
                display: "flex",
                flexDirection: "column",
                margin: theme.spacing(1),
                },
          button: {
               margin: "0.5rem",
                  },
          googleStyle: {
                fillColor: theme.palette.primary.main,
                    },
              }));
export default function ContainedButtons() {
  const classes = useStyles();
   return (
  <div>
  <Button
    variant="contained"
    color="secondary"
    className={classes.button}
    startIcon={<img src={google}></img>}
  >
    Login With Google
  </Button>
  <Button
    variant="contained"
    color="secondary"
    className={classes.button}
    startIcon={<GitHubIcon />}
  >
    Login with GitHub
  </Button>
</div>
);
}