Использование svg-значков пользовательского интерфейса в качестве фонового изображения

Question

Могу ли я использовать @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+')' }}
    />
  )
}

Answer 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 и могут быть дополнительно стилизованы или анимированы.