Format generated icon components with Prettier

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Added `data-test-subj` property to `EuiDraggable` and `EuiDroppable` ([#1943](https://github.com/elastic/eui/pull/1943))
 - Added type definitions to `EuiSuperSelect` ([#1907](https://github.com/elastic/eui/pull/1907))
 - Updated `EuiIcon` to use Slack's updated branding ([#1954](https://github.com/elastic/eui/pull/1954))
+- Updated `compile-icons` script to format icon components with Prettier ([#1955](https://github.com/elastic/eui/pull/1955))
 
 ## [`11.1.0`](https://github.com/elastic/eui/tree/v11.1.0)
 

package.json

@@ -15,7 +15,7 @@
     "sync-docs": "node ./scripts/docs-sync.js",
     "build-docs": "NODE_ENV=production webpack --config=src-docs/webpack.config.js",
     "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js $npm_package_name",
-    "compile-icons": "node ./scripts/compile-icons.js",
+    "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.js\"",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
     "lint": "yarn lint-es && yarn lint-ts && yarn lint-sass && yarn lint-framer",
     "lint-fix": "yarn lint-es-fix && yarn lint-ts-fix",

src/components/icon/__snapshots__/icon.test.tsx.snap

@@ -4541,23 +4541,20 @@ exports[`EuiIcon props type logoSlack is rendered 1`] = `
     fill="none"
   >
     <path
-      d="M6.81290323 3.40645161C6.81290323 5.23870968 5.31612903 6.73548387 3.48387097 6.73548387 1.6516129 6.73548387.15483871 5.23870968.15483871 3.40645161.15483871 1.57419355 1.6516129.0774193548 3.48387097.0774193548L6.81290323.0774193548 6.81290323 3.40645161zM8.49032258 3.40645161C8.49032258 1.57419355 9.98709677.0774193548 11.8193548.0774193548 13.6516129.0774193548 15.1483871 1.57419355 15.1483871 3.40645161L15.1483871 11.7419355C15.1483871 13.5741935 13.6516129 15.0709677 11.8193548 15.0709677 9.98709677 15.0709677 8.49032258 13.5741935 8.49032258 11.7419355L8.49032258 3.40645161z"
+      d="M6.813 20.18a3.337 3.337 0 0 1-3.33 3.33 3.337 3.337 0 0 1-3.328-3.33 3.337 3.337 0 0 1 3.329-3.329h3.329v3.33zm1.677 0a3.337 3.337 0 0 1 3.33-3.329 3.337 3.337 0 0 1 3.328 3.33v8.335a3.337 3.337 0 0 1-3.329 3.329 3.337 3.337 0 0 1-3.329-3.33V20.18z"
       fill="#E01E5A"
-      transform="translate(0 16.774)"
     />
     <path
-      d="M11.8193548 6.81290323C9.98709677 6.81290323 8.49032258 5.31612903 8.49032258 3.48387097 8.49032258 1.6516129 9.98709677.15483871 11.8193548.15483871 13.6516129.15483871 15.1483871 1.6516129 15.1483871 3.48387097L15.1483871 6.81290323 11.8193548 6.81290323zM11.8193548 8.49032258C13.6516129 8.49032258 15.1483871 9.98709677 15.1483871 11.8193548 15.1483871 13.6516129 13.6516129 15.1483871 11.8193548 15.1483871L3.48387097 15.1483871C1.6516129 15.1483871.15483871 13.6516129.15483871 11.8193548.15483871 9.98709677 1.6516129 8.49032258 3.48387097 8.49032258L11.8193548 8.49032258z"
+      d="M11.82 6.813a3.337 3.337 0 0 1-3.33-3.33A3.337 3.337 0 0 1 11.82.156a3.337 3.337 0 0 1 3.328 3.329v3.329H11.82zm0 1.677a3.337 3.337 0 0 1 3.328 3.33 3.337 3.337 0 0 1-3.329 3.328H3.484a3.337 3.337 0 0 1-3.33-3.329 3.337 3.337 0 0 1 3.33-3.329h8.335z"
       fill="#36C5F0"
     />
     <path
-      d="M8.41290323 11.8193548C8.41290323 9.98709677 9.90967742 8.49032258 11.7419355 8.49032258 13.5741935 8.49032258 15.0709677 9.98709677 15.0709677 11.8193548 15.0709677 13.6516129 13.5741935 15.1483871 11.7419355 15.1483871L8.41290323 15.1483871 8.41290323 11.8193548zM6.73548387 11.8193548C6.73548387 13.6516129 5.23870968 15.1483871 3.40645161 15.1483871 1.57419355 15.1483871.0774193548 13.6516129.0774193548 11.8193548L.0774193548 3.48387097C.0774193548 1.6516129 1.57419355.15483871 3.40645161.15483871 5.23870968.15483871 6.73548387 1.6516129 6.73548387 3.48387097L6.73548387 11.8193548z"
+      d="M25.187 11.82a3.337 3.337 0 0 1 3.329-3.33 3.337 3.337 0 0 1 3.329 3.33 3.337 3.337 0 0 1-3.33 3.328h-3.328V11.82zm-1.678 0a3.337 3.337 0 0 1-3.329 3.328 3.337 3.337 0 0 1-3.329-3.329V3.484a3.337 3.337 0 0 1 3.33-3.33 3.337 3.337 0 0 1 3.328 3.33v8.335z"
       fill="#2EB67D"
-      transform="translate(16.774)"
     />
     <path
-      d="M3.40645161 8.41290323C5.23870968 8.41290323 6.73548387 9.90967742 6.73548387 11.7419355 6.73548387 13.5741935 5.23870968 15.0709677 3.40645161 15.0709677 1.57419355 15.0709677.0774193548 13.5741935.0774193548 11.7419355L.0774193548 8.41290323 3.40645161 8.41290323zM3.40645161 6.73548387C1.57419355 6.73548387.0774193548 5.23870968.0774193548 3.40645161.0774193548 1.57419355 1.57419355.0774193548 3.40645161.0774193548L11.7419355.0774193548C13.5741935.0774193548 15.0709677 1.57419355 15.0709677 3.40645161 15.0709677 5.23870968 13.5741935 6.73548387 11.7419355 6.73548387L3.40645161 6.73548387z"
+      d="M20.18 25.187a3.337 3.337 0 0 1 3.33 3.329 3.337 3.337 0 0 1-3.33 3.329 3.337 3.337 0 0 1-3.329-3.33v-3.328h3.33zm0-1.678a3.337 3.337 0 0 1-3.329-3.329 3.337 3.337 0 0 1 3.33-3.329h8.335a3.337 3.337 0 0 1 3.329 3.33 3.337 3.337 0 0 1-3.33 3.328H20.18z"
       fill="#ECB22E"
-      transform="translate(16.774 16.774)"
     />
   </g>
 </svg>
@@ -5346,25 +5343,13 @@ exports[`EuiIcon props type securityAnalyticsApp is rendered 1`] = `
   width="32"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <g
-    transform="translate(2)"
-  >
-    <path
-      d="M0 14L28 14 28 30C24.6666667 31.3333333 20 32 14 32 8 32 3.33333333 31.3333333 0 30L0 14zM2 16L2 28.5886183C4.97237624 29.5204478 8.9791577 30 14 30 19.0208423 30 23.0276238 29.5204478 26 28.5886183L26 16 2 16zM22 12L22 8.09090909C22 3.62529113 18.421187 0 14 0 9.578813 0 6 3.62529113 6 8.09090909L6 12 8 12 8 8.09090909C8 4.72412514 10.6892005 2 14 2 17.3107995 2 20 4.72412514 20 8.09090909L20 12 22 12z"
-    />
-    <polygon
-      class="euiIcon__fillSecondary"
-      points="6 18 6 24 8 24 8 18"
-    />
-    <polygon
-      class="euiIcon__fillSecondary"
-      points="20 18 20 24 22 24 22 18"
-    />
-    <polygon
-      class="euiIcon__fillSecondary"
-      points="13 18 13 26 15 26 15 18"
-    />
-  </g>
+  <path
+    d="M2 14h28v16c-3.333 1.333-8 2-14 2s-10.667-.667-14-2V14zm2 2v12.589C6.972 29.52 10.98 30 16 30s9.028-.48 12-1.411V16H4zm20-4V8.09C24 3.626 20.421 0 16 0c-4.421 0-8 3.625-8 8.09V12h2V8.09C10 4.725 12.69 2 16 2s6 2.724 6 6.09V12h2z"
+  />
+  <path
+    class="euiIcon__fillSecondary"
+    d="M8 18v6h2v-6zM22 18v6h2v-6zM15 18v8h2v-8z"
+  />
 </svg>
 `;
 

src/components/icon/assets/app_security_analytics.js

@@ -2,26 +2,16 @@ import React from 'react';
 
 const EuiIconAppSecurityAnalytics = props => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
+    width={32}
+    height={32}
     viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
     {...props}>
-    <g transform="translate(2)">
-      <path d="M0 14L28 14 28 30C24.6666667 31.3333333 20 32 14 32 8 32 3.33333333 31.3333333 0 30L0 14zM2 16L2 28.5886183C4.97237624 29.5204478 8.9791577 30 14 30 19.0208423 30 23.0276238 29.5204478 26 28.5886183L26 16 2 16zM22 12L22 8.09090909C22 3.62529113 18.421187 0 14 0 9.578813 0 6 3.62529113 6 8.09090909L6 12 8 12 8 8.09090909C8 4.72412514 10.6892005 2 14 2 17.3107995 2 20 4.72412514 20 8.09090909L20 12 22 12z" />
-      <polygon
-        className="euiIcon__fillSecondary"
-        points="6 18 6 24 8 24 8 18"
-      />
-      <polygon
-        className="euiIcon__fillSecondary"
-        points="20 18 20 24 22 24 22 18"
-      />
-      <polygon
-        className="euiIcon__fillSecondary"
-        points="13 18 13 26 15 26 15 18"
-      />
-    </g>
+    <path d="M2 14h28v16c-3.333 1.333-8 2-14 2s-10.667-.667-14-2V14zm2 2v12.589C6.972 29.52 10.98 30 16 30s9.028-.48 12-1.411V16H4zm20-4V8.09C24 3.626 20.421 0 16 0c-4.421 0-8 3.625-8 8.09V12h2V8.09C10 4.725 12.69 2 16 2s6 2.724 6 6.09V12h2z" />
+    <path
+      className="euiIcon__fillSecondary"
+      d="M8 18v6h2v-6zM22 18v6h2v-6zM15 18v8h2v-8z"
+    />
   </svg>
 );
 

src/components/icon/assets/logo_slack.js

@@ -2,30 +2,27 @@ import React from 'react';
 
 const EuiIconLogoSlack = props => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
+    width={32}
+    height={32}
     viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
     {...props}>
     <g fill="none">
       <path
         fill="#E01E5A"
-        d="M6.81290323 3.40645161C6.81290323 5.23870968 5.31612903 6.73548387 3.48387097 6.73548387 1.6516129 6.73548387.15483871 5.23870968.15483871 3.40645161.15483871 1.57419355 1.6516129.0774193548 3.48387097.0774193548L6.81290323.0774193548 6.81290323 3.40645161zM8.49032258 3.40645161C8.49032258 1.57419355 9.98709677.0774193548 11.8193548.0774193548 13.6516129.0774193548 15.1483871 1.57419355 15.1483871 3.40645161L15.1483871 11.7419355C15.1483871 13.5741935 13.6516129 15.0709677 11.8193548 15.0709677 9.98709677 15.0709677 8.49032258 13.5741935 8.49032258 11.7419355L8.49032258 3.40645161z"
-        transform="translate(0 16.774)"
+        d="M6.813 20.18a3.337 3.337 0 0 1-3.33 3.33 3.337 3.337 0 0 1-3.328-3.33 3.337 3.337 0 0 1 3.329-3.329h3.329v3.33zm1.677 0a3.337 3.337 0 0 1 3.33-3.329 3.337 3.337 0 0 1 3.328 3.33v8.335a3.337 3.337 0 0 1-3.329 3.329 3.337 3.337 0 0 1-3.329-3.33V20.18z"
       />
       <path
         fill="#36C5F0"
-        d="M11.8193548 6.81290323C9.98709677 6.81290323 8.49032258 5.31612903 8.49032258 3.48387097 8.49032258 1.6516129 9.98709677.15483871 11.8193548.15483871 13.6516129.15483871 15.1483871 1.6516129 15.1483871 3.48387097L15.1483871 6.81290323 11.8193548 6.81290323zM11.8193548 8.49032258C13.6516129 8.49032258 15.1483871 9.98709677 15.1483871 11.8193548 15.1483871 13.6516129 13.6516129 15.1483871 11.8193548 15.1483871L3.48387097 15.1483871C1.6516129 15.1483871.15483871 13.6516129.15483871 11.8193548.15483871 9.98709677 1.6516129 8.49032258 3.48387097 8.49032258L11.8193548 8.49032258z"
+        d="M11.82 6.813a3.337 3.337 0 0 1-3.33-3.33A3.337 3.337 0 0 1 11.82.156a3.337 3.337 0 0 1 3.328 3.329v3.329H11.82zm0 1.677a3.337 3.337 0 0 1 3.328 3.33 3.337 3.337 0 0 1-3.329 3.328H3.484a3.337 3.337 0 0 1-3.33-3.329 3.337 3.337 0 0 1 3.33-3.329h8.335z"
       />
       <path
         fill="#2EB67D"
-        d="M8.41290323 11.8193548C8.41290323 9.98709677 9.90967742 8.49032258 11.7419355 8.49032258 13.5741935 8.49032258 15.0709677 9.98709677 15.0709677 11.8193548 15.0709677 13.6516129 13.5741935 15.1483871 11.7419355 15.1483871L8.41290323 15.1483871 8.41290323 11.8193548zM6.73548387 11.8193548C6.73548387 13.6516129 5.23870968 15.1483871 3.40645161 15.1483871 1.57419355 15.1483871.0774193548 13.6516129.0774193548 11.8193548L.0774193548 3.48387097C.0774193548 1.6516129 1.57419355.15483871 3.40645161.15483871 5.23870968.15483871 6.73548387 1.6516129 6.73548387 3.48387097L6.73548387 11.8193548z"
-        transform="translate(16.774)"
+        d="M25.187 11.82a3.337 3.337 0 0 1 3.329-3.33 3.337 3.337 0 0 1 3.329 3.33 3.337 3.337 0 0 1-3.33 3.328h-3.328V11.82zm-1.678 0a3.337 3.337 0 0 1-3.329 3.328 3.337 3.337 0 0 1-3.329-3.329V3.484a3.337 3.337 0 0 1 3.33-3.33 3.337 3.337 0 0 1 3.328 3.33v8.335z"
       />
       <path
         fill="#ECB22E"
-        d="M3.40645161 8.41290323C5.23870968 8.41290323 6.73548387 9.90967742 6.73548387 11.7419355 6.73548387 13.5741935 5.23870968 15.0709677 3.40645161 15.0709677 1.57419355 15.0709677.0774193548 13.5741935.0774193548 11.7419355L.0774193548 8.41290323 3.40645161 8.41290323zM3.40645161 6.73548387C1.57419355 6.73548387.0774193548 5.23870968.0774193548 3.40645161.0774193548 1.57419355 1.57419355.0774193548 3.40645161.0774193548L11.7419355.0774193548C13.5741935.0774193548 15.0709677 1.57419355 15.0709677 3.40645161 15.0709677 5.23870968 13.5741935 6.73548387 11.7419355 6.73548387L3.40645161 6.73548387z"
-        transform="translate(16.774 16.774)"
+        d="M20.18 25.187a3.337 3.337 0 0 1 3.33 3.329 3.337 3.337 0 0 1-3.33 3.329 3.337 3.337 0 0 1-3.329-3.33v-3.328h3.33zm0-1.678a3.337 3.337 0 0 1-3.329-3.329 3.337 3.337 0 0 1 3.33-3.329h8.335a3.337 3.337 0 0 1 3.329 3.33 3.337 3.337 0 0 1-3.33 3.328H20.18z"
       />
     </g>
   </svg>