How to use SVGR in reactjs and webpack with svg font?

Question

I try to use SVGR to load SVG in my project with reactjs and webpack but I got an unexpected error like this:

ERROR in ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" standalone="no"?>
| <!--
| Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 @ ./node_modules/@fortawesome/fontawesome-free/css/all.css (./node_modules/css-loader/dist/cjs.js??ref--10-1!./node_modules/postcss-loader/src??postcss!./node_modules/@fortawesome/fontawesome-free/css/all.css) 13:36-77

here is my webapack rule:

rules: [
  {
    test: /^(?!.*\.test\.tsx?$).*\.tsx?$/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          transpileOnly: devMode === 'development',
        },
      },
    ],
    exclude: [/node_modules/],
  },
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'react-hot-loader/webpack',
      },
      {
        loader: 'babel-loader',
      },
    ],
  },
  {
    test: /\.(woff|woff2|eot|ttf)$/,
    loader: 'file-loader',
    include: [/fonts/],
    options: {
      name: '[name].[ext]',
      outputPath: 'fonts/',
    },
  },
  {
    test: /\.(png|jpg|gif)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: 'images/',
    },
  },
  {
    test: /\.svg$/i,
    issuer: /\.[jt]sx?$/,
    use: ['@svgr/webpack'],
  },
  {
    test: /\.scss$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          hmr: process.env.NODE_ENV === 'development',
        },
      },
      // 'style-loader', // creates style nodes from JS strings
      'css-loader', // translates CSS into CommonJS
      'sass-loader', // compiles Sass to CSS, using Node Sass by default,
      {
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            autoprefixer({
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ],
  },
  {
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          hmr: process.env.NODE_ENV === 'development',
        },
      },
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            autoprefixer({
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ],
  },
],

I used svgr in this way in my code:

import { ReactComponent as ExpandIcon } from 'images/down-arrow.svg';
...
<ExpandIcon />

I don't know why this problem occurred, or how to resolve it by excluding font.svg can someone pls help me to understand what happened?