[EuiIcon] Convert generated icon .js assets to .tsx files

.eslintignore

@@ -5,7 +5,6 @@ lib
 test-env
 types
 eui.d.ts
-src/components/icon/assets/**/*.js
 package.json
 docs
 packages

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added `maxWidth` prop to `EuiTour`, made `subtitle` optional, and fixed heading levels and footer background ([#5225](https://github.com/elastic/eui/pull/5225))
 - Updated `tint`, `shade`, `saturate`, `desaturate`, and `makeHighContrastColor` utility functions to maintain color format supplied ([#5230](https://github.com/elastic/eui/pull/5230))
+- Converted generated icon files to Typescript, eliminating the last `.js` files in our source files ([#5212](https://github.com/elastic/eui/pull/5212))
 
 **Bug fixes**
 

package.json

@@ -18,7 +18,7 @@
     "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 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",
     "build-pack": "yarn build && npm pack",
-    "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.js\"",
+    "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
     "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
     "lint-fix": "yarn lint-es-fix",
@@ -107,7 +107,7 @@
     "@emotion/babel-preset-css-prop": "^11.0.0",
     "@emotion/eslint-plugin": "^11.0.0",
     "@emotion/react": "^11.1.1",
-    "@svgr/core": "5.4.0",
+    "@svgr/core": "5.5.0",
     "@svgr/plugin-svgo": "^4.0.3",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",

scripts/compile-eui.js

@@ -7,12 +7,7 @@ const fs = require('fs');
 const dtsGenerator = require('dts-generator').default;
 
 function compileLib() {
-  shell.mkdir(
-    '-p',
-    'lib/components/icon/assets/tokens',
-    'lib/services',
-    'lib/test'
-  );
+  shell.mkdir('-p', 'lib/services', 'lib/test');
 
   console.log('Compiling src/ to es/, lib/, and test-env/');
 
@@ -70,7 +65,7 @@ function compileLib() {
 
   // Also copy over SVGs. Babel has a --copy-files option but that brings over
   // all kinds of things we don't want into the lib folder.
-  shell.mkdir('-p', 'lib/components/icon/assets');
+  shell.mkdir('-p', 'lib/components/icon/svgs', 'lib/components/icon/svgs/tokens');
 
   glob('./src/components/**/*.svg', undefined, (error, files) => {
     files.forEach(file => {

scripts/compile-icons.js

@@ -2,10 +2,14 @@ const glob = require('glob');
 const svgr = require('@svgr/core').default;
 const path = require('path');
 const fs = require('fs');
+const license = require('../.eslintrc.js').rules[
+  'local/require-license-header'
+][1].license;
 
 const rootDir = path.resolve(__dirname, '..');
 const srcDir = path.resolve(rootDir, 'src');
-const iconsDir = path.resolve(srcDir, 'components', 'icon', 'assets');
+const iconsDir = path.resolve(srcDir, 'components', 'icon', 'svgs');
+const outputDir = path.resolve(srcDir, 'components', 'icon', 'assets');
 
 function pascalCase(x) {
   return x.replace(/^(.)|[^a-zA-Z]([a-zA-Z])/g, (match, char1, char2) =>
@@ -15,7 +19,7 @@ function pascalCase(x) {
 
 const iconFiles = glob.sync('**/*.svg', { cwd: iconsDir, realpath: true });
 
-iconFiles.forEach(async (filePath) => {
+iconFiles.forEach((filePath) => {
   const fileName = path.basename(filePath, '.svg');
   const svgSource = fs.readFileSync(filePath);
   const svgString = svgSource.toString();
@@ -27,7 +31,7 @@ iconFiles.forEach(async (filePath) => {
 
     const hasIds = svgString.includes('id="');
 
-    let jsxSource = await svgr(
+    let jsxSource = svgr.sync(
       svgSource,
       {
         plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
@@ -42,15 +46,17 @@ iconFiles.forEach(async (filePath) => {
           xmlns: 'http://www.w3.org/2000/svg',
         },
         titleProp: true,
+        typescript: true,
         template: (
           { template },
           opts,
-          { imports, componentName, props, jsx }
+          { imports, interfaces, componentName, props, jsx }
         ) =>
           hasIds
             ? template.ast`
 ${imports}
 import { htmlIdGenerator } from '../../../services';
+${interfaces}
 const ${componentName} = (${props}) => {
   const generateId = htmlIdGenerator('${fileName}');
   return (
@@ -61,6 +67,7 @@ export const icon = ${componentName};
 `
             : template.ast`
 ${imports}
+${interfaces}
 const ${componentName} = (${props}) => ${jsx}
 export const icon = ${componentName};
 `,
@@ -78,9 +85,9 @@ export const icon = ${componentName};
         .replace(/xlinkHref="#(\S+)"/gi, "xlinkHref={`#${generateId('$1')}`}");
     }
 
-    const outputFilePath = filePath.replace(/\.svg$/, '.js');
-    const comment = '// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY\n\n';
-    fs.writeFileSync(outputFilePath, comment + jsxSource);
+    const outputFilePath = `${outputDir}/${fileName}.tsx`;
+    const comment = `\n// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js\n\n`;
+    fs.writeFileSync(outputFilePath, license + comment + jsxSource);
   } catch (e) {
     console.error(`Error processing ${filePath}`);
     console.error(e);

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

@@ -730,7 +730,7 @@ exports[`EuiIcon props type arrowDown is rendered 1`] = `
 >
   <path
     d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-    fill-rule="non-zero"
+    fill-rule="nonzero"
   />
 </svg>
 `;
@@ -4500,6 +4500,7 @@ exports[`EuiIcon props type logoGCP is rendered 1`] = `
   role="img"
   viewBox="0 0 32 32"
   width="32"
+  xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
 >
   <defs>
@@ -4798,6 +4799,7 @@ exports[`EuiIcon props type logoGoogleG is rendered 1`] = `
   role="img"
   viewBox="0 0 32 32"
   width="32"
+  xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
 >
   <defs>
@@ -5626,6 +5628,7 @@ exports[`EuiIcon props type logoPhp is rendered 1`] = `
   role="img"
   viewBox="0 0 32 32"
   width="32"
+  xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
 >
   <defs>

src/components/icon/assets/accessibility.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+const EuiIconAccessibility = ({
+  title,
+  titleId,
+  ...props
+}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm3.974 4.342a.5.5 0 01-.233.596l-.083.036L9 6.86v2.559l.974 2.923a.5.5 0 01-.233.596l-.083.036a.5.5 0 01-.596-.233l-.036-.083-1-3L8 9.5l-.026.158-1 3a.5.5 0 01-.97-.228l.022-.088L7 9.416V6.86l-2.658-.886a.5.5 0 01.228-.97l.088.022L7.583 6h.833l2.926-.974a.5.5 0 01.632.316zM8 3a1 1 0 110 2 1 1 0 010-2z" />
+  </svg>
+);
+
+export const icon = EuiIconAccessibility;

src/components/icon/assets/aggregate.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+const EuiIconAggregate = ({
+  title,
+  titleId,
+  ...props
+}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      d="M2.5 2a.5.5 0 100 1 .5.5 0 000-1zm0-1a1.5 1.5 0 011.415 1h1.908a1.5 1.5 0 011.393.943L8.839 7H12.5a.5.5 0 010 1H8.839l-1.623 4.057A1.5 1.5 0 015.823 13H3.915a1.5 1.5 0 110-1h1.908a.5.5 0 00.464-.314L7.761 8H3.915a1.5 1.5 0 110-1H7.76L6.287 3.314A.5.5 0 005.823 3H3.915A1.5 1.5 0 112.5 1zm0 11a.5.5 0 110 1 .5.5 0 010-1zM3 7.5a.5.5 0 10-1 0 .5.5 0 001 0zm9.354-3.354a.5.5 0 00-.708.708L13.793 7a.707.707 0 010 1l-2.147 2.146a.5.5 0 00.708.708L14.5 8.707a1.707 1.707 0 000-2.414l-2.146-2.147z"
+    />
+  </svg>
+);
+
+export const icon = EuiIconAggregate;

src/components/icon/assets/alert.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+const EuiIconAlert = ({
+  title,
+  titleId,
+  ...props
+}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      d="M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
+    />
+  </svg>
+);
+
+export const icon = EuiIconAlert;