如何使用带有 material-ui 图标组件的自定义 SVG 文件？

Question

在我的项目中，我使用自定义svg文件作为要求的一部分。我正在使用它material-ui@3.9.3来实现这一目标。我查看了官方文档中提供的示例-> https://material-ui.com/style/icons/#svg-icons

但是，在我的版本中，自定义图标的显示方式不同。我的分叉版本可在https://codesandbox.io/s/mqnq9qrqn8 获得

我正在寻找的是一种使用可以与 Material-UI 的<Icon>组件很好地配合使用的自定义图标的方法。

有人可以帮我解决这个问题吗？谢谢

Answer 1

您还可以使用 Material-UI IconButton组件并将其包裹在您的 svg img 周围，如下所示

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>
)

Answer 2

您可以将 svg 文件作为 React 组件导入，然后直接在 Material UI 的 SvgIcon 组件中使用它。这也将允许您设置组件的样式。

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>
  )
}

Answer 3

答案就在 viewBox 属性（MDN）中

当你弄乱 SVG 时，尤其是复制/粘贴的 SVG，你必须巧妙地使用 viewBox 来正确地构建你的路径。我通常先开始<svg viewBox="0 0 100 100" />，然后按比例放大或缩小，以品尝。经过一番摆弄，"0 0 60 50"看起来不错（链接）。

查看 MaterialUI 文档（链接），他们计划了此类事情并允许它作为组件的支柱。