CheckIcon.tsx

export const CheckIcon = (props: React.SVGProps<SVGSVGElement>) => (
	<svg viewBox="0 0 480 480" fill="none" {...props}>
		<path
			fillRule="evenodd"
			clipRule="evenodd"
			d="M84.1393 270.567L202.287 382.135L393.941 184.589C405.121 172.962 405.311 153.948 393.684 142.767C382.057 131.586 363.262 132.707 352.08 144.334L200.686 300.166L124.252 228.644C112.571 217.521 93.4773 217.208 82.3543 228.89C71.2313 240.573 72.4553 259.444 84.1393 270.567Z"
			fill="currentColor"
		/>
	</svg>
);

Example.tsx

export const Example = () => (
	<CheckIcon width={20} height={20} className="icon" />
);

This is a useful trick when you have just one or two SVG components you need to include. When your project starts growing and you see yourself including more SVG files, it’s worth considering a tool like react-svgr to automatically transform SVGs into React components.