如何将自定义SVG文件与material-ui图标组件一起使用？

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

答案在于viewBox属性( MDN )

当您弄乱SVG时，尤其是复制/粘贴的SVG时，必须精挑细算viewBox才能正确构建路径。我通常从<svg viewBox="0 0 100 100" />开始，然后按比例放大或缩小以进行品尝。经过一番摆弄之后，"0 0 60 50"看起来不错(link)。

看着MaterialUI文档(link)，他们计划了这种事情，并允许它作为组件上的道具。

Answer 2

您还可以使用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 3

您可以将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>
  )
}