React造轮子：Icon

1. 介绍

造一个 Icon 组件，可以引入 svg 图标。
参考博客：https://juejin.cn/post/6844904194747400199

2. 代码

Icon 组件

import './importAll';
import React from "react";
/**
 *
 * 引入svg的步骤：
 * 1. 安装svg-sprite-loader
 * 2. 将svg放入src/assets文件夹
 * 3. 在代码里引入svg：import '../../assets/wechat.svg';
 * 4. 使用svg标签展示图标：#wechat
 */

interface  IconType{
    name: string;
}
const Icon: React.FC<IconType> = (props) => {
    const {name} = props;
  return (
    <div>
      <svg>
        <use xlinkHref={`#${name}`}/>
      </svg>
    </div>
  );
};
export default Icon;

依赖：

• importAll.js：导入 assets 文件夹下的所有 svg 图片。
• svg-sprite-loader：将所有的 svg 生成雪碧图一样的东西。

importAll.js 代码：

const req = require.context('../../assets', true, /\.svg$/);
req.keys().forEach((filename) => req(filename));

安装 svg-sprite-loader：npm i svg-sprite-loader -D
webpack 配置：（如果是脚手架搭建的 react 项目，需要运行 yarn eject 才能看到 webpack 的配置文件）

// webpack.config.js 文件
{
   test: /\.svg$/,
   loader: 'svg-sprite-loader',
},