CHG: inline rotate svg as jsx

Author: dr-js

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-rotatable-draggable",
-  "version": "0.2.0",
+  "version": "0.3.0-dev.0",
   "description": "A rectangle react component which can be resized and rotated",
   "author": "MockingBot",
   "license": "MIT",

package.json

@@ -61,17 +61,6 @@ export default styled.div`
     left: 50%;
     top: -26px;
     transform: translateX(-50%);
-
-    & i {
-      font-size: 18px;
-      display: inline-block;
-      width: 1em;
-      height: 1em;
-      background-size: 1em 1em;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNOC4zIDUuNEw4IC40bDMuMiAyLjEgMS43IDF6Ii8+PG1hc2sgaWQ9ImIiIHg9IjAiIHk9IjAiIHdpZHRoPSI0LjkiIGhlaWdodD0iNC45IiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBzdHJva2U9IiNGNTVENTQiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTExIDkuMkE2IDYgMCAwIDEgMCA2YTYgNiAwIDAgMSAxMC43LTMuOCIvPjx1c2UgbWFzaz0idXJsKCNiKSIgc3Ryb2tlLXdpZHRoPSIyIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAyMSAwKSIgeGxpbms6aHJlZj0iI2EiLz48L2c+PC9zdmc+Cg==");
-    }
   }
 
   .t,

src/Rect/StyledRect.js

@@ -161,7 +161,13 @@ export default class Rect extends PureComponent {
         {
           rotatable &&
           <div className="rotate" onMouseDown={this.startRotate}>
-            <i />
+            <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M10.536 3.464A5 5 0 1 0 11 10l1.424 1.425a7 7 0 1 1-.475-9.374L13.659.34A.2.2 0 0 1 14 .483V5.5a.5.5 0 0 1-.5.5H8.483a.2.2 0 0 1-.142-.341l2.195-2.195z"
+                fill="#eb5648"
+                fillRule="nonzero"
+              />
+            </svg>
           </div>
         }