Repository: govuk-react/govuk-react
Pull request #1155 (2022-09-23 09:49:30)

Fix inline styling breaking CSPs
Hiya 👋 We're currently using `govuk-react` on a project with a strict [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). The CSP directive [style-src](https://content-security-policy.com/style-src/) has been causing us some grief due to the fact that there were three instances (`Document Footer Metadata`, `Spinner` and `SVGBase`) of inline styling in this library.

I've replaced these inline styles with `styled-components` styling 💅 which you use everywhere else. There should be no change to the behaviour of any of the components, visual or interactive.

Thank you. Big fans of this library! 😄 💯 

**Checklist**:
* [X] Documentation - N/A
* [X] Tests
* [X] Ready to be merged


codecov-commenter: # [Codecov](https://codecov.io/gh/govuk-react/govuk-react/pull/1155?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react) Report
Base: **99.06**% // Head: **99.07**% // Increases project coverage by **`+0.00%`** :tada:
> Coverage data is based on head [(`1ae7971`)](https://codecov.io/gh/govuk-react/govuk-react/pull/1155?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react) compared to base [(`d2027f1`)](https://codecov.io/gh/govuk-react/govuk-react/commit/d2027f1d7f07f29e05391d05e77659de7f72729a?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react).
> Patch coverage: 100.00% of modified lines in pull request are covered.

<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff           @@
##             main    #1155   +/-   ##
=======================================
  Coverage   99.06%   99.07%           
=======================================
  Files         112      112           
  Lines         860      863    +3     
  Branches      245      245           
=======================================
+ Hits          852      855    +3     
  Misses          8        8           
```


| [Impacted Files](https://codecov.io/gh/govuk-react/govuk-react/pull/1155?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react) | Coverage Δ | |
|---|---|---|
| [components/document-footer-metadata/src/index.tsx](https://codecov.io/gh/govuk-react/govuk-react/pull/1155/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react#diff-Y29tcG9uZW50cy9kb2N1bWVudC1mb290ZXItbWV0YWRhdGEvc3JjL2luZGV4LnRzeA==) | `100.00% <100.00%> (ø)` | |
| [packages/icons/src/SVGBase/index.tsx](https://codecov.io/gh/govuk-react/govuk-react/pull/1155/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react#diff-cGFja2FnZXMvaWNvbnMvc3JjL1NWR0Jhc2UvaW5kZXgudHN4) | `100.00% <100.00%> (ø)` | |
| [packages/icons/src/Spinner/index.tsx](https://codecov.io/gh/govuk-react/govuk-react/pull/1155/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react#diff-cGFja2FnZXMvaWNvbnMvc3JjL1NwaW5uZXIvaW5kZXgudHN4) | `100.00% <100.00%> (ø)` | |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/govuk-react/govuk-react/pull/1155?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=govuk-react).

tomvaughan77: Looks like it's disappeared some of the svg icons. Will fix that now
tomvaughan77: Forgot to update the snapshots following the fix to `SVGBase` 🤦 CI (hopefully) should pass now

Patch:
diff --git a/components/document-footer-metadata/src/index.tsx b/components/document-footer-metadata/src/index.tsx
index db3b3591..7d9024bc 100644
--- a/components/document-footer-metadata/src/index.tsx
+++ b/components/document-footer-metadata/src/index.tsx
@@ -23,6 +23,10 @@ const StyledDefinition = styled('li')({
   },
 });
 
+const StyledParagraph = styled('p')({
+  marginBottom: 0,
+});
+
 /**
  * An ordered list of documents including a document type, when updated and a link.
  *
@@ -39,7 +43,7 @@ export const DocumentFooterMetadata: React.FC<DocumentFooterMetadataProps> = ({
     <StyledContainer>
       {from && (
         <div>
-          <p style={{ marginBottom: 0 }}>From:</p>
+          <StyledParagraph>From:</StyledParagraph>
           <UnorderedList listStyleType="none">
             {from &&
               from.map((child, i) => (
@@ -57,7 +61,7 @@ export const DocumentFooterMetadata: React.FC<DocumentFooterMetadataProps> = ({
     <StyledContainer>
       {partOf && (
         <div>
-          <p style={{ marginBottom: 0 }}>Part of:</p>
+          <StyledParagraph>Part of:</StyledParagraph>
           <UnorderedList listStyleType="none">
             {Array.isArray(partOf) &&
               React.Children.map(partOf, (child, i) => <StyledDefinition>{child}</StyledDefinition>)}
@@ -72,7 +76,7 @@ export const DocumentFooterMetadata: React.FC<DocumentFooterMetadataProps> = ({
       {other &&
         other.map((item) => (
           <div key={item.id}>
-            <p style={{ marginBottom: 0 }}>{item.title}:</p>
+            <StyledParagraph>{item.title}:</StyledParagraph>
             <UnorderedList listStyleType="none">
               <StyledDefinition>{item.content}</StyledDefinition>
             </UnorderedList>
diff --git a/packages/icons/src/SVGBase/index.tsx b/packages/icons/src/SVGBase/index.tsx
index 2c391731..e3696924 100644
--- a/packages/icons/src/SVGBase/index.tsx
+++ b/packages/icons/src/SVGBase/index.tsx
@@ -1,4 +1,5 @@
 import React, { SVGProps as SVGPropsBase } from 'react';
+import styled from 'styled-components';
 
 export interface SVGProps extends SVGPropsBase<SVGSVGElement> {
   children?: React.ReactNode;
@@ -7,11 +8,15 @@ export interface SVGProps extends SVGPropsBase<SVGSVGElement> {
   width?: string;
 }
 
+const StyledSvg = styled('svg')<any>({
+  display: 'block',
+});
+
 const SVG: React.FC<SVGProps> = ({ children, title, ...rest }: SVGProps) => (
-  <svg version="1.1" height="100%" style={{ display: 'block' }} {...rest}>
+  <StyledSvg version="1.1" height="100%" {...rest}>
     <title>{title}</title>
     {children}
-  </svg>
+  </StyledSvg>
 );
 SVG.defaultProps = {
   children: undefined,
diff --git a/packages/icons/src/Spinner/index.tsx b/packages/icons/src/Spinner/index.tsx
index ab9bd90d..187b76d2 100644
--- a/packages/icons/src/Spinner/index.tsx
+++ b/packages/icons/src/Spinner/index.tsx
@@ -12,8 +12,13 @@ const fadeInOut = keyframes`
   100% { opacity: 0.250075; }
 `;
 
-const Rect = styled.rect`
+interface RectProps {
+  animationDelay: number;
+}
+
+const Rect = styled.rect<RectProps>`
   animation: ${fadeInOut} 1s infinite linear;
+  animation-delay: ${(props) => props.animationDelay * 83}ms;
 `;
 
 interface SpinnerProps extends SVGProps {
@@ -40,7 +45,7 @@ const Spinner: React.FC<SpinnerProps> = ({ className, fill, title, ...rest }: Sp
           height="5"
           rx="2.5"
           ry="2.5"
-          style={{ animationDelay: `${i * 83}ms` }}
+          animationDelay={i}
           transform={`rotate(${i * 30}, 0, 2) translate(10 0)`}
           opacity="0"
           /* eslint-disable-next-line react/no-array-index-key */


Test patch:
diff --git a/components/document-footer-metadata/src/__snapshots__/test.tsx.snap b/components/document-footer-metadata/src/__snapshots__/test.tsx.snap
index 4fd62cab..4e9d1645 100644
--- a/components/document-footer-metadata/src/__snapshots__/test.tsx.snap
+++ b/components/document-footer-metadata/src/__snapshots__/test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DocumentFooterMetadata matches snapshot: enzyme.mount 1`] = `
-.c2 {
+.c3 {
   font-family: "nta",Arial,sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -15,7 +15,7 @@ exports[`DocumentFooterMetadata matches snapshot: enzyme.mount 1`] = `
   padding-left: 0;
 }
 
-.c1 .c1 {
+.c2 .c2 {
   margin-top: 10px;
 }
 
@@ -23,39 +23,43 @@ exports[`DocumentFooterMetadata matches snapshot: enzyme.mount 1`] = `
   font-family: "nta",Arial,sans-serif;
 }
 
-.c3 {
+.c4 {
   font-size: 24px;
   font-weight: 700;
   line-height: 1.25;
 }
 
-.c3 > a {
+.c4 > a {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.c1 {
+  margin-bottom: 0;
+}
+
 @media print {
-  .c2 {
+  .c3 {
     font-size: 14px;
     line-height: 1.15;
   }
 }
 
 @media only screen and (min-width:641px) {
-  .c2 {
+  .c3 {
     font-size: 19px;
     line-height: 1.3157894736842106;
   }
 }
 
 @media print {
-  .c2 {
+  .c3 {
     color: #000;
   }
 }
 
 @media only screen and (min-width:641px) {
-  .c2 {
+  .c3 {
     margin-bottom: 20px;
   }
 }
@@ -82,15 +86,13 @@ exports[`DocumentFooterMetadata matches snapshot: enzyme.mount 1`] = `
           className="c0"
         >
           <div>
-            <p
-              style={
-                Object {
-                  "marginBottom": 0,
-                }
-              }
-            >
-              Part of:
-            </p>
+            <src__StyledParagraph>
+              <p
+                className="c1"
+              >
+                Part of:
+              </p>
+            </src__StyledParagraph>
             <UnorderedList
               listStyleType="none"
             >
@@ -99,13 +101,13 @@ exports[`DocumentFooterMetadata matches snapshot: enzyme.mount 1`] = `
                 listStyleType="none"
               >
                 <ul
-                  className="c1 c2"
+                  className="c2 c3"
                 >
                   <src__StyledDefinition
                     key=".0"
                   >
                     <li
-                      className="c3"
+                      className="c4"
                     >
                       example
                     </li>
@@ -114,7 +116,7 @@ exports[`DocumentFooterMetadata matches snapshot: enzyme.mount 1`] = `
                     key=".1"
                   >
                     <li
-                      className="c3"
+                      className="c4"
                     >
                       exampleexample
                     </li>
diff --git a/components/search-box/src/__snapshots__/test.tsx.snap b/components/search-box/src/__snapshots__/test.tsx.snap
index 580117e1..6e6fd2d4 100644
--- a/components/search-box/src/__snapshots__/test.tsx.snap
+++ b/components/search-box/src/__snapshots__/test.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SearchBox matches wrapper snapshot: wrapper mount 1`] = `
+.c3 {
+  display: block;
+}
+
 .c1 {
   width: 100%;
   height: 40px;
@@ -99,25 +103,29 @@ exports[`SearchBox matches wrapper snapshot: wrapper mount 1`] = `
                 viewBox="0 0 57 57"
                 width="100%"
               >
-                <svg
+                <SVGBase__StyledSvg
                   fill="#ffffff"
                   height="100%"
-                  style={
-                    Object {
-                      "display": "block",
-                    }
-                  }
                   version="1.1"
                   viewBox="0 0 57 57"
                   width="100%"
                 >
-                  <title>
-                    Search
-                  </title>
-                  <path
-                    d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"
-                  />
-                </svg>
+                  <svg
+                    className="c3"
+                    fill="#ffffff"
+                    height="100%"
+                    version="1.1"
+                    viewBox="0 0 57 57"
+                    width="100%"
+                  >
+                    <title>
+                      Search
+                    </title>
+                    <path
+                      d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"
+                    />
+                  </svg>
+                </SVGBase__StyledSvg>
               </SVG>
             </Search>
           </button>
diff --git a/components/warning-text/src/__snapshots__/test.tsx.snap b/components/warning-text/src/__snapshots__/test.tsx.snap
index b7285ee4..daf0e3b1 100644
--- a/components/warning-text/src/__snapshots__/test.tsx.snap
+++ b/components/warning-text/src/__snapshots__/test.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WarningText to match snapshot 1`] = `
+.c2 {
+  display: block;
+}
+
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -24,7 +28,7 @@ exports[`WarningText to match snapshot 1`] = `
   width: 35px;
 }
 
-.c2 {
+.c3 {
   font-family: "nta",Arial,sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -40,14 +44,14 @@ exports[`WarningText to match snapshot 1`] = `
 }
 
 @media print {
-  .c2 {
+  .c3 {
     font-size: 14px;
     line-height: 1.15;
   }
 }
 
 @media only screen and (min-width:641px) {
-  .c2 {
+  .c3 {
     font-size: 19px;
     line-height: 1.3157894736842106;
   }
@@ -73,40 +77,45 @@ exports[`WarningText to match snapshot 1`] = `
               viewBox="0 0 35.000000 35.000000"
               width="100%"
             >
-              <svg
+              <SVGBase__StyledSvg
                 fill="currentColor"
                 height="100%"
                 preserveAspectRatio="xMidYMid meet"
-                style={
-                  Object {
-                    "display": "block",
-                  }
-                }
                 version="1.1"
                 viewBox="0 0 35.000000 35.000000"
                 width="100%"
               >
-                <title>
-                  icon important
-                </title>
-                <g
-                  transform="translate(0.000000,35.000000) scale(0.100000,-0.100000)"
+                <svg
+                  className="c2"
+                  fill="currentColor"
+                  height="100%"
+                  preserveAspectRatio="xMidYMid meet"
+                  version="1.1"
+                  viewBox="0 0 35.000000 35.000000"
+                  width="100%"
                 >
-                  <path
-                    d="M100 332 c-87 -48 -125 -155 -82 -232 48 -87 155 -125 232 -82 87 48
+                  <title>
+                    icon important
+                  </title>
+                  <g
+                    transform="translate(0.000000,35.000000) scale(0.100000,-0.100000)"
+                  >
+                    <path
+                      d="M100 332 c-87 -48 -125 -155 -82 -232 48 -87 155 -125 232 -82 87 48
 125 155 82 232 -48 87 -155 125 -232 82z m100 -122 c0 -53 -2 -60 -20 -60 -18
 0 -20 7 -20 60 0 53 2 60 20 60 18 0 20 -7 20 -60z m0 -111 c0 -12 -7 -19 -20
 -19 -19 0 -28 28 -14 43 11 11 34 -5 34 -24z"
-                  />
-                </g>
-              </svg>
+                    />
+                  </g>
+                </svg>
+              </SVGBase__StyledSvg>
             </SVG>
           </IconImportant>
         </div>
       </src__IconImportantWrapper>
       <src__WarningTextWrapper>
         <strong
-          className="c2"
+          className="c3"
         >
           A very long warning message. This includes a lot of text to give a good representation of a more average length warning. That way you can see more than one line wrapping.
         </strong>
diff --git a/packages/icons/src/ArrowLeft/__snapshots__/test.tsx.snap b/packages/icons/src/ArrowLeft/__snapshots__/test.tsx.snap
index def33188..8815dfec 100644
--- a/packages/icons/src/ArrowLeft/__snapshots__/test.tsx.snap
+++ b/packages/icons/src/ArrowLeft/__snapshots__/test.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ArrowRight matches wrapper snapshot: wrapper mount 1`] = `
+.c0 {
+  display: block;
+}
+
 <ArrowLeft
   fill="currentColor"
   title="arrow left"
@@ -11,25 +15,29 @@ exports[`ArrowRight matches wrapper snapshot: wrapper mount 1`] = `
     viewBox="-0.2 0 17 14"
     width="100%"
   >
-    <svg
+    <SVGBase__StyledSvg
       fill="currentColor"
       height="100%"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
       version="1.1"
       viewBox="-0.2 0 17 14"
       width="100%"
     >
-      <title>
-        arrow left
-      </title>
-      <path
-        d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"
-      />
-    </svg>
+      <svg
+        className="c0"
+        fill="currentColor"
+        height="100%"
+        version="1.1"
+        viewBox="-0.2 0 17 14"
+        width="100%"
+      >
+        <title>
+          arrow left
+        </title>
+        <path
+          d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"
+        />
+      </svg>
+    </SVGBase__StyledSvg>
   </SVG>
 </ArrowLeft>
 `;
diff --git a/packages/icons/src/ArrowRight/__snapshots__/test.tsx.snap b/packages/icons/src/ArrowRight/__snapshots__/test.tsx.snap
index 7069d74f..47fbd623 100644
--- a/packages/icons/src/ArrowRight/__snapshots__/test.tsx.snap
+++ b/packages/icons/src/ArrowRight/__snapshots__/test.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ArrowRight matches wrapper snapshot: wrapper mount 1`] = `
+.c0 {
+  display: block;
+}
+
 <ArrowRight
   fill="currentColor"
   title="arrow right"
@@ -11,25 +15,29 @@ exports[`ArrowRight matches wrapper snapshot: wrapper mount 1`] = `
     viewBox="0 0 17 14"
     width="100%"
   >
-    <svg
+    <SVGBase__StyledSvg
       fill="currentColor"
       height="100%"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
       version="1.1"
       viewBox="0 0 17 14"
       width="100%"
     >
-      <title>
-        arrow right
-      </title>
-      <path
-        d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"
-      />
-    </svg>
+      <svg
+        className="c0"
+        fill="currentColor"
+        height="100%"
+        version="1.1"
+        viewBox="0 0 17 14"
+        width="100%"
+      >
+        <title>
+          arrow right
+        </title>
+        <path
+          d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"
+        />
+      </svg>
+    </SVGBase__StyledSvg>
   </SVG>
 </ArrowRight>
 `;
diff --git a/packages/icons/src/ButtonArrow/__snapshots__/test.tsx.snap b/packages/icons/src/ButtonArrow/__snapshots__/test.tsx.snap
index 379b191e..55002c62 100644
--- a/packages/icons/src/ButtonArrow/__snapshots__/test.tsx.snap
+++ b/packages/icons/src/ButtonArrow/__snapshots__/test.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ButtonArrow matches wrapper snapshot: wrapper mount 1`] = `
+.c0 {
+  display: block;
+}
+
 <ButtonArrow
   fill="currentColor"
   title="ButtonArrow"
@@ -11,31 +15,35 @@ exports[`ButtonArrow matches wrapper snapshot: wrapper mount 1`] = `
     viewBox="0 0 706 860"
     width="100%"
   >
-    <svg
+    <SVGBase__StyledSvg
       fill="currentColor"
       height="100%"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
       version="1.1"
       viewBox="0 0 706 860"
       width="100%"
     >
-      <title>
-        ButtonArrow
-      </title>
-      <g>
-        <path
-          d="M.152 0h252.993l452.108 430H452.261z"
-        />
-        <path
-          d="M0 860h252.993L705.1 430H452.108z"
-          fillOpacity="0.5"
-        />
-      </g>
-    </svg>
+      <svg
+        className="c0"
+        fill="currentColor"
+        height="100%"
+        version="1.1"
+        viewBox="0 0 706 860"
+        width="100%"
+      >
+        <title>
+          ButtonArrow
+        </title>
+        <g>
+          <path
+            d="M.152 0h252.993l452.108 430H452.261z"
+          />
+          <path
+            d="M0 860h252.993L705.1 430H452.108z"
+            fillOpacity="0.5"
+          />
+        </g>
+      </svg>
+    </SVGBase__StyledSvg>
   </SVG>
 </ButtonArrow>
 `;
diff --git a/packages/icons/src/IconImportant/__snapshots__/test.tsx.snap b/packages/icons/src/IconImportant/__snapshots__/test.tsx.snap
index 0d50ef03..6ca939d0 100644
--- a/packages/icons/src/IconImportant/__snapshots__/test.tsx.snap
+++ b/packages/icons/src/IconImportant/__snapshots__/test.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`IconImportant matches wrapper snapshot: wrapper mount 1`] = `
+.c0 {
+  display: block;
+}
+
 <IconImportant
   fill="currentColor"
   title="icon important"
@@ -12,33 +16,38 @@ exports[`IconImportant matches wrapper snapshot: wrapper mount 1`] = `
     viewBox="0 0 35.000000 35.000000"
     width="100%"
   >
-    <svg
+    <SVGBase__StyledSvg
       fill="currentColor"
       height="100%"
       preserveAspectRatio="xMidYMid meet"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
       version="1.1"
       viewBox="0 0 35.000000 35.000000"
       width="100%"
     >
-      <title>
-        icon important
-      </title>
-      <g
-        transform="translate(0.000000,35.000000) scale(0.100000,-0.100000)"
+      <svg
+        className="c0"
+        fill="currentColor"
+        height="100%"
+        preserveAspectRatio="xMidYMid meet"
+        version="1.1"
+        viewBox="0 0 35.000000 35.000000"
+        width="100%"
       >
-        <path
-          d="M100 332 c-87 -48 -125 -155 -82 -232 48 -87 155 -125 232 -82 87 48
+        <title>
+          icon important
+        </title>
+        <g
+          transform="translate(0.000000,35.000000) scale(0.100000,-0.100000)"
+        >
+          <path
+            d="M100 332 c-87 -48 -125 -155 -82 -232 48 -87 155 -125 232 -82 87 48
 125 155 82 232 -48 87 -155 125 -232 82z m100 -122 c0 -53 -2 -60 -20 -60 -18
 0 -20 7 -20 60 0 53 2 60 20 60 18 0 20 -7 20 -60z m0 -111 c0 -12 -7 -19 -20
 -19 -19 0 -28 28 -14 43 11 11 34 -5 34 -24z"
-        />
-      </g>
-    </svg>
+          />
+        </g>
+      </svg>
+    </SVGBase__StyledSvg>
   </SVG>
 </IconImportant>
 `;
diff --git a/packages/icons/src/SVGBase/__snapshots__/test.tsx.snap b/packages/icons/src/SVGBase/__snapshots__/test.tsx.snap
index e8caf92e..bad85332 100644
--- a/packages/icons/src/SVGBase/__snapshots__/test.tsx.snap
+++ b/packages/icons/src/SVGBase/__snapshots__/test.tsx.snap
@@ -1,23 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SVG matches wrapper snapshot: wrapper mount 1`] = `
+.c0 {
+  display: block;
+}
+
 <SVG
   fill="currentColor"
   width="100%"
 >
-  <svg
+  <SVGBase__StyledSvg
     fill="currentColor"
     height="100%"
-    style={
-      Object {
-        "display": "block",
-      }
-    }
     version="1.1"
     width="100%"
   >
-    <title />
-    Example
-  </svg>
+    <svg
+      className="c0"
+      fill="currentColor"
+      height="100%"
+      version="1.1"
+      width="100%"
+    >
+      <title />
+      Example
+    </svg>
+  </SVGBase__StyledSvg>
 </SVG>
 `;
diff --git a/packages/icons/src/Search/__snapshots__/test.tsx.snap b/packages/icons/src/Search/__snapshots__/test.tsx.snap
index e6cfcfd3..aeeca6d8 100644
--- a/packages/icons/src/Search/__snapshots__/test.tsx.snap
+++ b/packages/icons/src/Search/__snapshots__/test.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Search matches wrapper snapshot: wrapper mount 1`] = `
+.c0 {
+  display: block;
+}
+
 <Search
   fill="currentColor"
   title="Search"
@@ -11,25 +15,29 @@ exports[`Search matches wrapper snapshot: wrapper mount 1`] = `
     viewBox="0 0 57 57"
     width="100%"
   >
-    <svg
+    <SVGBase__StyledSvg
       fill="currentColor"
       height="100%"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
       version="1.1"
       viewBox="0 0 57 57"
       width="100%"
     >
-      <title>
-        Search
-      </title>
-      <path
-        d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"
-      />
-    </svg>
+      <svg
+        className="c0"
+        fill="currentColor"
+        height="100%"
+        version="1.1"
+        viewBox="0 0 57 57"
+        width="100%"
+      >
+        <title>
+          Search
+        </title>
+        <path
+          d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"
+        />
+      </svg>
+    </SVGBase__StyledSvg>
   </SVG>
 </Search>
 `;
diff --git a/packages/icons/src/Spinner/__snapshots__/test.tsx.snap b/packages/icons/src/Spinner/__snapshots__/test.tsx.snap
index 38eb0aa3..9147c488 100644
--- a/packages/icons/src/Spinner/__snapshots__/test.tsx.snap
+++ b/packages/icons/src/Spinner/__snapshots__/test.tsx.snap
@@ -2,8 +2,91 @@
 
 exports[`Spinner matches wrapper snapshot: wrapper mount 1`] = `
 .c0 {
+  display: block;
+}
+
+.c1 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 0ms;
+  animation-delay: 0ms;
+}
+
+.c2 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 83ms;
+  animation-delay: 83ms;
+}
+
+.c3 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 166ms;
+  animation-delay: 166ms;
+}
+
+.c4 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 249ms;
+  animation-delay: 249ms;
+}
+
+.c5 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 332ms;
+  animation-delay: 332ms;
+}
+
+.c6 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 415ms;
+  animation-delay: 415ms;
+}
+
+.c7 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 498ms;
+  animation-delay: 498ms;
+}
+
+.c8 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 581ms;
+  animation-delay: 581ms;
+}
+
+.c9 {
   -webkit-animation: hhGhiE 1s infinite linear;
   animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 664ms;
+  animation-delay: 664ms;
+}
+
+.c10 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 747ms;
+  animation-delay: 747ms;
+}
+
+.c11 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 830ms;
+  animation-delay: 830ms;
+}
+
+.c12 {
+  -webkit-animation: hhGhiE 1s infinite linear;
+  animation: hhGhiE 1s infinite linear;
+  -webkit-animation-delay: 913ms;
+  animation-delay: 913ms;
 }
 
 <Spinner
@@ -22,396 +105,293 @@ exports[`Spinner matches wrapper snapshot: wrapper mount 1`] = `
     viewBox="-25 -25 50 50"
     width="100px"
   >
-    <svg
+    <SVGBase__StyledSvg
       className="icon-spinner"
       fill="red"
       height="100px"
       preserveAspectRatio="xMidYMid meet"
-      style={
-        Object {
-          "display": "block",
-        }
-      }
       version="1.1"
       viewBox="-25 -25 50 50"
       width="100px"
     >
-      <title>
-        Loading
-      </title>
-      <Spinner__Rect
+      <svg
+        className="c0 icon-spinner"
         fill="red"
-        height="5"
-        key="0"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "0ms",
-          }
-        }
-        transform="rotate(0, 0, 2) translate(10 0)"
-        width="12"
+        height="100px"
+        preserveAspectRatio="xMidYMid meet"
+        version="1.1"
+        viewBox="-25 -25 50 50"
+        width="100px"
       >
-        <rect
-          className="c0"
+        <title>
+          Loading
+        </title>
+        <Spinner__Rect
+          animationDelay={0}
           fill="red"
           height="5"
+          key="0"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "0ms",
-            }
-          }
           transform="rotate(0, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="1"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "83ms",
-          }
-        }
-        transform="rotate(30, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c1"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(0, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={1}
           fill="red"
           height="5"
+          key="1"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "83ms",
-            }
-          }
           transform="rotate(30, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="2"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "166ms",
-          }
-        }
-        transform="rotate(60, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c2"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(30, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={2}
           fill="red"
           height="5"
+          key="2"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "166ms",
-            }
-          }
           transform="rotate(60, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="3"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "249ms",
-          }
-        }
-        transform="rotate(90, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c3"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(60, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={3}
           fill="red"
           height="5"
+          key="3"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "249ms",
-            }
-          }
           transform="rotate(90, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="4"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "332ms",
-          }
-        }
-        transform="rotate(120, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c4"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(90, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={4}
           fill="red"
           height="5"
+          key="4"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "332ms",
-            }
-          }
           transform="rotate(120, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="5"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "415ms",
-          }
-        }
-        transform="rotate(150, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c5"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(120, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={5}
           fill="red"
           height="5"
+          key="5"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "415ms",
-            }
-          }
           transform="rotate(150, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="6"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "498ms",
-          }
-        }
-        transform="rotate(180, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c6"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(150, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={6}
           fill="red"
           height="5"
+          key="6"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "498ms",
-            }
-          }
           transform="rotate(180, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="7"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "581ms",
-          }
-        }
-        transform="rotate(210, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c7"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(180, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={7}
           fill="red"
           height="5"
+          key="7"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "581ms",
-            }
-          }
           transform="rotate(210, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="8"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "664ms",
-          }
-        }
-        transform="rotate(240, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c8"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(210, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={8}
           fill="red"
           height="5"
+          key="8"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "664ms",
-            }
-          }
           transform="rotate(240, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="9"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "747ms",
-          }
-        }
-        transform="rotate(270, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c9"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(240, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={9}
           fill="red"
           height="5"
+          key="9"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "747ms",
-            }
-          }
           transform="rotate(270, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="10"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "830ms",
-          }
-        }
-        transform="rotate(300, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c10"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(270, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={10}
           fill="red"
           height="5"
+          key="10"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "830ms",
-            }
-          }
           transform="rotate(300, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-      <Spinner__Rect
-        fill="red"
-        height="5"
-        key="11"
-        opacity="0"
-        rx="2.5"
-        ry="2.5"
-        style={
-          Object {
-            "animationDelay": "913ms",
-          }
-        }
-        transform="rotate(330, 0, 2) translate(10 0)"
-        width="12"
-      >
-        <rect
-          className="c0"
+        >
+          <rect
+            className="c11"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(300, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+        <Spinner__Rect
+          animationDelay={11}
           fill="red"
           height="5"
+          key="11"
           opacity="0"
           rx="2.5"
           ry="2.5"
-          style={
-            Object {
-              "animationDelay": "913ms",
-            }
-          }
           transform="rotate(330, 0, 2) translate(10 0)"
           width="12"
-        />
-      </Spinner__Rect>
-    </svg>
+        >
+          <rect
+            className="c12"
+            fill="red"
+            height="5"
+            opacity="0"
+            rx="2.5"
+            ry="2.5"
+            transform="rotate(330, 0, 2) translate(10 0)"
+            width="12"
+          />
+        </Spinner__Rect>
+      </svg>
+    </SVGBase__StyledSvg>
   </SVG>
 </Spinner>
 `;