使用材质 ui svg 图标作为背景图片

Posted 2023-03-15

【中文标题】使用材质 ui svg 图标作为背景图片

【英文标题】：Use material ui svg icons as background image

【发布时间】：2021-12-08 09:17:06

【问题描述】：

我可以使用@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+')' 
    />
  )

【问题讨论】：

这能回答你的问题吗？ Using SVG as background image

【参考方案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>
  )

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