https://github.com/nalchevanidze/svg-json-parser

Convert SVG to JSON Format. it is useful for React SVG icons.
https://github.com/nalchevanidze/svg-json-parser

Last synced: 14 days ago
JSON representation

Convert SVG to JSON Format. it is useful for React SVG icons.

• Host: GitHub
• URL: https://github.com/nalchevanidze/svg-json-parser
• Owner: nalchevanidze
• Created: 2016-07-30T14:54:40.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-13T22:21:33.000Z (over 7 years ago)
• Last Synced: 2024-11-07T10:52:44.963Z (2 months ago)
• Language: JavaScript
• Size: 54.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svg-json-parser

this App Converts SVG Element to JSON.

```html

npm install svg-json-parser;

var svgParser = require("svg-json-parser");

app.json.lib('lib.svg','Output file path Without .json');

```

converted Object

```html


{

  node:"svg",

  id:"svglib",

  children:[

    {"node":"g",id:apple,children:[{node:"path",attr:{d:"M10..",fill="red"}},.....]},

    {"node":"path",id:orange,attr:{fill="#FF3456"}},

    .....

  ]

}

```

lib method 


returns SVG elements as the properties of the object, will be included only elements with ID attribute; only direct children need id Attributes. and can be passed only: SVG or SVG "defs" element.

```html

  // it not, no id  

    

        

        

    

    

    .......

var  svglib = svgParser.json.lib();

{

  work:{

    node:"g",

    id:"work",

    children:[

      {"node":"path",attr{"d":"M0..."}},

      {"node":"path",attr{"d":"M0..."}}

    ]

  },

  gmail:{

    node:"path",

    id:"gmail",

    attr{"d":"M0..."}}

  },.....

}

```

you can use lib object in react:


```html

class Icon extends React.Component {

  render(){

    var s = svglib[this.props.id];

    if(s.node=="g"){return ({sv.children.map((e,i)=>)});}

    else if(s.node=="path"){return ();}

  }

}

```