Transform SVGs into React component module files


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
412Nov 9, 2020Jun 17, 2017Minified + gzip package size for @mapbox/svg-react-transformer-writer in KB



Transform SVG files into React component module files.

Provides a Node API and a CLI. Runs SVG files through the toComponentModule function of svg-react-transformer, then writes the React component modules to new files.


npm install @mapbox/svg-react-transformer-writer

Node API


svgReactTransformerWriter(files, outDir, [options])

Returns a Promise that resolves when all output files have been written.


Type: string | Array<string>. Required.

Globs that point to your SVG files. Files without an .svg extension are automatically ignored.


Type: string. Required.

Path to an output directory where React component module files will be written.


Type: Object.

You can pass all of the options from toComponentModule (e.g. SVGO plugins, a component template). The name option is automatically provided, derived from the basename of each input SVG file.

The following are additional options:


Type: (svgBasename: string) => string. Default: x => x.

Determines the filenames of output React component modules. Receives the input SVG file basename as an argument; should return the JS basename you want. The default value is an identity function, so foo-bar_baz.svg becomes foo-bar_baz.js.


The CLI allows you to do everything the Node API does by providing the option to load a configuration module that exports an options object.

Run --help for details.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.