react use svg from separate file as background-image in css styles

Импортируем, как будет значение было экспортировано по умолчанию и затем применяем:

import svgData from './unchecked.svg';

 return createStyles({
    root: {
      width: 48,
      height: 24,
      padding: 0,
      margin: theme.spacing(1),
      '&:first-child:first-child:after': {
        content: '""',
        color: 'white',
        width: 50,
        height: 50,
        border: '1px solid #fff',
        background: `url(${svgData}) no-repeat top left`,
      },
    },
}

При это в svgData при правильной реботе webpack-а окажется относительная ссылка на статический файл, лежащий на сервере.

Также см. о проблеме с отображением SVG: http://fkn.ktu10.com/?q=node/12446