如何在React/MaterialUI中使用SVG素材

之前用iconfont的svg一直都是失败状态，今天来解决一下

这里有个例子，大设计师设计的SVG印章图 这个图还是比较酷的 审核通过.svg(点击可下载)

这个svg的图通过查看代码如下

<svg xmlns="http://www.w3.org/2000/svg" width="3451.53" height="3335" viewBox="0 0 3451.53 3335">
  <defs>
    <style>
      .cls-1 {
        fill: #3373b2;
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path id="审核通过" class="cls-1" d="M-10.181,1508. ....省略... 3.76,3153.04,1487.67,3080.01,1504.78Z" transform="translate(0 -9)"/>
</svg>

在我们的项目中如何去使用呢

首先要找到SVG素材中的viewBox和path d 复制到如下代码只弄个

import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';

export default function HomeIcon(props: SvgIconProps) {
  return (
    <SvgIcon viewBox="..." {...props}>
      <path d="..." />
    </SvgIcon>
  );
}

之前一直不能正常显示是因为使用非material UI的svg找不到对应的viewBox,所以在使用svg的时候，一定要看好svg中的viewBox

//图片素材：ZHANG X