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

【问题标题】：How do I use a custom SVG file with material-ui Icon Component?如何使用带有 material-ui 图标组件的自定义 SVG 文件？
【发布时间】：2019-09-09 06:20:37
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css reactjs svg icons material-ui

【解决方案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>
)

【讨论】：

注意：您必须指定高度和宽度，否则 svg 将不会出现。感谢您的回答！

【解决方案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>
  )
}

【讨论】：

【解决方案3】：

答案在于viewBox属性( MDN )

当您处理 SVG，尤其是复制/粘贴的 SVG 时，您必须巧妙地调整 viewBox 以正确地构建路径。我通常从<svg viewBox="0 0 100 100" /> 开始，然后按比例放大或缩小，以品尝。经过一番摆弄，"0 0 60 50" 看起来还不错(link)。

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

【讨论】：

非常感谢。我想知道我怎样才能进入 viewBox 0 0 24 24
没问题。要更改图标的大小，您只需使用 CSS 属性 width 和 height。您也可以将属性直接添加到<SVGIcon />。我更新了 CodeSandbox 来演示（demo.js 第 17 行）。我很难解释，但我对 viewBox 的看法是它处理 SVG 中的路径居中。