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}>
      // 只需要即可 <path></path> 
    </MyIcon>
  );
};

版权声明:本文为qq_37214567原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。