diff --git a/src/components/GuideTile.js b/src/components/GuideTile.js
index 43b81db80..ac058bfe9 100644
--- a/src/components/GuideTile.js
+++ b/src/components/GuideTile.js
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import FeatherIcon from './FeatherIcon';
+import NewRelicIcon from '../components/NewRelicIcon';
import cx from 'classnames';
import { navigate } from 'gatsby';
import styles from './GuideTile.module.scss';
@@ -9,7 +10,7 @@ const GuideTile = ({ icon, minutes, title, description, path, className }) => (
{icon && (
-
+
)}
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index a7308f2c4..56553b5cd 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -4,6 +4,7 @@ import { Link } from 'gatsby';
import cx from 'classnames';
import { BreadcrumbContext } from './BreadcrumbContext';
import FeatherIcon from './FeatherIcon';
+import NewRelicIcon from './NewRelicIcon';
import pages from '../data/sidenav.json';
import styles from './Navigation.module.scss';
@@ -15,11 +16,10 @@ const renderNav = (pages, depthLevel = 0) => {
const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
const isHomePage = crumbs.length === 0 && depthLevel === 0;
const iconLibrary = {
- 'Collect data': 'upload-cloud',
- 'Explore data': 'bar-chart',
- 'Build apps': 'box',
- 'Automate workflows': 'cpu',
- 'Explore docs': 'book-open',
+ 'Collect data': 'collectData',
+ 'Build apps': 'buildApps',
+ 'Automate workflows': 'automation',
+ 'Explore docs': 'developerDocs',
};
const groupedPages = pages.reduce((groups, page) => {
@@ -42,7 +42,7 @@ const renderNav = (pages, depthLevel = 0) => {
);
const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
const headerIcon = depthLevel === 0 && (
-
diff --git a/src/components/NewRelicIcon.js b/src/components/NewRelicIcon.js
new file mode 100644
index 000000000..bc7cb1a25
--- /dev/null
+++ b/src/components/NewRelicIcon.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './NewRelicIcon.module.scss';
+
+const NewRelicIcon = ({ className, name, size = '1em' }) => {
+ const paths = NEWRELIC_ICONS[name];
+
+ return paths ? (
+
+ ) : null;
+};
+
+const NEWRELIC_ICONS = {
+ automation: (
+ <>
+
+
+
+
+
+
+
+
+ >
+ ),
+ buildApps: (
+ <>
+
+
+
+ >
+ ),
+ collectData: (
+ <>
+
+
+
+ >
+ ),
+ developerDocs: (
+ <>
+
+
+
+ >
+ ),
+};
+
+NewRelicIcon.propTypes = {
+ className: PropTypes.string,
+ name: PropTypes.oneOf(Object.keys(NEWRELIC_ICONS)).isRequired,
+ size: PropTypes.string,
+};
+
+export default NewRelicIcon;
diff --git a/src/components/NewRelicIcon.module.scss b/src/components/NewRelicIcon.module.scss
new file mode 100644
index 000000000..6c6f7e56f
--- /dev/null
+++ b/src/components/NewRelicIcon.module.scss
@@ -0,0 +1,7 @@
+.icon {
+ fill: none;
+ stroke: currentColor;
+ stroke-width: 1.5;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index ad29e9509..a3684fc32 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -21,21 +21,21 @@ const getStartedGuides = [
description:
'Define, visualize, and get alerts on the data you want using custom events',
path: '/collect-data/custom-events',
- icon: 'bar-chart',
+ icon: 'collectData',
},
{
minutes: 7,
title: 'Add tags to apps',
description: `Add tags to applications you instrument for easier filtering and organization`,
path: '/automate-workflows/add-tags-to-apps',
- icon: 'cpu',
+ icon: 'automation',
},
{
minutes: 12,
title: 'Build a Hello, World! app',
description: `Build a Hello, World! app and publish it to your local New Relic One Catalog`,
path: '/build-apps/build-hello-world-app',
- icon: 'box',
+ icon: 'buildApps',
},
];