Question

我正在尝试使用带有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。

Answer 1

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

<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作为组件而不是const的问题。这是工作示例的codesandbox链接： https://codesandbox.io/s/98842r4yy4

Answer 2

我正在使用React和Typescript，创建了一个组件并添加了HTML中的标签，并且正常工作。

var x = window.matchMedia("screen and (min-width: 1200px)");
// declare y and z

var handleQuery = function(e, margin) {
  if (e.matches && phase === phases.crustType) { 
    doughSpan.style.marginLeft = margin;
  }
};

handleQuery(x, "17em");
// call handleQuery for y and z, passing along their margins

x.addListener(function(e) {
  handleQuery(e, "17em");
});

// call addListener for y and z and handle them as you need

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

2 个答案: