Skip to main content

the-wall-icons

the-wall-icons provides an easy way to use all the icons available within the-wall.

Table Of Contents​

The Goal​

The goal of this package is to have a Web and Native reusable GenericIcon component so that all icons are always updated across the app.

How To Update Icons​

Icons available both in the-wall-icons and in Prismic are stored and managed using Github actions.

Updating Icons in the-wall-icons​

  1. First of all, please check if the icon you need does not exist already. You can check the existing icons here.

  2. To update any icon in this package, request the Design Team to make the necessary changes to the Icon Suite's visual specs.

  3. Once the Design Team has updated the visual specs, you may run the Update Icons action.

    This will automatically generate a Pull Request (PR) containing the required changes. It is very likely that new PRs with new baselines will also be generated automatically.

  4. Review all Pull Requests to ensure the updates meet expectations.

  5. Following the standard development process, once the PRs are reviewed and approved, merge the changes into the main branch. The new icon will become available when a new version of the-wall-icons is released.

Note: Do not forget to edit the commit(s) message(s) to include the corresponding Jira ticket(s) ID(s). Please align this with the design team.

Updating Icons in Prismic​

After each release of the the-wall-icons package, manually trigger the Sync Prismic Icons action.

This action will automatically invoke another GitHub action in the tbd-prismic-custom-type repository to update the icons in Prismic.

How To Use​

Install it using NPM

npm install @ppb/the-wall-icons

or using Yarn

yarn add @ppb/the-wall-icons

To use the GenericIcon component we need to pass the icon name and a color. For the name and color values you should follow what is defined on figma for each specific spec.

All the available icons can be found here.

Web Apps​

import { GenericIcon } from "@ppb/the-wall-icons/GenericIcon/GenericIcon";
import { SystemIconName } from "@ppb/the-wall-icons";

<GenericIcon name={SystemIconName.CHEVRON_LEFT} color="var(--header-icon-back-icon-colour)" />;

Native Apps​

import { GenericIcon } from "@ppb/the-wall-icons/GenericIcon/GenericIcon";
import { SystemIconName } from "@ppb/the-wall-icons";
import { tokens } from "@ppb/the-wall-common/base-theme";

<GenericIcon name={SystemIconName.CHEVRON_LEFT} color={tokens.HeaderIconBackIconColour} />;
  • Note: Icons are also utilized in native applications. Confirm the correct path and usage for icons in native components to ensure consistency and correct references

Naming and Namespacing Icons​

  • Namespacing: Carefully manage the namespaces across brands to avoid conflicts and ensure clarity in icon usage across different platforms and brands

Traps​

Traps are a specific subset of icons for greyhound races that rarely change. They're brand agnostic and are currently used for three countries: US, UK and AU.

Usage​

They differ from normal icon implementation by not requiring the GenericIcon component but rather a more specific TrapIcon component.

Web Apps/Native​

import { TrapIcon } from "@ppb/the-wall-icons/TrapIcon/TrapIcon";
import { SystemIconName } from "@ppb/the-wall-icons";

<TrapIcon region={"US"} trap={"0"} />;

How To Update​

Traps are not expected to change frequently, so no automated update process has been implemented. If you need to update a trap, follow these steps:

  1. Download the traps pack from the Figma specs.
  2. Replace the existing the-wall-icons traps pack with the one you just downloaded.
  3. Run yarn svg:traps — this will optimize the SVGs and, in our case, remove Figma’s preset width and height values from exported SVGs.
  4. Open a PR with the changes and follow the standard the-wall PR review process.