SVGIcon.tsx

import React, { ReactNode } from 'react';

interface Props {
  width?: string;
  height?: string;
  viewBox?: string;
  children: ReactNode;
}

const SVGIcon = ({ width = '20px', height = '20px', viewBox = '0 0 20 20', children }: Props) => (
  <svg
    width={width}
    height={height}
    viewBox={viewBox}
    preserveAspectRatio="xMidYMid meet"
  >
    {children}
  </svg>
);

export default SVGIcon;

// usage
import React from 'react';
import SVGIcon from './SVGIcon';

interface Props {
  fill?: string;
  width?: string;
  height?: string;
}

const Pencil = ({ fill = '#383F2C', width = '8px', height = '8px' }: Props) => (
  <SVGIcon viewBox="0 0 8 8" width={width} height={height}>
    <g fill="none" fillRule="evenodd">
      <path
        d="M.534 5.495l1.94 1.954-1.737.494c-.51.142-.808-.125-.722-.594l.024-.103.495-1.75z"
        fill={fill}
      />
      <path fill={fill} d="M4.715 1.327l1.938 1.937-3.785 3.785L.93 5.112z" />
      <path
        d="M5.823.219a.773.773 0 0 1 1.078 0l.862.863a.75.75 0 0 1 0 1.078l-.722.723L5.1.942l.723-.723z"
        fill={fill}
      />
    </g>
  </SVGIcon>
);

export default Pencil;

// <Pencil />
// <Pencil fill="#000" />
// <Pencil width="40px" height="40px" />