adding icon for docs and api link (#196)

catalog-rest-service/src/main/resources/ui/src/assets/svg/api.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 512.086 512.086" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g xmlns="http://www.w3.org/2000/svg"><path d="m278.741 278.741-40.86 40.86-45.396-45.396 40.86-40.86-21.213-21.213-40.86 40.86-31.271-31.271-77.617 77.616c-36.291 36.291-37.314 94.688-3.087 132.237l-59.297 59.299 21.213 21.213 59.292-59.292c17.678 16.132 40.41 24.967 64.5 24.967 25.59 0 49.648-9.965 67.743-28.06l77.616-77.617-31.271-31.271 40.86-40.86zm-87.206 149.747c-12.429 12.428-28.953 19.273-46.53 19.273s-34.101-6.845-46.53-19.273l-14.877-14.878c-25.656-25.657-25.656-67.403 0-93.06l56.404-56.403 107.936 107.936z" fill="#000000" data-original="#000000" style="" class=""></path><path d="m512.086 21.213-21.213-21.213-59.292 59.292c-17.678-16.132-40.41-24.967-64.5-24.967-25.59 0-49.648 9.965-67.743 28.06l-77.616 77.617 150.362 150.362 77.617-77.616c36.291-36.291 37.314-94.689 3.087-132.237zm-83.598 170.322-56.404 56.403-107.936-107.936 56.403-56.404c12.429-12.428 28.953-19.273 46.53-19.273s34.101 6.845 46.53 19.273l14.877 14.877c25.656 25.657 25.656 67.403 0 93.06z" fill="#000000" data-original="#000000" style="" class=""></path></g></g></svg>

catalog-rest-service/src/main/resources/ui/src/assets/svg/doc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g xmlns="http://www.w3.org/2000/svg"><path d="m88 456c-8.837 0-16-7.164-16-16v-374c0-36.393 29.607-66 66-66h286c8.837 0 16 7.164 16 16v368c0 8.836-7.163 16-16 16s-16-7.164-16-16v-352h-270c-18.748 0-34 15.252-34 34v374c0 8.836-7.163 16-16 16z" fill="#000000" data-original="#000000" style="" class=""></path><path d="m424 512h-280c-39.701 0-72-32.299-72-72s32.299-72 72-72h280c8.837 0 16 7.164 16 16s-7.163 16-16 16h-280c-22.056 0-40 17.944-40 40s17.944 40 40 40h280c8.837 0 16 7.164 16 16s-7.163 16-16 16z" fill="#000000" data-original="#000000" style="" class=""></path><path d="m424 456h-280c-8.837 0-16-7.164-16-16s7.163-16 16-16h280c8.837 0 16 7.164 16 16s-7.163 16-16 16z" fill="#000000" data-original="#000000" style="" class=""></path><path d="m160 400c-8.837 0-16-7.164-16-16v-368c0-8.836 7.163-16 16-16s16 7.164 16 16v368c0 8.836-7.163 16-16 16z" fill="#000000" data-original="#000000" style="" class=""></path></g></g></svg>

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">

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: