Importing an SVG as a React component (mid 2024)

custom.d.ts

declare module "*.svg" {
	const ReactComponent: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
	export {ReactComponent};
}

MyComponent.tsx

import {ReactComponent as PencilIcon} from '../assets/icons/pencil.svg'

export default function EditButton(onClick:() => void) {
  return <button onClick={onClick}>
      <PencilIcon width="12" />
  </button>
}