Merge pull request #14 from pr1mer-tech/react-patch

React support

Author: arguiot

package.json

@@ -35,5 +35,8 @@
 		"gulp-uglify-es": "^1.0.1",
 		"gulp4-run-sequence": "^1.0.0",
 		"vinyl-source-stream": "^2.0.0"
+	},
+	"dependencies": {
+		"react": "^16.13.1"
 	}
 }

react.js

@@ -0,0 +1,3 @@
+import LunarIcon from "./src/react-component";
+
+export default LunarIcon

src/icon.js

@@ -73,4 +73,21 @@ module.exports = class Icon {
     toString() {
         return this.toSVG().toString()
     }
+
+    /**
+     * Generate an icon's SVG
+	 * @param  {object}      attr Attributes to add to SVG
+     * @return {String}      HTML string of SVG
+     */
+    toSVGString(attr) {
+        attr = Object.assign({}, this.attr, attr)
+        if (attr.class) attr.class += ' lunar-icons'
+        else attr.class = 'lunar-icons'
+
+        let attributes = ''
+        for (let a in attr) attributes += `${a}="${attr[a]}" `
+
+        let str = `<svg ${attributes}>${this.path}</svg>`
+        return str
+    }
 }

src/react-component.js

@@ -0,0 +1,8 @@
+const icon = require('./icon.js');
+import React from 'react'
+
+export default function LunarIcon(props) {
+    return React.createElement("lunar-icon", { className: "lunar-icons", dangerouslySetInnerHTML: { __html: new icon(props.icon).toSVGString({
+        style: "width: 100%; height: 100%"
+    }) }, style: { width: "1em", minWidth: "1em", height: "1em", minHeight: "1em" } })
+}