Skip to content
Make React components from your plain SVG files
Branch: master
Clone or download
Latest commit 4d84351 Jun 14, 2017


Utils for generating react components from plain svg files
(compatible with react-native)


# install package globally
npm install -g msvgc


# provide for utils
msvgc -f ./path/to/pic.svg -o ./svgComponents/

--camelCase flag creates components with camel-case class names

--react-native flag creates components using react-native-svg library

--color flag creates react-native components with color props passed to the svg children's fill prop

--typescript flag will use typescript import statements e.g. (import * as React)

--coffeescript flag will use CoffeeScript CJSX syntax for creating components


If default params are not set, the current working directory will be used as the path to .svg files with output in the ./svg directory.

Subdirectories containing .svg files will generate their corresponding react components within a subdirectory in the output path.

The output path contains an index.js that exports all generated components.

React JS:

Use generated components in your jsx/tsx/cjsx files:


import Pic from './svgComponents/Pic'

class MyComponent extends Component {
  render() {
    return (
        <Pic width={300} height={100} />
        <p>Lorem ipsum...</p>



  • Create index file in target component directory.
    • Provide warning when duplicate component names exist in the index.
  • Compare existing files in target component directory.
You can’t perform that action at this time.