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

export async function convertSvgToReact(
  svgName: string,
  svgData: string,
  options: Options = DEFAULT_OPTIONS
): Promise {
  const componentName = fileNameToComponentName(svgName);

  // Convert the SVG into our ideal format
  let svgDataCleaned = '';
  try {
    svgDataCleaned = await svgr(svgData, config, {componentName});
  } catch (e) {
    console.error(`Couldn't process svg data through SVGR: `, e);
  }

  // Remove the trailing semicolon from the generated SVG
  // I use my own templating to solve for issues in theirs, which is why I need to do this
  const noTrailingSemicolonSvg = removeLastCharacter(svgDataCleaned);

  // Dump the SVG JSX into our template
  let fileTemplate = options.useHooks ? fileTemplateReactHooks : fileTemplateReactDefault;
  if (options.template != null) {
    fileTemplate = options.template;
  }

  const templateJSX = fileTemplate({
    componentName,

path.join(fullSvgDirectory, filename),
              "utf-8"
            );

            // We have to use a custom svgo setup because the `svgr` one isn't
            // configurable and will sometimes remove fills and strokes that we
            // don't want removed.
            const { data: svg } = await svgo.optimize(svgCode, {
              path: path.join(fullSvgDirectory, filename),
            });

            const componentName = formatComponentName(
              path.basename(filename, path.extname(filename))
            );

            const componentSource = await svgr(
              svg,
              {
                dimensions: false,
                template: function svgrTemplate(
                  { template },
                  _opts,
                  {
                    imports,
                    componentName,
                    jsx,
                  }: {
                    imports: any;
                    componentName: string;
                    jsx: types.JSXElement;
                  }
                ) {

code.map(async c => {
      const svgoCode = await svgo(c.svg)
      const transformedCode = await svgr(svgoCode, values, {
        componentName: values.name
      })
      const prettierCode = prettier.format(transformedCode, {
        parser: 'babel'
      })
      setJSCode(jsCode => jsCode.concat({ name: c.name, svg: prettierCode }))
    })
  }

const exportMatches =
        data.match(/^module.exports\s*=\s*(.*)/) ||
        data.match(/export\sdefault\s(.*)/)

      const previousExport = exportMatches ? data : null

      const ast = {
        type: 'Program',
        sourceType: 'module',
        start: 0,
        end: null,
        body: [],
      }

      const jsCode = await convert(load, options, {
        filePath: id,
        caller: {
          name: '@svgr/rollup',
          previousExport,
          defaultPlugins: [svgo, jsx],
        },
      })

      if (babel) {
        const { code } = await transformAsync(jsCode, babelOptions)
        return { code, map: { mappings: '' } }
      }

      return { ast, code: jsCode, map: { mappings: '' } }
    },
  }

onSubmit: async values => {
      const svgoCode = await svgo(values.svgCode)
      svgr(svgoCode, values, { componentName: values.name }).then(
        async code => {
          setJSCode(
            prettier.format(code, {
              parser: 'babel'
            })
          )
        }
      )
    }
  })

async submitForm({ state }) {
      const svgoCode = await svgo(state.svgCode.trim())
      const code = await svgr(svgoCode, state, {
        componentName: state.name
      })
      state.jsCode = prettier.format(code, state.prettier)
    }
  },

const tranformSvg = svg =>
    convert(svg, options, {
      caller: {
        name: '@svgr/webpack',
        previousExport,
        defaultPlugins: [svgo, jsx],
      },
      filePath: this.resourcePath,
    })
      .then(jsCode => {
        if (!babel) return jsCode
        return transformAsync(jsCode, babelOptions).then(({ code }) => code)
      })
      .then(result => callback(null, result))
      .catch(err => callback(err))

code.map(async c => {
      const svgoCode = await svgo(c.svg)
      const transformedCode = await svgr(svgoCode, state, {
        componentName: state.name
      })
      const prettierCode = prettier.format(transformedCode, state.prettier)
      setJSCode(jsCode => jsCode.concat({ name: c.name, svg: prettierCode }))
    })
  }