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

Posted 2023-03-06

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

【英文标题】：How do I use a custom SVG file with material-ui Icon Component?

【发布时间】：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> 组件很好地配合使用。

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

【参考方案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 中的路径居中。