Question

我有一个SVG文件，我想用它制作一个SvgIcon组件，我应该怎么做？

在documentation中，所有示例都使用预定义的材质图标或<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />的奇怪符号，我不知道它是什么！

Answer 1

<path />是SVG路径，即SVG的内部位。 SvgIcon组件确实应该能够走一条路，但它并没有:(

您可以创建像https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js

这样的组件

使用您的svg源代替path。（我建议使用https://jakearchibald.github.io/svgomg/）

稍微缩小一点

Answer 2

您可以将SVG直接作为React组件导入，并在<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;

另请参阅：https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

不幸的是，React似乎无法渲染所有类型的SVG（例如，使用Inkscape，Illustrator进行了修改）。但是至少logo.svg项目中的默认create-react-app有效。

Answer 3

要获取SvgIcon的路径，请使用文本编辑器打开svg文件并复制相应的路径表达式。

Answer 4

要使用SVG文件作为图标，我使用了<Icon/>组件，其中包含<img/>元素，将height: 100%设置为img元素，并且将{{1 }}到textAlign: center组件的root类中成功了：

JSX：

<Icon/>

样式：

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>

结果：

Answer 5

如果制作多个图标，您可能不想重复接受答案中引用的示例中的所有样板。您可以使用包装器组件生成器，如：

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

用过：

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)

Answer 6

对我有用的解决方案如下

 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;

Check this example of material ui icon

Answer 7

SvgIcon并非用于此目的。 {@ {3}}的更多信息。

您可能正在寻找这个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>
);
}

Answer 8

在编辑器中打开svg文件（例如：vscode）。您将看到类似这样的文件结构->

<svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.91942 27.5138L6.15827 26.984L8.69599 21.1562H8.68852L13.5027 10.3812L18.3542 21.1562H18.3467L21.1083 27.5138H26.2509L15.8687 4.72523L13.5698 0L0.933594 27.5138H5.91942Z" fill="#A7A9AC"/>
</svg>

然后转到您的反应组件，将路径替换为您自己的路径。这应该工作。添加样式以自定义设计更改。

Answer 9

import SvgIcon from '@material-ui/core/SvgIcon'
import Register from "./../../media/register.svg"
import React from 'react';

const getSvgIconMaterial = (Icon: string, props?: any) => {
    return (
        <SvgIcon component="object">
            <embed type="image/svg+xml" src={Icon} style={{ height: "100%" }} />
        </SvgIcon>
    );
};

这样使用

<>{getSvgIconMaterial(Register)}</>

可能并不完美，但效果很好。也许添加一个小的填充/边距。

如何在Material-UI中的SvgIcon中使用SVG文件

9 个答案: