nova-svg v0.1.8

NOVA SVG

This project will take SVG files and convert them to React components. These React components can then be lazy loaded into a generic React SVG component. This gives the benefits of code splitting as well as a separate project for SVG creation/editing. This project requires minimal setup. Any SVG that needs to be included in the final bundle should be put in the ./svgs/ folder. You can then use npm run convert to convert all of the SVGs to React Components.

An explanation of the script that is used to convert the SVG's can be found here.

Generic SVG Component

import React, {FC, lazy, Suspense} from "react";
import cx from "classnames";

export type SVGProps = {
	className?: null | string;
	name: string;
};

export const SVG: FC<SVGProps> = props => {
  const ImportedSVG = lazy(() => import("nova-svg/dist/" + props.name + '.js'));
  console.log(ImportedSVG);
	return (
		<span className={cx(props.className)}>
			<Suspense fallback="">
				<ImportedSVG />
			</Suspense>
		</span>
	);
};