GOAT is Primer's design system.
This package manages:

• icons

Usage

With the Icon component

import { Icon } from '@primer-io/goat';
import { Activity } from '@primer-io/goat-icons';

<Icon as={Activity}>

By itself

import { Activity } from '@primer-io/goat-icons';

<Activity.small />
<Activity.medium />
<Activity.default />

Add / update an icon

Icons are generated on build from our cdn https://goat-assets.production.core.primer.io. If an icon needs to be added/updated, simply run npm run build and open a PR with the changes.

How it works

Icon definitions are generated based on the contents of the svgs folder. The results are proxied objects containing the versions of the icon and a default version.

Icon versions

The icon versions are defined by specific suffixes in the file name, currently this is used to define size variations.

The proxy ensures that the default component is returned if a field is referenced that has no value. This fallback enables adding just one version of an icon.

Checked suffixes:

• medium
• small

Example 1

Svg names in the folder:

• some-icon-small
• some-icon-medium

Result:

export const SomeIcon = {
  small: SomeIconSmall,
  medium: SomeIconMedium,
  default: SomeIconMedium,
};

Example 2

Svg names in the folder:

• some-icon-without-size

Result:

export const SomeIconWithoutSize = {
  default: SomeIconWithoutSize,
};

Questions?

Ping us on Slack at #guild-web using any of:

• @guild-web-developers (engineers)
• @goatdesigners (designers)