我正在尝试使用chip带有SVG的删除图标，
图标代码是
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 。
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。随时问任何问题。
编辑修复了图标作为组件而不是常量的上述问题。这是工作示例的codesandbox链接：https ://codesandbox.io/s/98842r4yy4
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句