svgr-webpack把ts中svg转成react component

1.在项目中使用svg的好处：

① 不失真, 放大缩小图像都很清晰；

② SVG文件是纯粹的XML, 也是一种DOM结构，可以在svg文件中删减一些无用的写死大小的代码，然后在引入svg的

时候通过css自定义其大小颜色，提高复用率。

③ 文件比一般的jpg.png图片较小。

2.用法

1.安装svgr-webpack

npm install @svgr/webpack --save-dev
// or use yarn
yarn add @svgr/webpack --dev

2.在项目的webpack配置文件中增加loader的配置：

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

 如果svg文件的存放是和jpg以及png等图片同一目录的，则需要在url-loader或file-loader的配置中使用exclude去除svg的匹配，因为如果不去除会导致svg经过hash指纹重命名之后，loader找不到svg文件，进而导致报错。

3. 全局声明svg component定义

import * as React from 'react';

declare interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}

declare module '*.svg' {

    const content: SvgrComponent

    export default content

}

这个方案好处不仅体现在构建时转换, 更重要的是它完全继承了SVGAttributes, 不需要额外的学习成本!。

4. 在项目中引入svg

import Icon from '@assets/svg/react.svg'

const Header= () => (
    <p>
        <Icon width={180} height={180} color="purple" />
    </p>

)