我可以用@material-ui/icons
svg 图像作为其他元素的背景。?尝试了下面的代码,但没有奏效。
import CarIcon from '@material-ui/icons/DriveEtaRounded';
const carIcon = <CarIcon />
function Cover(){
return (
<div
className={classes.cover}
style={{ backgroundImage: 'url('+ carIcon+')' }}
/>
)
}
最佳答案
@material-ui/icons
是 React 组件,如果你打开它们的源代码,它们只包含封装在 <svg>
中的 SVG 数据。使用效用函数标记。但是,您可以通过直接使用它们和一些样式来模拟背景图像行为:
import CarIcon from '@material-ui/icons/DriveEtaRounded';
function Cover(){
return (
<div style={{position: 'relative', width: '200px', height: '100px'}}>
<CarIcon style={{position: 'absolute', left: 0, top: 0, width: '100%', height: '100%'}} />
</div>
)
}
这是一个示例,但只要父元素的尺寸由其他内容设置,它就会起作用。您也可以模拟 background-size: cover
通过添加 preserveAspectRatio='xMidYMid slice'
的行为到图标组件(默认值对应于 contain
)。这种方法的另一个好处是图标仍然是 SVG,可以进一步设置样式或动画。
关于html - 使用 Material ui svg 图标作为背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62009252/