Javascript 如何嵌入由React.createElement创建的SVG？ 背景

我正在尝试将SVG嵌入到React中的图像标记中，如下所示：

e、 g

从“@carbon/icons-react/es/Delete/16”导入删除
...
render（）{
返回
}

问题 但是，

Delete

元素在图像的src属性中是一个对象而不是SVG元素，因此无法正确显示

如何将此SVG正确嵌入到图像标记中

Delete.js ⚠️ 注意：这是取自的组件

从“@carbon/icon helpers”导入{getAttributes}；
从“道具类型”导入道具类型；
从“React”导入React；
函数{if（typeof Symbol==“function”&&typeof Symbol.iterator==“Symbol”）{{u typeof=function（obj）{return typeof obj；}；}否则{u typeof=function（obj）{return obj&&typeof Symbol==“function”&&obj.constructor==Symbol&&obj！==Symbol.prototype？{Symbol:typeof obj；}；}return typeof（obj）; }
函数_objectSpread（target）{for（var i=1；i=0）继续；如果（！Object.prototype.propertyIsEnumerable.call（source，key））继续；目标[key]=source[key]；}}}返回目标；}
函数_objectWithoutPropertiesLoose（source，excluded）{if（source==null）返回{}；var target={}；var sourceKeys=Object.keys（source）；var key，i；for（i=0；i=0）继续；target[key]=source[key]；}返回目标；}
var defaultStyle={
“willChange”：“transform”
};
var Delete16=React.forwardRef（函数（_ref，ref）{
var className=_ref.className，
children=_ref.children，
样式=_ref.style，
tabIndex=_ref.tabIndex，
rest=_objectwithoutproperty（_ref，[“className”，“children”，“style”，“tabIndex]”）；
var\u getAttributes=getAttributes（\u objectSpread（{}，rest{
tabindex:tabindex
})),
tabindex=\u getAttributes.tabindex，
props=\u objectwithoutproperty（\u getAttributes，[“tabindex”]）；
if（类名）{
props.className=className；
}
if（tabindex！==undefined&&tabindex！==null）{
props.tabIndex=tabIndex；
}
如果（_typeof（style）==“object”）{
props.style=_objectSpread（{}，defaultStyle，style）；
}否则{
props.style=defaultStyle；
}
如果（参考）{
props.ref=ref；
}
返回React.createElement（'svg'，props，children，React.createElement（'path'）{
d:'M6 6h1v6H6zm3 0h1v6H9z'
})，React.createElement（'path'{
d:'M2 3v1h1v10c0.6.4 1 1h8c.6 0 1-.4 1-1V4h1V3H2zm2 11V4h8v10H4zM6 1h4v1H6z'
}));
});
Delete16.displayName='Delete16'；
Delete16.propTypes={
“aria hidden”：PropTypes.bool，
“aria标签”：PropTypes.string，
“aria labelledby”：PropTypes.string，
类名：PropTypes.string，
子项：PropTypes.node，
高度：PropTypes.number，
PreserveSpectratio:PropTypes.string，
tabIndex:PropTypes.string，
viewBox:PropTypes.string，
宽度：PropTypes.number，
xmlns:PropTypes.string
};
Delete16.defaultProps={
宽度：16，
身高：16，
视图框：“0 16”，
xmlns:'http://www.w3.org/2000/svg',
PreserveSpectratio:'xMidYMid meet'
};
导出默认值Delete16；

如果要嵌入SVG元素，需要先导入它

    import DeleteIcon from '@carbon/icons-react/es/delete/icon.svg'

然后像你做的那样：

    render() {
       return <img src={DeleteIcon} alt="delete" />
    }

render（）{
返回
}

但在您的情况下，似乎只需要将其用作组件：

    import DeleteIcon from '@carbon/icons-react/es/delete/16'

    render() {
        return <DeleteIcon />
    }

从“@carbon/icons react/es/delete/16”导入DeleteIcon
render（）{
返回
}

如果要嵌入SVG元素，需要先导入它

    import DeleteIcon from '@carbon/icons-react/es/delete/icon.svg'

然后像你做的那样：

    render() {
       return <img src={DeleteIcon} alt="delete" />
    }

render（）{
返回
}

但在您的情况下，似乎只需要将其用作组件：

    import DeleteIcon from '@carbon/icons-react/es/delete/16'

    render() {
        return <DeleteIcon />
    }

从“@carbon/icons react/es/delete/16”导入DeleteIcon
render（）{
返回
}

谢谢您的回答，但是，Carbon没有提供像

icon.svg这样的文件，它使用
React.createElement（）
如我上面发布的问题所示。是的，我可以将其用作组件，但有一个用例需要将其嵌入图像标记中。@NicholasAdamou我已经更新了响应，是您的情况吗？当我在svg上触发
onClick
事件时，
event.target
有时返回svg元素，有时返回ns嵌套在svg标记中的
路径
元素。我需要它只返回svg元素。无法按照您的意愿嵌入它。您只能转到源代码，复制svg和路径，创建svg图标文件，然后嵌入。感谢您的回答，但是，Carbon没有提供类似
icon.svg
的文件，它使用
React.createElement（）
如我上面发布的问题所示。是的，我可以将其用作组件，但有一个用例需要将其嵌入图像标记中。@NicholasAdamou我已经更新了响应，是您的情况吗？当我在svg上触发
onClick
事件时，