@chantelle/pl-icon

Icon

Installation

yarn add @chantelle/icon

Usage

First, include the CSS in your HTML:

<link rel="stylesheet" href="node_modules/@chantelle/icon/dist/styles.css">

Note: you can import the CSS directly into your project if your bundler supports it:

 import '@chantelle/input/icon/styles.css';

Import the custom icon font in your project:

@font-face {
  font-family: 'Icomoon';
  src: url('node_modules/@chantelle/icon/dist/fonts/icomoon.eot');
  src: url('node_modules/@chantelle/icon/dist/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('node_modules/@chantelle/icon/dist/fonts/icomoon.woff') format('woff'),
  url('node_modules/@chantelle/icon/dist/fonts/icomoon.ttf') format('truetype'),
  url('node_modules/@chantelle/icon/dist/fonts/icomoon.svg#Icomoon') format('svg');
  font-weight: 400;
  font-style: normal;
}

React Component

import { Icon } from '@chantelle/icon';

ReactDOM.render(
  <Icon
    source='shoppingBag'
    accessibilityLabel='Label for Icon'
  />,
  container
);

CSS API

To use the Icon component, add the .pl-icon to the <span> element to apply the styles.

<span class="pl-icon pl-icon--shoppingBag" aria-label="Shopping Bag"></span>
<span class="pl-icon pl-icon--mapMarker" aria-label="Map Marker"></span>