Transform SVGs into React component module files

Usage no npm install needed!

<script type="module">
  import mapboxSvgReactTransformerWriter from 'https://cdn.skypack.dev/@mapbox/svg-react-transformer-writer';



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.