Render icon as a svg instead of img tag to support dark theme

PuneetPunamiya · Jun 8, 2022 · 084aed5 · 084aed5
1 parent 8703892
commit 084aed5
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 5 deletions.
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/add-actions.ts b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/add-actions.ts
@@ -19,6 +19,7 @@ export type AddAction = ExtensionDeclaration<
  icon?: CodeRef<React.ReactNode>;
  /** Optional access review to control visibility / enablement of the action. */
  accessReview?: AccessReviewResourceAttributes[];
+ iconRenderAs?: 'svg' | 'img';
  }
 >;
 

diff --git a/frontend/packages/dev-console/src/components/add/AddCardItem.scss b/frontend/packages/dev-console/src/components/add/AddCardItem.scss
@@ -16,6 +16,10 @@
  // temporary fix since --pf-global--FontSize--md is being computed to 14px instead of 16px
  font-size: var(--pf-global--FontSize--md);
  margin-right: var(--pf-global--spacer--sm);
+ svg {
+ fill: var(--pf-global--Color--100);
+ vertical-align: -0.125em;
+ }
  }
 
  &__title {

diff --git a/frontend/packages/dev-console/src/components/add/AddCardItem.tsx b/frontend/packages/dev-console/src/components/add/AddCardItem.tsx
@@ -13,14 +13,23 @@ type AddCardItemProps = {
 
 const AddCardItem: React.FC<AddCardItemProps> = ({
  action: {
- properties: { id, label, icon, href, description },
+ properties: { id, label, icon, href, description, iconRenderAs },
  },
  namespace,
 }) => {
  const fireTelemetryEvent = useTelemetry();
  const [showDetails] = useShowAddCardItemDetails();
 
  const actionIcon = (): JSX.Element => {
+ if (typeof icon === 'string' && iconRenderAs === 'svg') {
+ return (
+ <span className="odc-add-card-item__icon" aria-hidden="true">
+ <svg viewBox="0 0 100 100" width="1.2em">
+ <use href={`${icon}#Layer_1`} />
+ </svg>
+ </span>
+ );
+ }
  if (typeof icon === 'string') {
  return <img className="odc-add-card-item__icon" src={icon} alt={label} aria-hidden="true" />;
  }

diff --git a/frontend/packages/helm-plugin/console-extensions.json b/frontend/packages/helm-plugin/console-extensions.json
@@ -124,7 +124,8 @@
  "href": "/catalog/ns/:namespace?catalogType=HelmChart",
  "label": "%helm-plugin~Helm Chart%",
  "description": "%helm-plugin~Browse the catalog to discover and install Helm Charts%",
- "icon": { "$codeRef": "helmUtils.helmCatalogIconSVG" }
+ "icon": { "$codeRef": "helmUtils.helmCatalogIconSVG" },
+ "iconRenderAs": "svg"
  }
  },
  {

diff --git a/frontend/packages/knative-plugin/console-extensions.json b/frontend/packages/knative-plugin/console-extensions.json
@@ -466,6 +466,7 @@
  "label": "%knative-plugin~Broker%",
  "description": "%knative-plugin~Create a Broker to define an event mesh for collecting a pool of events and route those events based on attributes, through triggers%",
  "icon": { "$codeRef": "icons.channelIconSVG" },
+ "iconRenderAs": "svg",
  "accessReview": [{ "group": "eventing.knative.dev", "resource": "brokers", "verb": "create" }]
  }
  },
@@ -481,6 +482,7 @@
  "label": "%knative-plugin~Channel%",
  "description": "%knative-plugin~Create a Knative Channel to create an event forwarding and persistence layer with in-memory and reliable implementations%",
  "icon": { "$codeRef": "icons.channelIconSVG" },
+ "iconRenderAs": "svg",
  "accessReview": [
  { "group": "eventing.knative.dev", "resource": "channels", "verb": "create" }
  ]

diff --git a/frontend/packages/knative-plugin/src/imgs/channel.svg b/frontend/packages/knative-plugin/src/imgs/channel.svg
diff --git a/frontend/packages/pipelines-plugin/src/images/pipeline.svg b/frontend/packages/pipelines-plugin/src/images/pipeline.svg
diff --git a/frontend/packages/rhoas-plugin/console-extensions.json b/frontend/packages/rhoas-plugin/console-extensions.json
@@ -72,6 +72,7 @@
  "label": "%rhoas-plugin~Managed Services%",
  "description": "%rhoas-plugin~Discover managed services to simplify deployments and reduce operational overhead & complexities%",
  "icon": { "$codeRef": "constants.cloudServicesIcon" },
+ "iconRenderAs": "svg",
  "accessReview": [
  { "group": "apps.openshift.io", "resource": "deploymentconfigs", "verb": "create" },
  { "group": "route.openshift.io", "resource": "routes", "verb": "create" },

diff --git a/frontend/public/imgs/logos/helm.svg b/frontend/public/imgs/logos/helm.svg