react-scripts-svg

A CLI that turns a folder of SVG files into a single React component and the type that constrains it. Icons stop being assets to import one by one and become a name prop the compiler checks.

Each file is optimised with SVGO, parsed to JSON with svgson and written out as component data, so the markup ships inline rather than as a network request per icon. File names become camelCase keys — alarm-clock.svg becomes alarmClock — and with --typescript the generated types.ts exports a union of those keys, which is what makes an icon that does not exist a build error instead of an empty box. Options are read from flags or a config file via cosmiconfig.

react-scripts-svg -p src/assets/svg -o src/components -t -d vector

That writes src/components/vector/index.tsx and types.ts, leaving one component to use everywhere:

import Icon from "../vector"

export const SettingsIcon = () => <Icon name="settings" className="settings-icon" style={{ fill: "red" }} />

Published to npm under the MIT licence.