Creating a icon component

Now we need another component to render the icon. This can then be imported by the Loyalty component and used. There are already icons inside <theme-root>/components/icons so this is a good place for another.

Create a new file called LoyaltyIcon.jsx inside the <theme-rot>/components/icons directory and add the following code to it:

<theme-root>/components/icons/LoyaltyIcon.jsx
import React from 'react';
import Icon from '@shopgate/pwa-common/components/Icon';

const content = '<path d="M169.41 158.58l-9-9A1.987 1.987 0 0 0 159 149h-7a2.006 2.006 0 0 0-2 2v7a2 2 0 0 0 .59 1.42l9 9a1.987 1.987 0 0 0 1.41.58 1.955 1.955 0 0 0 1.41-.59l7-7A1.955 1.955 0 0 0 170 160a2.02 2.02 0 0 0-.59-1.42zM153.5 154a1.5 1.5 0 1 1 1.5-1.5 1.5 1.5 0 0 1-1.5 1.5zm11.77 8.27l-4.27 4.27-4.27-4.27a2.5 2.5 0 0 1 1.77-4.27 2.47 2.47 0 0 1 1.77.74l.73.72.73-.73a2.503 2.503 0 0 1 3.54 3.54z"/>';

const Loyalty = props => <Icon content={content} viewBox="150 149 20 20" {...props} />;

export default Loyalty;

Now we can integrate this icon into our Loyalty component:

<theme-root>/pages/Product/components/Header/components/LoyaltyPoints.jsx
import React from 'react';
import PropTypes from 'prop-types';
import LoyaltyIcon from 'Components/icons/LoyaltyIcon';

const Loyalty = ({ points }) => (
  points ? (
    <div>
      <LoyaltyIcon />
      Points: {points}
    </div>
  ) : null
);

Loyalty.propTypes = {
  points: PropTypes.number,
};

Loyalty.defaultProps = {
  points: 0,
};

export default Loyalty;