search

coma / svg-reactify

Transform SVG files into React elements
MIT License
41 stars 13 forks source link

Convert attributes to camelCased #2

Closed andersaloof closed 8 years ago

andersaloof commented 8 years ago

I'm trying to use an svg with the following rect element:

<rect x="1.25" y="6.15" width="38.36" height="49.53" rx="4.39" ry="4.39" fill="#546d60" stroke="#303030" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/>

This is transformed to:

React.createElement("rect", { x: "1.25", y: "6.15", width: "38.36", height: "49.53", rx: "4.39", ry: "4.39", fill: "#546d60", stroke: "#303030", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2.5" }),

But stroke-linecap, stroke-linejoin and stroke-width isn't included in the generated , so the icon doesn't look like it's supposed to.

Would be nice if this transform would convert SVG attributes to camelCases properties, like this:

React.createElement("rect", { x: "1.25", y: "6.15", width: "38.36", height: "49.53", rx: "4.39", ry: "4.39", fill: "#546d60", stroke: "#303030", "strokeLinecap": "round", "strokeLinejoin": "round", "strokeWidth": "2.5" }),

Or maybe only camelize attributes supported by React according to the docs (https://facebook.github.io/react/docs/tags-and-attributes.html#svg-attributes)

andersaloof commented 8 years ago

I've made a PR for this now..

coma commented 8 years ago

https://github.com/coma/svg-reactify/pull/3