react18 ts中使用 svg

create-react-app中已经集成@svgr/webpack
webpack.config.js

module:[
    rules:[
        {
            test:/\.svg$/,
            use:[
                {
                  loader:require.resolve("@svgr/webpack"),
                  options:{
                    prettire:false,
                    svgo:false,
                    svgoConfig:{
                      plugins:[{removeViewBox:false}],
                    },
                    titleProp:true,
                    ref:true
                  }
                }
            ],
            issuer:{
              and:[/.(ts|tsx|js|jsx|md|mdx)/]
            },
            resourceQuery:{not:[/url/]}
        },
        {
          test:/\.svg$/,
          type:'asset',
          issuer:{
            and:[/.(ts|tsx|js|jsx|md|mdx)/]
          },
          resourceQuery:/url/
        }
    ]
]

react-app-env.d.ts

...
declare module '*.svg'{
  import * as React from 'react';
  
  export const ReactComponent:React.FunctionComponent<React.SVGProps<SVGSVGElement> & {title?:string}>;
  
  const content:ReactComponent;
  export default content;
}

declare module '*.svg?url'{
  const src:string;
  export default src;
}
...

使用方法
方法一：矢量图引入

import Add from '@Icons/tianjia.svg'

<Add width="30px" height={30}/>

方法二：作为图片被引入 必须携带 ?url,与svgComponent区分开

import Change from '@Icons/qiehuan.svg?url'

<img src={Change}/>