From 35701f5899b39a869169d1aa692d51476bf542d4 Mon Sep 17 00:00:00 2001
From: Prabhat Khera <91852476+prabhat-org@users.noreply.github.com>
Date: Thu, 14 Jul 2022 13:44:56 +1200
Subject: [PATCH] svg support in icons.tsx (#7266)

---
 app/assets/icons/git-logo.svg |  3 ++
 app/react/components/Icon.tsx |  7 ++++
 app/react/components/Svg.tsx  | 65 +++++++++++++++++++++++++++++++++++
 3 files changed, 75 insertions(+)
 create mode 100644 app/assets/icons/git-logo.svg
 create mode 100644 app/react/components/Svg.tsx

diff --git a/app/assets/icons/git-logo.svg b/app/assets/icons/git-logo.svg
new file mode 100644
index 000000000..0ff160fa9
--- /dev/null
+++ b/app/assets/icons/git-logo.svg
@@ -0,0 +1,3 @@
+<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.3629 17.9077L15.5368 5.65985C14.6877 4.78038 13.3115 4.78038 12.4624 5.65985L10.0975 8.10918L13.3098 11.4363C13.5655 11.327 13.8452 11.2663 14.1389 11.2663C15.3414 11.2663 16.3162 12.2758 16.3162 13.5213C16.3162 13.8255 16.2575 14.1151 16.152 14.38L19.227 17.5648C19.4827 17.4555 19.7624 17.3948 20.0561 17.3948C21.2586 17.3948 22.2334 18.4044 22.2334 19.6499C22.2334 20.8953 21.2586 21.9049 20.0561 21.9049C18.8536 21.9049 17.8788 20.8953 17.8788 19.6499C17.8788 19.3457 17.9374 19.056 18.0429 18.7912L14.9757 15.6145V23.639C15.7624 23.979 16.3156 24.7827 16.3156 25.7212C16.3156 26.9666 15.3409 27.9762 14.1383 27.9762C12.9358 27.9762 11.961 26.9666 11.961 25.7212C11.961 24.7833 12.5143 23.979 13.3009 23.639V15.6035C12.5143 15.2635 11.961 14.4598 11.961 13.5213C11.961 13.2172 12.0196 12.9275 12.1252 12.6627L8.91281 9.33559L0.636858 17.9077C-0.212286 18.7872 -0.212286 20.2125 0.636858 21.0919L12.4629 33.3404C13.3121 34.2198 14.6882 34.2198 15.5374 33.3404L27.3634 21.0919C28.2126 20.2125 28.2126 18.7872 27.3634 17.9077H27.3629Z" fill="#E15B39"/>
+</svg>
diff --git a/app/react/components/Icon.tsx b/app/react/components/Icon.tsx
index 112c65ba9..8413c1410 100644
--- a/app/react/components/Icon.tsx
+++ b/app/react/components/Icon.tsx
@@ -3,6 +3,8 @@ import { ComponentType, ReactNode, useEffect } from 'react';
 import featherIcons from 'feather-icons';
 import { isValidElementType } from 'react-is';
 
+import Svg, { SvgIcons } from './Svg';
+
 export interface IconProps {
   icon: ReactNode | ComponentType<unknown>;
   featherIcon?: boolean;
@@ -51,6 +53,11 @@ export function Icon({ icon, feather, className, mode, size }: Props) {
     );
   }
 
+  if (icon.indexOf('svg-') === 0) {
+    const svgIcon = icon.replace('svg-', '');
+    return <Svg icon={svgIcon as keyof typeof SvgIcons} className={classes} />;
+  }
+
   if (feather) {
     return (
       <i
diff --git a/app/react/components/Svg.tsx b/app/react/components/Svg.tsx
new file mode 100644
index 000000000..cb2156838
--- /dev/null
+++ b/app/react/components/Svg.tsx
@@ -0,0 +1,65 @@
+import lightmode from '@/assets/ico/theme/lightmode.svg?c';
+import darkmode from '@/assets/ico/theme/darkmode.svg?c';
+import highcontrastmode from '@/assets/ico/theme/highcontrastmode.svg?c';
+import automode from '@/assets/ico/theme/auto.svg?c';
+import git from '@/assets/icons/git-logo.svg?c';
+import aws from '@/assets/ico/vendor/aws.svg?c';
+import azure from '@/assets/ico/vendor/azure.svg?c';
+import civo from '@/assets/ico/vendor/civo.svg?c';
+import digitalocean from '@/assets/ico/vendor/digitalocean.svg?c';
+import docker from '@/assets/ico/vendor/docker.svg?c';
+import dockercompose from '@/assets/ico/vendor/dockercompose.svg?c';
+import ecr from '@/assets/ico/vendor/ecr.svg?c';
+import github from '@/assets/ico/vendor/github.svg?c';
+import gitlab from '@/assets/ico/vendor/gitlab.svg?c';
+import google from '@/assets/ico/vendor/google.svg?c';
+import googlecloud from '@/assets/ico/vendor/googlecloud.svg?c';
+import kubernetes from '@/assets/ico/vendor/kubernetes.svg?c';
+import linode from '@/assets/ico/vendor/linode.svg?c';
+import microsoft from '@/assets/ico/vendor/microsoft.svg?c';
+import nomad from '@/assets/ico/vendor/nomad.svg?c';
+import openldap from '@/assets/ico/vendor/openldap.svg?c';
+import proget from '@/assets/ico/vendor/proget.svg?c';
+import quay from '@/assets/ico/vendor/quay.svg?c';
+
+export const SvgIcons = {
+  lightmode,
+  darkmode,
+  highcontrastmode,
+  automode,
+  git,
+  aws,
+  civo,
+  azure,
+  digitalocean,
+  docker,
+  dockercompose,
+  ecr,
+  github,
+  gitlab,
+  google,
+  googlecloud,
+  kubernetes,
+  linode,
+  microsoft,
+  nomad,
+  openldap,
+  proget,
+  quay,
+};
+
+interface SvgProps {
+  icon: keyof typeof SvgIcons;
+  className?: string;
+}
+
+function Svg({ icon, className }: SvgProps) {
+  const SvgIcon = SvgIcons[icon];
+  return (
+    <span className={className}>
+      <SvgIcon />
+    </span>
+  );
+}
+
+export default Svg;