Совместное использование SVGR и Material UI

Question

Я пытаюсь использовать SVGR для преобразования моего SVG в реагирующие компоненты, и мне нужно использовать <SvgIcon /> UI материала и передать преобразованный компонент в качестве опоры для него. в этом нет ничего плохого.

но SVGR сохраняет эти компоненты, например, в папке с именем svgCom, а внутри этой папки есть index.js плюс преобразованные компоненты svg.

Мне нужно обернуть все эти компоненты внутри <SvgIcon>, поэтому мне не нужно снова оборачивать этот значок <SvgIcon/> для каждого варианта использования; пока я пытаюсь добавить этот компонент в template.js SVGR, но он выдает ошибку при попытке синтаксического анализа.

это лучший способ сделать это или есть лучший способ? если это что-то не так с моим шаблоном. js?

вот мой храм. js:

function template(
  { template },
  opts,
  { imports, componentName, props, jsx, exports },
) {
  return template.ast`
    ${imports}
     import { SvgIcon } from "@material-ui/core";
     ///////////////////////////////////// error here
    const ${componentName} = (${props}) => <SvgIcon component={${jsx}} />
    ${exports}
  `
}
module.exports = template

спасибо.