使用材质UI SVG图标作为背景图像 [英] Use material ui svg icons as background image

问题描述

我可以使用@material-ui/iconsSVG图像作为其他元素的背景吗？已尝试以下代码，但不起作用。

import CarIcon from '@material-ui/icons/DriveEtaRounded';

const carIcon = <CarIcon />

function Cover(){
  return (
    <div
        className={classes.cover}
        style={{ backgroundImage: 'url('+ carIcon+')' }}
    />
  )
}

svg是Reaction组件，如果您打开它们源代码，则它们只包含使用实用程序函数封装在标记中的推荐答案数据。？但是，您可以通过直接使用它们和一些样式来模拟背景图像行为：

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>
  )
}

这是一个示例，但是只要父元素的维度由其他内容设置，它就可以工作。您还可以通过向图标组件添加preserveAspectRatio='xMidYMid slice'来模拟background-size: cover行为(默认值对应于contain)。 此方法的另一个好处是图标仍然是SVG，并且可以进一步设置样式或设置动画。

这篇关于使用材质UI SVG图标作为背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！