使用 Material ui svg 图标作为背景图片

IT技术 html css reactjs material-ui google-material-icons
2021-05-24 17:11:33

我可以使用@material-ui/iconssvg 图像作为其他元素的背景吗?尝试了下面的代码,但没有奏效。

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

const carIcon = <CarIcon />

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

@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,可以进一步设置样式或动画。