https://github.com/goopscoop/svg-to-react-cli

A command line utility that takes a svg image file and outputs a fully formatted stateless functional React component file that can be used to render your image.
https://github.com/goopscoop/svg-to-react-cli

Last synced: about 2 months ago
JSON representation

A command line utility that takes a svg image file and outputs a fully formatted stateless functional React component file that can be used to render your image.

• Host: GitHub
• URL: https://github.com/goopscoop/svg-to-react-cli
• Owner: goopscoop
• License: mit
• Created: 2016-10-28T23:39:31.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-14T15:43:55.000Z (almost 7 years ago)
• Last Synced: 2024-05-16T10:42:15.088Z (4 months ago)
• Language: JavaScript
• Size: 29.3 KB
• Stars: 121
• Watchers: 5
• Forks: 36
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svg-to-react-cli

A command line utility that takes a svg image file and outputs a fully formatted stateless functional React component with `height` and `width` for props. With flags to toggle formatting and remove style attributes.

## To Use

`npm install -g svg-to-react-cli`

### One File

`svgtoreact  `

**NOTE**: image file must be in current working directory. Do not add the extention. If file is `image.svg`, then just enter `image` as the first argument. ComponentName will be the name of the sfc and filename with `.js` appended.

### Multi File

`svgtoreact dir`

or for all files in directory (will name all components in CamelCase based on image name. If image is `image.svg` then new component will be `Image` and file will be `Image.js`):

## Flags

Or use flags: `svgtoreact   --output ./components/svgComponents/ --no-format --rm-style`

**Optional Flags:**

`-o, --output ` - the output path. Do not include the filename.

`--no-format` - will skip line breaks and indentation to svg. If your svg is already formatted, use this flag.

`--rm-style` - removes all style attributes from svg tags.

`--help` - Prints out this readme.

`--example` - Prints an example of the i/o of this util.

## Example

Takes this:

```html

```

And creates a new file with this:

```javascript

import React from 'react';

export default function NewThing(props) {

  return (

    

  

    

      

      

        

        

      

    

  

  

  

  

    

    

  

  );

}

```

## Width / height order of precedence

The order of precedence of how width/height is set on a generated component is as follows:

 - 1 - Passed in width and height props are always priority one. This gives run time control to the container.

 - 2 - If a svg has its width/height set, this will be the first fallback if width/height props are not provided.

 - 3 - If the svg has not provided width/height attributes, the svg's viewbox's width/height segments are used as the fallback if width/height props are not provided.

 - 4 - Finally, if the svg has no width/height attributes, and the svg also doesn't have a viewbox - a fallback of 50px is applied to the width and height