Support style attribute in SVGs

limesquid · Aug 21, 2018 · e0c30a8 · e0c30a8
1 parent 3633574
commit e0c30a8
Show file tree

Hide file tree

Showing 11 changed files with 1,142 additions and 304 deletions.
diff --git a/src/__tests__/data/convert-svg-to-component/output/file1.js b/src/__tests__/data/convert-svg-to-component/output/file1.js
@@ -1,15 +1,15 @@
 import React from 'react';
 
 const Component = () => (
-  <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+  <svg width={16} height={14} viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
     <title>Icons/16x16/toolbar/green/img-contained</title>
     <desc>Created with Sketch.</desc>
     <defs />
-    <g id="Brand" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+    <g id="Brand" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
       <g id="Artboard" transform="translate(-9.000000, -48.000000)">
         <g id="Icons/16x16/toolbar/green/img-contained" transform="translate(9.000000, 47.000000)">
           <g>
-            <rect id="shape-hold" x="0" y="0" width="16" height="16" />
+            <rect id="shape-hold" x={0} y={0} width={16} height={16} />
             <path d="M0.5,4 L15.5,4 C15.7761424,4 16,4.22385763 16,4.5 L16,11.5 C16,11.7761424 15.7761424,12 15.5,12 L0.5,12 C0.223857625,12 3.38176876e-17,11.7761424 0,11.5 L0,4.5 C-3.38176876e-17,4.22385763 0.223857625,4 0.5,4 Z M0.5,13.5 L15.5,13.5 C15.7761424,13.5 16,13.7238576 16,14 L16,14.5 C16,14.7761424 15.7761424,15 15.5,15 L0.5,15 C0.223857625,15 3.38176876e-17,14.7761424 0,14.5 L0,14 C-3.38176876e-17,13.7238576 0.223857625,13.5 0.5,13.5 Z M0.5,1 L15.5,1 C15.7761424,1 16,1.22385763 16,1.5 L16,2 C16,2.27614237 15.7761424,2.5 15.5,2.5 L0.5,2.5 C0.223857625,2.5 3.38176876e-17,2.27614237 0,2 L0,1.5 C-3.38176876e-17,1.22385763 0.223857625,1 0.5,1 Z" id="icon.image-align-left" fill="#02ab5c" />
           </g>
         </g>

diff --git a/src/__tests__/data/convert-svg-to-component/output/file2.js b/src/__tests__/data/convert-svg-to-component/output/file2.js
@@ -3,15 +3,15 @@ import React, { Component } from 'react';
 class ComponentComponent extends Component {
   render() {
     return (
-      <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+      <svg width={16} height={14} viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
         <title>Icons/16x16/toolbar/green/img-contained</title>
         <desc>Created with Sketch.</desc>
         <defs />
-        <g id="Brand" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="Brand" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
           <g id="Artboard" transform="translate(-9.000000, -48.000000)">
             <g id="Icons/16x16/toolbar/green/img-contained" transform="translate(9.000000, 47.000000)">
               <g>
-                <rect id="shape-hold" x="0" y="0" width="16" height="16" />
+                <rect id="shape-hold" x={0} y={0} width={16} height={16} />
                 <path d="M0.5,4 L15.5,4 C15.7761424,4 16,4.22385763 16,4.5 L16,11.5 C16,11.7761424 15.7761424,12 15.5,12 L0.5,12 C0.223857625,12 3.38176876e-17,11.7761424 0,11.5 L0,4.5 C-3.38176876e-17,4.22385763 0.223857625,4 0.5,4 Z M0.5,13.5 L15.5,13.5 C15.7761424,13.5 16,13.7238576 16,14 L16,14.5 C16,14.7761424 15.7761424,15 15.5,15 L0.5,15 C0.223857625,15 3.38176876e-17,14.7761424 0,14.5 L0,14 C-3.38176876e-17,13.7238576 0.223857625,13.5 0.5,13.5 Z M0.5,1 L15.5,1 C15.7761424,1 16,1.22385763 16,1.5 L16,2 C16,2.27614237 15.7761424,2.5 15.5,2.5 L0.5,2.5 C0.223857625,2.5 3.38176876e-17,2.27614237 0,2 L0,1.5 C-3.38176876e-17,1.22385763 0.223857625,1 0.5,1 Z" id="icon.image-align-left" fill="#02ab5c" />
               </g>
             </g>

diff --git a/src/__tests__/data/convert-svg-to-component/output/file3.js b/src/__tests__/data/convert-svg-to-component/output/file3.js
@@ -2,15 +2,15 @@ import React from 'react';
 
 function Component() {
   return (
-    <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+    <svg width={16} height={14} viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
       <title>Icons/16x16/toolbar/green/img-contained</title>
       <desc>Created with Sketch.</desc>
       <defs />
-      <g id="Brand" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Brand" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
         <g id="Artboard" transform="translate(-9.000000, -48.000000)">
           <g id="Icons/16x16/toolbar/green/img-contained" transform="translate(9.000000, 47.000000)">
             <g>
-              <rect id="shape-hold" x="0" y="0" width="16" height="16" />
+              <rect id="shape-hold" x={0} y={0} width={16} height={16} />
               <path d="M0.5,4 L15.5,4 C15.7761424,4 16,4.22385763 16,4.5 L16,11.5 C16,11.7761424 15.7761424,12 15.5,12 L0.5,12 C0.223857625,12 3.38176876e-17,11.7761424 0,11.5 L0,4.5 C-3.38176876e-17,4.22385763 0.223857625,4 0.5,4 Z M0.5,13.5 L15.5,13.5 C15.7761424,13.5 16,13.7238576 16,14 L16,14.5 C16,14.7761424 15.7761424,15 15.5,15 L0.5,15 C0.223857625,15 3.38176876e-17,14.7761424 0,14.5 L0,14 C-3.38176876e-17,13.7238576 0.223857625,13.5 0.5,13.5 Z M0.5,1 L15.5,1 C15.7761424,1 16,1.22385763 16,1.5 L16,2 C16,2.27614237 15.7761424,2.5 15.5,2.5 L0.5,2.5 C0.223857625,2.5 3.38176876e-17,2.27614237 0,2 L0,1.5 C-3.38176876e-17,1.22385763 0.223857625,1 0.5,1 Z" id="icon.image-align-left" fill="#02ab5c" />
             </g>
           </g>

diff --git a/src/__tests__/data/convert-svg-to-component/output/file4.js b/src/__tests__/data/convert-svg-to-component/output/file4.js
@@ -1,9 +1,9 @@
 import React from 'react';
 
 const Component = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" id="Flag of Poland" viewBox="0 0 16 10">
-    <rect width="16" height="10" fill="#fff" />
-    <rect width="16" height="5" fill="#dc143c" y="5" />
+  <svg xmlns="http://www.w3.org/2000/svg" width={1280} height={800} id="Flag of Poland" viewBox="0 0 16 10">
+    <rect width={16} height={10} fill="#fff" />
+    <rect width={16} height={5} fill="#dc143c" y={5} />
   </svg>
 );
 

diff --git a/src/__tests__/data/convert-svg-to-component/output/file5.js b/src/__tests__/data/convert-svg-to-component/output/file5.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Component = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xmlSpace="preserve" width="512px" height="512px">
+  <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x={0} y={0} viewBox="0 0 512 512" style={{ enableBackground: 'new 0 0 512 512' }} xmlSpace="preserve" width={512} height={512}>
     <g>
       <g>
         <g>

diff --git a/src/__tests__/data/convert-svg-to-component/output/file6.js b/src/__tests__/data/convert-svg-to-component/output/file6.js
@@ -2,9 +2,9 @@ import React from 'react';
 
 const Component = () => (
   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-    <g fill="white" stroke="green" strokeWidth="5">
-      <circle cx="40" cy="40" r="25" />
-      <circle cx="60" cy="60" r="25" />
+    <g fill="white" stroke="green" strokeWidth={5}>
+      <circle cx={40} cy={40} r={25} />
+      <circle cx={60} cy={60} r={25} />
     </g>
   </svg>
 );

diff --git a/src/__tests__/data/convert-svg-to-component/output/file7.js b/src/__tests__/data/convert-svg-to-component/output/file7.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Component = () => (
-  <svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" enableBackground="new 0 0 40 40" xmlSpace="preserve">
+  <svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x={0} y={0} viewBox="0 0 40 40" enableBackground="new 0 0 40 40" xmlSpace="preserve">
     <path fill="#363636" d="M20-0.083C8.908-0.083-0.083,8.908-0.083,20c0,11.093,8.992,20.083,20.083,20.083
       c11.093,0,20.083-8.99,20.083-20.083C40.083,8.908,31.093-0.083,20-0.083z M30.063,15.384c0.165,2.41-0.589,7.562-4.397,11.425
       c-3.81,3.864-9.767,3.753-9.767,3.753c-5.792,0-8.374-2.097-8.374-2.097c4.967,0.091,7.359-2.115,7.359-2.115