adding icon for docs and api link (#196)

open-metadata · Aug 16, 2021 · c2a9ea9 · c2a9ea9
1 parent f6dd78f
commit c2a9ea9
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/api.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/api.svg
diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/doc.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/doc.svg
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx b/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx
@@ -139,7 +139,12 @@ const Appbar: React.FC = (): JSX.Element => {
               to={{
                 pathname: 'https://docs.open-metadata.org/',
               }}>
-              {/* <i className="fas fa-file-alt tw-pr-2" /> */}
+              <SVGIcons
+                alt="Doc icon"
+                className="tw-align-middle tw--mt-0.5 tw-mr-0.5"
+                icon="doc"
+                width="12"
+              />
               <span>Docs</span>
             </NavLink>
             <NavLink
@@ -149,7 +154,12 @@ const Appbar: React.FC = (): JSX.Element => {
               to={{
                 pathname: '/docs',
               }}>
-              {/* <i className="fas fa-sitemap tw-pr-2" /> */}
+              <SVGIcons
+                alt="API icon"
+                className="tw-align-middle tw--mt-0.5 tw-mr-0.5"
+                icon="api"
+                width="12"
+              />
               <span>API</span>
             </NavLink>
             <div data-testid="dropdown-profile">

diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx b/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx
@@ -1,7 +1,9 @@
 import React, { FunctionComponent } from 'react';
 import IconGoogle from '../assets/img/google-icon.png';
+import IconAPI from '../assets/svg/api.svg';
 import IconSuccess from '../assets/svg/check.svg';
 import IconAsstest from '../assets/svg/data-assets.svg';
+import IconDoc from '../assets/svg/doc.svg';
 import IconError from '../assets/svg/error.svg';
 import IconCheckCircle from '../assets/svg/ic-check-circle.svg';
 import IconDelete from '../assets/svg/ic-delete.svg';
@@ -100,6 +102,8 @@ export const Icons = {
   SERVICE: 'service',
   USERS: 'users',
   TERMS: 'terms',
+  DOC: 'doc',
+  API: 'api',
 };
 
 const SVGIcons: FunctionComponent<Props> = ({
@@ -297,6 +301,14 @@ const SVGIcons: FunctionComponent<Props> = ({
     case Icons.TERMS:
       IconComponent = IconTerns;
 
+      break;
+    case Icons.DOC:
+      IconComponent = IconDoc;
+
+      break;
+    case Icons.API:
+      IconComponent = IconAPI;
+
       break;
 
     default: