如何在材质 ui SVG ICON 中使用自定义 SVG 文件答案

【问题标题】：How to use a custom SVG file in material ui SVG ICON如何在材质 ui SVG ICON 中使用自定义 SVG 文件
【发布时间】：2018-08-18 09:04:39
【问题描述】：

我正在尝试使用带有 SVG 删除图标的 chip，

图标代码是

const icon = (props) => {
    return (
        <SvgIcon>
            <img src={'ic_check.svg'} style={{width: '20px'}} width={'20px'}/>
        </SvgIcon>
    )
};

SVG 文件的内容

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <g fill="none" fill-rule="evenodd">
        <rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
        <path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
        <path d="M0 0h24v24H0z"/>
    </g>
</svg>

芯片终于来了

<Chip
      label={ViewUtils.NOT_EXPIRED}
      className={classes.chip}
      onDelete={() => {}}
      deleteIcon={<icon/>}/>

但这不起作用，我检查了路径，它是正确的，因为我可以在 img 标记中呈现相同的 svg。

【问题讨论】：

标签： reactjs svg material-ui

【解决方案1】：

Nayan SvgIcon 采用 svg 路径，您可以进一步设置样式。但是在您的情况下，您的 svg 已经设置了样式。它不需要实际失去 SvgIcon API 目的的 svg 文件目录路径。您只需要从img 标签中删除SvgIcon：

<Chip
  label={ViewUtils.NOT_EXPIRED}
  className={classes.chip}
  onDelete={() => {console.log('You Deleted this icon')}}
  deleteIcon={icon}
 />

并让您将 svg 设置为 const 或从资产文件目录导入我还没有尝试过，

const icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
               <g fill="none" fill-rule="evenodd">
                <rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
                <path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
                <path d="M0 0h24v24H0z"/>
             </g>
           </svg>

我们不能制作<icon/> 组件是有原因的。如果我们把它做成如下组件：

const Icon = (props) => {
return (
<SvgIcon>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <g fill="none" fill-rule="evenodd">
      <rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10" />
      <path
        fill="#FFF"
        fill-rule="nonzero"
        d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"
      />
      <path d="M0 0h24v24H0z" />
    </g>
  </svg>
</SvgIcon>
)
};

它就像一个魅力，但 onDelete 不会在这个组件上被触发。我在材质 UI 上也报告了这个问题。在第一种情况下，每次都会调用 onDelete。欢迎提出任何问题。

已编辑 修复了上述 Icon as Component 而不是 const 的问题。这是工作示例的代码框链接： https://codesandbox.io/s/98842r4yy4

【讨论】：

嘿，我尝试在 chip 中使用 icon 常量，但从你的回答中不起作用，我错过了什么吗？
请在添加常量后将更新后的代码粘贴到此处。
const svg = ; const icon = () => { return () };
啊，不。你是对的，谢谢。 img 标签就像一个魅力。
找到了您的问题。标签以 src 作为路径。您需要提供 svg 文件目录路径，例如：/build/assets/icons/test.svg。其次，不要使用 Icon 作为我上面给出的解释的组件。像这样使用它： const Icon =;这就是我的情况的来源。将 svg 放入图标文件夹中。

【解决方案2】：

我正在使用 React 和 typescript，创建了一个组件并从 HTML 添加了标签，它工作正常。

export const IconTable: React.FC = () => {
    return (
        <svg width="130" height="130" viewBox="0 0 1024 1024">
            <path d="M505.947 123.597a23.096 23.096 0 0 0-16.99-7.477h-6.837c-17.929 0-32.631 13.468-34.198 "/>
        </svg>
);

【讨论】：