Material UI 環境で Bootstrap Icon をいい感じに使えるようにするコンポーネント

README.md

Dependencies

• react
• react-bootstrap-icons
• @material-ui/core
• (typescript)

Issue

• svg 要素が入れ子になっている

Usage

import React from "react";
import BootstrapIcon from "components/BootstrapIcon";
import { Alarm } from "react-bootstrap-icons";

const Hoge: React.VFC = () => (
  <BootstrapIcon icon={Alarm} />
);

BootstrapIcon.tsx

import React, { ComponentType, SVGAttributes } from "react";
import { SvgIcon, SvgIconProps } from "@material-ui/core";

// react-bootstrap-icons
interface BIProps extends SVGAttributes<SVGElement> {
  color?: string;
  size?: string | number;
}
type Icon = ComponentType<BIProps>;

const BootstrapIcon: React.VFC<{ icon: Icon } & SvgIconProps> = ({
  icon: Icon,
  ...svgIconProps
}) => (
  <SvgIcon {...svgIconProps}>
    <Icon size={24} viewBox="-2 -2 20 20" />
  </SvgIcon>
);

export default BootstrapIcon;