How to use the @svgr/core.sync function in @svgr/core

export const svg2jsx: FileDataTransformer = ({ fileData, filePath }) => {
  /*
   * There's no built-in SVGR template that works for both
   * React Native and TypeScript. So it seems easier
   * to use the React Native one and make some
   * clunky manual replaces to the outputed content.
   */
  const svgrData = svgr.sync(fileData, {
    native: true,
    // prettier plugin not working well.
    // plugins: ['@svgr/plugin-prettier'],
  });
  /**/

  return { fileData: svgrData, filePath };
};

function getCountryFlagSvgMarkup(country) {
	const svgCode = fs.readFileSync(path.join(__dirname, `../flags/3x2/${country.toLowerCase()}.svg`), 'utf8')
	let code = svgr.sync(
		svgCode,
		{
			plugins: [
				'@svgr/plugin-svgo',
				'@svgr/plugin-jsx',
				'@svgr/plugin-prettier'
			],
		}
	)
	const svgTagStartsAt = code.indexOf(' tag not found in ${country} flag`)
	}
	const firstTagStarts = code.indexOf('<', svgTagStartsAt + 1)
	if (firstTagStarts < 0) {
		throw new Error(`First tag not found in ${country} flag`)

files.forEach(fileName => {
        const { name } = parse(fileName)
        const svgCode = readFileSync(join(inputFolder, fileName), "utf-8")
        try {
          let output = svgr.sync(
            svgCode,
            {
              prettier: true,
              svgo: true,
              plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx", "@svgr/plugin-prettier"],
              svgProps: {
                fill: "{iconColor}",
                width: "{size}",
                height: "{size}",
                size: "{size}",
                role: '{props.onClick ? "button" : undefined}',
                tabIndex: "{props.onClick ? 0 : undefined}",
              },
              template,
            },
            { componentName: `${name}Icon` },

export function convert(code, config, state) {
  return svgrConvert.sync(code, config, {
    ...state,
    caller: {
      name: '@svgr/cli',
      defaultPlugins: [svgo, jsx, prettier],
    },
  })
}