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>
  );
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值