React 封装 SVG 图标

svg 可以到 阿里巴巴矢量图标库 复制。
放到组件中， 格式化一下代码。 删除多余的标签，只留下 path 即可。

可以在文件顶部禁用一下eslint, 防止一些有效的 svg 属性被误报

/* eslint-disable */
import { FC, PropsWithChildren, ComponentProps } from "react";

type ISvgProps = FC<PropsWithChildren<ComponentProps<"svg">>>;

let MyIcon: ISvgProps = (props) => <svg {...props}>{props.children}</svg>;

MyIcon.defaultProps = {
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 1024 1024",
  "aria-hidden": "true",
  fill: "currentColor",
  width: 100,
  height: 100,
};

// 一个封装例子
export let IconGithub: ISvgProps = (props) => {
  return (
    <MyIcon {...props}>
      // 只需要即可  
    </MyIcon>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24