convert-svg-react
Version:
Converts SVG XML code to be used as ReactJS component.
176 lines (135 loc) • 6.24 kB
Markdown
# 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 <convert-svg-react>
Use with [npm](http://npmjs.com):
```
npm install --save convert-svg-react
```
## Usage Example Client (ReactJS):
### From string easiest and fastest:
* 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 = `
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-right-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5
0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
</svg>
`
function App(props) {
return (
<>
<Convert string={svgString}/>
</>
);
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
```
## Usage Example Client (ReactJS):
### From external file - path:
* Returns a promise
- FIRST Make sure to have a file loader like [file-loader](https://www.npmjs.com/package/file-loader) or [url-loader](https://www.npmjs.com/package/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(
<App />,
document.getElementById('app')
);
```
### Renders as such:
* Your actual svg converted
* Converted svg / xml to be copied for React
### Live example from svg file:
## Usage CommonJS (NodeJS)
### From external file:
```js
const convert = require('convert-svg-react');
convert('./path/tosvg/file.svg');
```
### From string file:
```javascript
const convert = require('convert-svg-react');
convert(`<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-right-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
</svg>`);
```
### Converted:
* 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: `{<Style ....>}`
```xml
<div className="alarm-robot">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 551.1 551.2" xmlSpace="preserve">
<style type="text/css">{
".st0{fill:#176096;}"+
".st1{fill:url(#body_1_);}"+
".st2{stroke:#000000;stroke-width:34;stroke-linecap:round;stroke-miterlimit:10;}"
}</style>
<path id="left-ring" className="st0" d="M150.2,64.6C99.2,91,57.6,132.9,31.6,184.1c-4.9-3.4-9.4-7.4-13.5-12
c-28.4-32.5-22.7-84,12.7-115c35.4-31,87.2-29.7,115.6,2.8C147.8,61.4,149,63,150.2,64.6z"/>
<path id="right-ring" className="st0" d="M533,172.1c-3.9,4.5-8.2,8.3-12.9,11.6c-26.1-51.2-67.9-93.1-119-119.4c1.1-1.5,2.3-3,3.5-4.4
c28.4-32.5,80.2-33.7,115.6-2.8C555.8,88.1,561.5,139.6,533,172.1z"/>
<linearGradient id="body_1_" gradientUnits="userSpaceOnUse" x1="275.9758" y1="551.1533" x2="275.9758" y2="-9.094947e-13">
<stop offset="0" style={{stopColor:"#000000",stopOpacity:"0",}}/>
<stop offset="1" style={{stopColor:"#176096",stopOpacity:"0.8567",}}/>
</linearGradient>
<path id="body" className="st1" d="M421.8,497.5c56.7-43.7,93.2-112.3,93.2-189.4c0-120.2-88.8-219.7-204.3-236.5V33.8h16.8
c9.3,0,16.9-7.6,16.9-16.9v0c0-9.3-7.6-16.9-16.9-16.9H224.6c-9.3,0-16.9,7.6-16.9,16.9v0c0,9.3,7.6,16.9,16.9,16.9h16.8v37.8
C125.7,88.4,37,187.8,37,308.1c0,77.5,36.9,146.4,94.1,190.1L106.2,523c-6.4,6.4-6.4,16.9,0,23.3c3.2,3.2,7.5,4.8,11.7,4.8
c4.2,0,8.4-1.6,11.7-4.8l29.7-29.7c34.5,19.4,74.4,30.4,116.8,30.4c42.8,0,83-11.2,117.7-31l30.2,30.2c3.2,3.2,7.4,4.8,11.7,4.8
c4.2,0,8.4-1.6,11.7-4.8c6.4-6.5,6.4-16.9,0-23.3L421.8,497.5z M386.3,485.4c-4.8,3-9.8,5.8-14.9,8.5c-28.6,14.7-61.1,23-95.5,23
c-34,0-66.1-8.1-94.5-22.5c-5.1-2.6-10.1-5.4-14.9-8.4c-4.8-2.9-9.4-6.1-13.9-9.4c-51.8-38-85.5-99.3-85.5-168.5
c0-115.3,93.5-208.8,208.8-208.8s208.8,93.5,208.8,208.8c0,68.8-33.3,129.8-84.6,167.8C395.7,479.3,391.1,482.4,386.3,485.4z"/>
<g id="hands">
<line className="st2" x1="280" y1="308.5" x2="280" y2="198.3"/>
<line className="st2" x1="280" y1="308.5" x2="224.8" y2="403.8"/>
</g>
</svg>
</div>
```
## Actual file output CommonJS (NodeJS):
