reactjs - 如何在材质 ui SVG ICON 中使用自定义 SVG 文件
问题描述
我正在尝试使用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。随时问任何问题。
已编辑修复了 Icon as Component 而不是 const 的上述问题。这是工作示例的代码框链接: https ://codesandbox.io/s/98842r4yy4
推荐阅读
- javascript - 优化 Svelte 中的渲染 - 添加数万个 DOM 元素
- r - Rcpp (Eigen),重复或重复行
- flutter - 带有动态高度项的 ListView 的抽动滚动指示器
- push-notification - HMS 取消通知,标签不起作用((HMS 推送工具包)
- xamarin - 如何处理链接打开新选项卡的 Xamarin Webview?
- flutter - 从多个类访问构建上下文以在 Flutter 中进行应用本地化的最佳实践?
- java - 为什么 volatile 没有添加到 FileInputStream 的通道中?
- firebase - 如何在集成测试中重置 Firestore 模拟器
- c# - 即使单元格上有图片框,如何仍然能够单击 dataGridView 的单元格?
- php - 根据给定的顺序重新排列对象