refactor(svg): add SVGR loader for inlined react SVG support (#8055)

* refactor(svg): add SVGR loader, typescript declarations for *.svg * refactor(svg): use ES imports for all SVGs (for SVGR compat) Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
spinnaker · Mar 19, 2020 · 15e47a6 · 15e47a6
1 parent 9b91227
commit 15e47a6
Show file tree

Hide file tree

Showing 34 changed files with 1,613 additions and 30 deletions.
diff --git a/app/scripts/modules/amazon/src/aws.module.ts b/app/scripts/modules/amazon/src/aws.module.ts
@@ -21,7 +21,9 @@ import { AwsLoadBalancerTransformer } from './loadBalancer/loadBalancer.transfor
 import { AwsFunctionTransformer } from './function/function.transformer';
 import './deploymentStrategy/rollingPush.strategy';
 
+import amazonLogo from './logo/amazon.logo.svg';
 import './logo/aws.logo.less';
+
 import { AmazonCloneServerGroupModal } from './serverGroup/configure/wizard/AmazonCloneServerGroupModal';
 import { AmazonLoadBalancerChoiceModal } from './loadBalancer/configure/AmazonLoadBalancerChoiceModal';
 
@@ -109,7 +111,7 @@ module(AMAZON_MODULE, [
   CloudProviderRegistry.registerProvider('aws', {
     name: 'Amazon',
     logo: {
-      path: require('./logo/amazon.logo.svg'),
+      path: amazonLogo,
     },
     image: {
       reader: AwsImageReader,

diff --git a/app/scripts/modules/amazon/src/svg.d.ts b/app/scripts/modules/amazon/src/svg.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ComponentType, SVGProps } from 'react';
+  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  const URL: string;
+  export default URL;
+}
diff --git a/app/scripts/modules/amazon/webpack.config.js b/app/scripts/modules/amazon/webpack.config.js
@@ -103,6 +103,14 @@ module.exports = {
         test: /\.css$/,
         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
       },
+      {
+        test: /\.svg$/,
+        issuer: {
+          test: /\.(tsx?|js)$/,
+        },
+        use: [{ loader: '@svgr/webpack' }],
+        exclude: exclusionPattern,
+      },
       {
         test: /\.html$/,
         exclude: exclusionPattern,

diff --git a/app/scripts/modules/appengine/src/svg.d.ts b/app/scripts/modules/appengine/src/svg.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ComponentType, SVGProps } from 'react';
+  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  const URL: string;
+  export default URL;
+}
diff --git a/app/scripts/modules/appengine/webpack.config.js b/app/scripts/modules/appengine/webpack.config.js
@@ -103,6 +103,14 @@ module.exports = {
         test: /\.css$/,
         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
       },
+      {
+        test: /\.svg$/,
+        issuer: {
+          test: /\.(tsx?|js)$/,
+        },
+        use: [{ loader: '@svgr/webpack' }],
+        exclude: exclusionPattern,
+      },
       {
         test: /\.html$/,
         exclude: exclusionPattern,

diff --git a/app/scripts/modules/azure/src/svg.d.ts b/app/scripts/modules/azure/src/svg.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ComponentType, SVGProps } from 'react';
+  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  const URL: string;
+  export default URL;
+}
diff --git a/app/scripts/modules/azure/webpack.config.js b/app/scripts/modules/azure/webpack.config.js
@@ -103,6 +103,14 @@ module.exports = {
         test: /\.css$/,
         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
       },
+      {
+        test: /\.svg$/,
+        issuer: {
+          test: /\.(tsx?|js)$/,
+        },
+        use: [{ loader: '@svgr/webpack' }],
+        exclude: exclusionPattern,
+      },
       {
         test: /\.html$/,
         exclude: exclusionPattern,

diff --git a/app/scripts/modules/cloudfoundry/src/cf.module.ts b/app/scripts/modules/cloudfoundry/src/cf.module.ts
@@ -28,6 +28,8 @@ import {
 
 import { CloudFoundryInstanceDetails } from 'cloudfoundry/instance/details';
 
+import cloudFoundryLogo from './logo/cf.logo.svg';
+
 import 'cloudfoundry/common/applicationName.validator';
 import 'cloudfoundry/pipeline/config/validation/cfTargetImpedance.validator';
 import 'cloudfoundry/pipeline/config/validation/instanceSize.validator';
@@ -51,7 +53,7 @@ import './pipeline/stages/runJob/cloudfoundryRunJob.module';
 CloudProviderRegistry.registerProvider('cloudfoundry', {
   name: 'Cloud Foundry',
   logo: {
-    path: require('./logo/cf.logo.svg'),
+    path: cloudFoundryLogo,
   },
   loadBalancer: {
     transformer: CloudFoundryLoadBalancerTransformer,

diff --git a/app/scripts/modules/cloudfoundry/src/svg.d.ts b/app/scripts/modules/cloudfoundry/src/svg.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ComponentType, SVGProps } from 'react';
+  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  const URL: string;
+  export default URL;
+}
diff --git a/app/scripts/modules/cloudfoundry/webpack.config.js b/app/scripts/modules/cloudfoundry/webpack.config.js
@@ -104,6 +104,14 @@ module.exports = {
         test: /\.css$/,
         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
       },
+      {
+        test: /\.svg$/,
+        issuer: {
+          test: /\.(tsx?|js)$/,
+        },
+        use: [{ loader: '@svgr/webpack' }],
+        exclude: exclusionPattern,
+      },
       {
         test: /\.html$/,
         exclude: exclusionPattern,

diff --git a/app/scripts/modules/core/src/artifact/ArtifactIconService.ts b/app/scripts/modules/core/src/artifact/ArtifactIconService.ts
@@ -1,6 +1,20 @@
 import { ArtifactTypePatterns } from './ArtifactTypes';
 
-const unknownArtifactPath = require('./icons/unknown-type-artifact.svg');
+import unknownArtifactIcon from './icons/unknown-type-artifact.svg';
+import dockerIcon from './icons/docker-image-artifact.svg';
+import kubernetesIcon from './icons/kubernetes-artifact.svg';
+import embeddedBase64Icon from './icons/embedded-base64-artifact.svg';
+import gcsObjectIcon from './icons/gcs-file-artifact.svg';
+import gitHubFileIcon from './icons/github-file-artifact.svg';
+import gitRepoIcon from './icons/git-repo-artifact.svg';
+import gitLabFileIcon from './icons/gitlab-file-artifact.svg';
+import bitbucketFileIcon from './icons/bitbucket-file-artifact.svg';
+import s3ObjectIcon from './icons/s3-object-artifact.svg';
+import helmChartIcon from './icons/helm-chart-artifact.svg';
+import ivyFileIcon from './icons/ivy-artifact.svg';
+import jenkinsFileIcon from './icons/jenkins-file-artifact.svg';
+import mavenFileIcon from './icons/maven-artifact.svg';
+import httpFileIcon from './icons/http-artifact.svg';
 
 interface IArtifactIcon {
   type: RegExp;
@@ -16,7 +30,7 @@ export class ArtifactIconService {
 
   public static getPath(type: string) {
     if (type == null) {
-      return unknownArtifactPath;
+      return unknownArtifactIcon;
     }
     const icon = ArtifactIconService.icons.find(entry => entry.type.test(type));
     if (icon === undefined) {
@@ -26,18 +40,18 @@ export class ArtifactIconService {
   }
 }
 
-ArtifactIconService.registerType(ArtifactTypePatterns.CUSTOM_OBJECT, unknownArtifactPath);
-ArtifactIconService.registerType(ArtifactTypePatterns.DOCKER_IMAGE, require('./icons/docker-image-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.KUBERNETES, require('./icons/kubernetes-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.EMBEDDED_BASE64, require('./icons/embedded-base64-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.GCS_OBJECT, require('./icons/gcs-file-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.GITHUB_FILE, require('./icons/github-file-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.GIT_REPO, require('./icons/git-repo-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.GITLAB_FILE, require('./icons/gitlab-file-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.BITBUCKET_FILE, require('./icons/bitbucket-file-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.S3_OBJECT, require('./icons/s3-object-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.HELM_CHART, require('./icons/helm-chart-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.IVY_FILE, require('./icons/ivy-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.JENKINS_FILE, require('./icons/jenkins-file-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.MAVEN_FILE, require('./icons/maven-artifact.svg'));
-ArtifactIconService.registerType(ArtifactTypePatterns.HTTP_FILE, require('./icons/http-artifact.svg'));
+ArtifactIconService.registerType(ArtifactTypePatterns.CUSTOM_OBJECT, unknownArtifactIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.DOCKER_IMAGE, dockerIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.KUBERNETES, kubernetesIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.EMBEDDED_BASE64, embeddedBase64Icon);
+ArtifactIconService.registerType(ArtifactTypePatterns.GCS_OBJECT, gcsObjectIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.GITHUB_FILE, gitHubFileIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.GIT_REPO, gitRepoIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.GITLAB_FILE, gitLabFileIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.BITBUCKET_FILE, bitbucketFileIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.S3_OBJECT, s3ObjectIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.HELM_CHART, helmChartIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.IVY_FILE, ivyFileIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.JENKINS_FILE, jenkinsFileIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.MAVEN_FILE, mavenFileIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.HTTP_FILE, httpFileIcon);
diff --git a/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx b/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx
@@ -11,6 +11,7 @@ import { ReactInjector } from 'core/reactShims';
 
 import { toggleResourcePause } from './toggleResourceManagement';
 import { ManagedResourceHistoryModal } from './ManagedResourceHistoryModal';
+import managedDeliveryLogo from './icons/md-logo-color.svg';
 
 import './ManagedResourceDetailsIndicator.css';
 
@@ -77,7 +78,7 @@ export const ManagedResourceDetailsIndicator = ({
     <div className="flex-container-h middle ManagedResourceDetailsIndicator">
       <HoverablePopover template={helpText} placement="left">
         <div className="md-logo flex-container-h middle">
-          <img src={require('./icons/md-logo-color.svg')} width="36px" />
+          <img src={managedDeliveryLogo} width="36px" />
         </div>
       </HoverablePopover>
       <div className="flex-container-v middle flex-1 sp-margin-l-left">

diff --git a/app/scripts/modules/core/src/svg.d.ts b/app/scripts/modules/core/src/svg.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ComponentType, SVGProps } from 'react';
+  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  const URL: string;
+  export default URL;
+}
diff --git a/app/scripts/modules/core/webpack.config.js b/app/scripts/modules/core/webpack.config.js
@@ -108,6 +108,14 @@ module.exports = {
           { loader: 'postcss-loader' },
         ],
       },
+      {
+        test: /\.svg$/,
+        issuer: {
+          test: /\.(tsx?|js)$/,
+        },
+        use: [{ loader: '@svgr/webpack' }],
+        exclude: exclusionPattern,
+      },
       {
         test: /\.html$/,
         exclude: exclusionPattern,

diff --git a/app/scripts/modules/docker/src/svg.d.ts b/app/scripts/modules/docker/src/svg.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ComponentType, SVGProps } from 'react';
+  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  const URL: string;
+  export default URL;
+}
diff --git a/app/scripts/modules/docker/webpack.config.js b/app/scripts/modules/docker/webpack.config.js
@@ -91,6 +91,14 @@ module.exports = {
         test: /\.css$/,
         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
       },
+      {
+        test: /\.svg$/,
+        issuer: {
+          test: /\.(tsx?|js)$/,
+        },
+        use: [{ loader: '@svgr/webpack' }],
+        exclude: exclusionPattern,
+      },
       {
         test: /\.html$/,
         exclude: exclusionPattern,

diff --git a/app/scripts/modules/ecs/src/ecs.module.ts b/app/scripts/modules/ecs/src/ecs.module.ts
@@ -20,7 +20,9 @@ import { CONTAINER_REACT } from './serverGroup/configure/wizard/container/Contai
 import { TASK_DEFINITION_REACT } from './serverGroup/configure/wizard/taskDefinition/TaskDefinition';
 import { ECS_SECURITY_GROUP_MODULE } from './securityGroup/securityGroup.module';
 
+import ecsLogo from './logo/ecs.logo.svg';
 import './logo/ecs.logo.less';
+
 import { ECS_SERVERGROUP_CONFIGURE_WIZARD_CLONESERVERGROUP_ECS_CONTROLLER } from './serverGroup/configure/wizard/CloneServerGroup.ecs.controller';
 import { ECS_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGS_COMPONENT } from './serverGroup/configure/wizard/advancedSettings/advancedSettings.component';
 import { ECS_SERVERGROUP_CONFIGURE_WIZARD_HORIZONTALSCALING_HORIZONTALSCALING_COMPONENT } from './serverGroup/configure/wizard/horizontalScaling/horizontalScaling.component';
@@ -80,7 +82,7 @@ module(ECS_MODULE, [
 ]).config(function() {
   CloudProviderRegistry.registerProvider('ecs', {
     name: 'EC2 Container Service',
-    logo: { path: require('./logo/ecs.logo.svg') },
+    logo: { path: ecsLogo },
     serverGroup: {
       transformer: 'ecsServerGroupTransformer',
       detailsTemplateUrl: require('./serverGroup/details/serverGroupDetails.html'),

diff --git a/app/scripts/modules/ecs/src/svg.d.ts b/app/scripts/modules/ecs/src/svg.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ComponentType, SVGProps } from 'react';
+  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  const URL: string;
+  export default URL;
+}
diff --git a/app/scripts/modules/ecs/webpack.config.js b/app/scripts/modules/ecs/webpack.config.js
@@ -103,6 +103,14 @@ module.exports = {
         test: /\.css$/,
         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
       },
+      {
+        test: /\.svg$/,
+        issuer: {
+          test: /\.(tsx?|js)$/,
+        },
+        use: [{ loader: '@svgr/webpack' }],
+        exclude: exclusionPattern,
+      },
       {
         test: /\.html$/,
         exclude: exclusionPattern,

diff --git a/app/scripts/modules/google/src/svg.d.ts b/app/scripts/modules/google/src/svg.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ComponentType, SVGProps } from 'react';
+  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  const URL: string;
+  export default URL;
+}
diff --git a/app/scripts/modules/google/webpack.config.js b/app/scripts/modules/google/webpack.config.js
@@ -103,6 +103,14 @@ module.exports = {
         test: /\.css$/,
         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
       },
+      {
+        test: /\.svg$/,
+        issuer: {
+          test: /\.(tsx?|js)$/,
+        },
+        use: [{ loader: '@svgr/webpack' }],
+        exclude: exclusionPattern,
+      },
       {
         test: /\.html$/,
         exclude: exclusionPattern,

diff --git a/app/scripts/modules/huaweicloud/src/svg.d.ts b/app/scripts/modules/huaweicloud/src/svg.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ComponentType, SVGProps } from 'react';
+  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  const URL: string;
+  export default URL;
+}
diff --git a/app/scripts/modules/huaweicloud/webpack.config.js b/app/scripts/modules/huaweicloud/webpack.config.js
@@ -103,6 +103,14 @@ module.exports = {
         test: /\.css$/,
         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
       },
+      {
+        test: /\.svg$/,
+        issuer: {
+          test: /\.(tsx?|js)$/,
+        },
+        use: [{ loader: '@svgr/webpack' }],
+        exclude: exclusionPattern,
+      },
       {
         test: /\.html$/,
         exclude: exclusionPattern,

diff --git a/app/scripts/modules/kubernetes/src/svg.d.ts b/app/scripts/modules/kubernetes/src/svg.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ComponentType, SVGProps } from 'react';
+  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  const URL: string;
+  export default URL;
+}
diff --git a/app/scripts/modules/kubernetes/src/v1/kubernetes.v1.module.ts b/app/scripts/modules/kubernetes/src/v1/kubernetes.v1.module.ts
@@ -12,6 +12,9 @@ import { KubernetesSecurityGroupReader } from 'kubernetes/shared/securityGroup/s
 import 'kubernetes/shared/validation/applicationName.validator';
 import 'kubernetes/shared/help/kubernetes.help';
 import 'kubernetes/shared/logo/kubernetes.logo.less';
+
+import kubernetesLogo from '../shared/logo/kubernetes.logo.svg';
+
 import { KUBERNETES_V1_AUTOSCALER_AUTOSCALER_WRITE_SERVICE } from './autoscaler/autoscaler.write.service';
 import { KUBERNETES_V1_CLUSTER_CLUSTER_KUBERNETES_MODULE } from './cluster/cluster.kubernetes.module';
 import { KUBERNETES_V1_CONTAINER_CONFIGURER_DIRECTIVE } from './container/configurer.directive';
@@ -94,7 +97,7 @@ module(KUBERNETES_V1_MODULE, [
       resultFormatter: 'kubernetesSearchResultFormatter',
     },
     logo: {
-      path: require('../shared/logo/kubernetes.logo.svg'),
+      path: kubernetesLogo,
     },
     image: {
       reader: 'kubernetesImageReader',

diff --git a/app/scripts/modules/kubernetes/src/v2/kubernetes.v2.module.ts b/app/scripts/modules/kubernetes/src/v2/kubernetes.v2.module.ts
@@ -38,6 +38,8 @@ import { KUBERNETES_DISABLE_MANIFEST_STAGE } from 'kubernetes/v2/pipelines/stage
 import { KubernetesSecurityGroupReader } from 'kubernetes/shared/securityGroup/securityGroup.reader';
 import { KUBERNETES_ROLLING_RESTART } from 'kubernetes/v2/manifest/rollout/RollingRestart';
 
+import kubernetesLogo from '../shared/logo/kubernetes.icon.svg';
+
 import 'kubernetes/shared/validation/applicationName.validator';
 import 'kubernetes/shared/help/kubernetes.help';
 import 'kubernetes/shared/logo/kubernetes.logo.less';
@@ -94,7 +96,7 @@ module(KUBERNETES_V2_MODULE, [
     name: 'Kubernetes',
     skin: 'v2',
     logo: {
-      path: require('../shared/logo/kubernetes.icon.svg'),
+      path: kubernetesLogo,
     },
     serverGroup: {
       CloneServerGroupModal: ManifestWizard,

diff --git a/app/scripts/modules/kubernetes/webpack.config.js b/app/scripts/modules/kubernetes/webpack.config.js
@@ -103,6 +103,14 @@ module.exports = {
         test: /\.css$/,
         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
       },
+      {
+        test: /\.svg$/,
+        issuer: {
+          test: /\.(tsx?|js)$/,
+        },
+        use: [{ loader: '@svgr/webpack' }],
+        exclude: exclusionPattern,
+      },
       {
         test: /\.html$/,
         exclude: exclusionPattern,