SVG Converter

convert-svg-react:
Javascript module that allows you to use inline svg's in your ReactJS projects. Converts all the attributes and elements to proper JSX.

#### WHY?
Was started because I wanted to use inline SVG as XML with ReactJS, but when ReactJS complains of all the attributes that need to be changed like className and inline styling it gets difficult to remember everything that needs to be changed. This will do it all for you.

- You can take your Adobe Ai svg file and paste it, or even link your .svg file. Will output new svg xml markup to be copied into your React project. This works with CommonJS / NodeJS or client side with ReactJS.

Installation

Use with npm:

``
npm install --save convert-svg-react
`




Usage Example Client (ReactJS):

$3

 * Used backticks to wrap the string else string has to be in one single line wraped with quotes

`js
import React from 'react';
import ReactDOM from 'react-dom';
import Convert from 'convert-svg-react'


const svgString =

function App(props) {
return (
<>


);
}

ReactDOM.render(
,
document.getElementById('app')
);
`

Usage Example Client (ReactJS):

$3

 * Returns a promise

- FIRST Make sure to have a file loader like file-loader or url-loader in your ReactJS project, and set up your limit to a large file in webpack.config.js :

`js
{
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 100000,
},
},
]
}
`

`js

import svgFile from '../public/alarm-gradient.svg'
import convert from 'convert-svg-react'

function App(props) {
const [svg, setSvg] = useState('')

useEffect(()=> {
// Returns a promise
convert(svgFile).then(svg => setSvg(svg))
},[])

return (
<>
{/ Will display your converted code for copying as well as your svg /}
{svg && svg}

);
}

ReactDOM.render(
,
document.getElementById('app')
);
`

$3

* Your actual svg converted
* Converted svg / xml to be copied for React

!Alt text




$3

!Alt text

Usage CommonJS (NodeJS)

$3

`js
const convert = require('convert-svg-react');
convert('./path/tosvg/file.svg');
`

$3

`javascript
const convert = require('convert-svg-react');
convert(

);
`

$3


* After the file path arguement is given and everything goes well you will receieve output in the terminal:
Open browswer http://localhost:8002/

* Open browser http://localhost:8002/
* Properly indented
* Attributes changed for JSX
* Elements on their own lines
* Converted inline style to jsx insline styling
* Inline CSS Style element interpolation: {