Converting a folder of SVG icons into React components with a plain Node script
A developer describes a way to turn SVG icon files into React components without relying on SVGR or a bundler plugin. This approach suits projects where build configuration is locked down, where a package ships plain JavaScript, or where readable component files are preferred. Converting SVG markup to JSX requires handling differences such as hyphenated attributes becoming camelCase, class becoming className, inline style strings becoming objects, and removing XML declarations, comments and editor metadata. The article provides a Node script that reads a directory of SVG files, applies these transformations, and writes a component file per icon along with an index file for exports. The script's only runtime dependency is React, and the generated components accept a size prop and spread other props onto the root SVG element.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in