React使用svg-sprite-loader引入svg

最近捣鼓react制作一个ui库，想在项目里面实现引入svg

首先下好几个svg文件用于测试，目录如下

lib/下面是直接放的源代码文件，icons文件夹放svg文件

//index.tsx相当于main.js的作用，react渲染节点
import React from 'react';
import ReactDOM from 'react-dom'
import Icon from './icon'

ReactDOM.render(
  <div>
    <Icon name="wechat"/>
  </div>
,document.querySelector('#root'))

icon.tsx函数组件返回一个包含svg图片的span，react的动态引入svg可以如下设置

import React from 'react';
import './icons/alipay.svg'
import './icons/wechat.svg'
import './icons/byte.svg'

interface IconProps {
  name?:string;
}
const Icon:React.FunctionComponent<IconProps>=(props)=>{
  return (
    <span>
      <svg className="icon" >
          <use xlinkHref={`#${props.name}`}/>
      </svg>
      <svg className="icon" >
          <use xlinkHref='#alipay'/>
      </svg>
      <svg className="icon" >
          <use xlinkHref='#byte'/>
      </svg>
      icon
    </span>
  );
}

export default Icon;

项目安装svg-sprite-loader用于导入svg文件

yarn add svg-sprite-loader

需要配置一下webpack.config.js规则,在module.exports{module{rules[]}}加上下面的代码指明svg文件使用svg-sprite-loader

{
  test:/.svg$/,
  loader: 'svg-sprite-loader'
}

使用sybol引入方式， 运行server可以看到控制台HTML element引入了svg变成sybol标签。

<svg class="icon" aria-hidden="true"> 
    <use xlink:href="#icon-xxx"></use> 
</svg>

但是如果使用import xxx from的话就会报错

控制台报错ERROR in [at-loader] ./lib/icon.tsx:2:21 TS2307: Cannot find module './icons/alipay.svg' or its corresponding type declarations. 找不到模块 因为之前都是直接引入的方式加载就行，而import xxx from需要是导出作为模块，但是svg没有export default导出就会报错。想要使用这种方式需要配置一下d.js文件。

在网上翻了一翻这个报错的处理方法，这里我命名为custom.d.s放在types目录下写入如下代码

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

报错消失了，控制台也没有报错了