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 ? ( + + {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', }, ];