react typescript svg相关

引入了svgr

yarn add @svgr/webpack -D

添加custom.d.ts

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

declare module '*.svg' {
  const content: SvgrComponent
  export default content
}

编辑tsconfig.json

{
    "files": ["custom.d.ts"]
}

编辑storybook webpack.config.js

config.module.rules = config.module.rules.map(data => {
    if (/svg\|/.test(String(data.test)))
      data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
    return data;
  });

  config.module.rules.push({
    test: /\.svg$/,
    use: [
      {
        loader: '@svgr/webpack'
      }
    ]
  });

在另外的工程使用了parcel ,也要引入svgr

yarn add @svgr/parcel-plugin-svgr -D

最后更新于