Skip to main content

Iconography

Icons are graphic symbols that are used to represent concepts, objects or actions.

Overview

Our packages

We have a number of different icon packages available for use in our applications. We have a package for each framework we support, as well as a base package for the icons themselves.

Vanilla JS (pie-icons)

@justeattakeaway/pie-icons is our base icon package, from which our other icon packages extend.

It is essentially a collection of the SVG files that make up the PIE Iconset. This means that you can use these icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe).

This package also provides a JavaScript API for the iconset, and this is what is used to build the framework-specific icons for Web Components, React and Vue.

Usage - Client-side Javascript

To use the icons in your application, you need to include the package in your project, add the icons using data-attributes and invoke the replace() function:

Installation

You can install the package using npm or yarn:

npm install @justeattakeaway/pie-icons --save

yarn add @justeattakeaway/pie-icons

Include the package

You can load directly from the installed package, or from a CDN provider.

<script src="path/to/dist/pie-icons.js"></script>

<!-- choose one -->
<script src="https://unpkg.com/@justeattakeaway/pie-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/@justeattakeaway/pie-icons/dist/pie-icons.min.js"></script>

HTML

Simply add a data-pie-icons attribute with the icon name to an element. You can see all of our icons on the library page.

<i data-pie-icons="menu"></i>

Invoke the package

Calling the replace() function will replace all elements with the data-pie-icons attribute with the relevant icon.

<script>
  window['pie-icons'].default.replace();
</script>

Usage - NodeJS

Installation

You can install the package using npm or yarn:

npm install @justeattakeaway/pie-icons --save

yarn add @justeattakeaway/pie-icons

Import the package

Simply import the package in your application where needed:

import pieIcons from '@justeattakeaway/pie-icons';

Call the APIs

The package exposes a number of APIs for you to use:

const { icons } = pieIcons.default;

icons.x
// {
//    name: 'x',
//    contents: '<line ... /><line ... />`,
//    tags: ['cancel', 'close', 'delete', 'remove'],
//    attrs: {
//      class: 'c-pieIcon c-pieIcon--x',
//      xmlns: 'http://www.w3.org/2000/svg',
//    },
//    toSvg: [Function],
// }

icons.x.toSvg()
// <svg class="c-pieIcon c-pieIcon--x" ...><line ... /><line ... /></svg>

icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
// <svg class="c-pieIcon c-pieIcon--x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>

React (pie-icons-react)

This package generates an icon set for React applications using the base pie-icons package. The SVGs in pie-icons are compiled into React components.

The icons are bundled as CommonJS and ES Modules, to be more easily adopted for modern React Applications.

Usage

Installation

You can install the package using npm or yarn:

npm install @justeattakeaway/pie-icons-react --save

yarn add @justeattakeaway/pie-icons-react

Import into your project

Simply import the icons you need into your project:

import { IconAlertTriangleLarge, IconCalendar } from "@justeattakeaway/pie-icons-react";

export default function App() {
  return (
    <div className="App">
      <IconCalendar />
      <IconAlertTriangleLarge />
    </div>
  );
}

Size

Icons are made available in different size variants:

  • small
  • large, when its name has the Large suffix

Small icons default size is xs and can use one of the following pre-determined values for size: xs, s, m, l, xl, and xxl. You can learn more about small icon sizes here.

Large icons size default and minimum value is 32. Values larger than the minimum must be multiples of 8, otherwise they will fallback to the default value. You can learn more about large icon sizes here.

Example:

<IconAlertTriangle size="l" />
<IconAlertTriangleLarge size={40} />

Vue (pie-icons-vue)

This package generates an icon set for Vue.js applications using the base pie-icons package. The SVGs in pie-icons are compiled into single file components that can be imported into Vue applications.

Usage

Installation

You can install the package using npm or yarn:

npm install @justeattakeaway/pie-icons-vue --save

yarn add @justeattakeaway/pie-icons-vue

Import into your project

Simply import the icons you need into your project:

  <template>
      <icon-calendar />
      <icon-alert-triangle-large />
  </template>

  <script>
  import { IconCalendar, IconAlertTriangleLarge } from '@justeattakeaway/pie-icons-vue';

  export default {
      components: {
          IconCalendar,
          IconAlertTriangleLarge
      }
  };

  </script>
  <style>
    svg {
      fill: {PIE_ALIAS_COLOR_TOKEN};
    }
  </style>

Size

Icons are made available in different size variants:

  • small
  • large, when its name has the Large suffix

Small icons default size is xs and can use one of the following pre-determined values for size: xs, s, m, l, xl, and xxl. You can learn more about small icon sizes here.

Large icons size default and minimum value is 32. Values larger than the minimum must be multiples of 8, otherwise they will fallback to the default value. You can learn more about large icon sizes here.

Example:

<IconAlertTriangle size="l" />
<IconAlertTriangleLarge size="40" />

Web Components (pie-icons-webc)

This package generates a framework-agnostic Web Component icon set for web applications. It uses the base pie-icons package. The SVGs in pie-icons are compiled into Lit web components.

Usage - In Lit Components

Installation

npm install @justeattakeaway/pie-icons-webc --save

yarn add @justeattakeaway/pie-icons-webc

Import into your project

We suggest importing the bundle for an individual component directly.


```js
import '@justeattakeaway/pie-icons-webc/dist/IconAppRestaurant.js';

export class MyAmazingComponent extends LitElement {
  render () {
    return html`
      <h2>
        This is a heading
        <icon-app-restaurant size="xl" />
      </h2>`;
  }
}

Size

Icons are made available in different size variants:

  • small
  • large, when its name has the Large suffix

Small icons default size is xs and can use one of the following pre-determined values for size: xs, s, m, l, xl, and xxl. You can learn more about small icon sizes here.

Large icons size default and minimum value is 32. Values larger than the minimum must be multiples of 8, otherwise they will fallback to the default value. You can learn more about large icon sizes here.

Example:

<IconAlertTriangle size="l" />
<IconAlertTriangleLarge size="40" />