# `@theorchard/suite-icons`

This library contains icons used by the Suite applications. That includes glyphs, outlines, store, apps and company icons.

## Class names

Make sure your icon has the correct class names.

**Glyphs**:

-   Icon
-   Glyph
-   [name]Glyph

**Outlines:**

-   Icon
-   OutlineIcon
-   [name]OutlineIcon

**AppIcons:**

-   Icon
-   AppIcon
-   [name]AppIcon

**CompanyIcons** (formerly `BrandIcon`):

-   Icon
-   BrandIcon
-   [name]BrandIcon

**StoreIcons:**

-   Icon
-   StoreIcon
-   [name]StoreIcon

## Adding an App icon

App icons are icons for our suite applications. Each icon needs to support our themes for our brands ( orchard, awal ).

Add your icon to:

-   src/icons/apps/[your app name]

Then include your icon in the [AppIcon component](./src/components/appIcon/appIcon.tsx)

## SVG element ids

Make sure that your icons uses properly namespaced element ids.

**Don't:**

```tsx
<svg className="Icon AppIcon InsightsAppIcon">
    <path fill="url(#a)" />
    <defs>
        <linearGradient id="a" />
    </defs>
</svg>
```

**Do:**

```tsx
<svg className="Icon AppIcon InsightsAppIcon">
    <path fill="url(#InsightsAppIconGradient)" />
    <defs>
        <linearGradient id="InsightsAppIconGradient" />
    </defs>
</svg>
```

The element ids for e.g a gradient, should be prefixed with the name of the icon. This is enforced in our unit tests.

## Figma Code Connect

To run Figma commands, `FIGMA_ACCESS_TOKEN` in `.env` must be populated with a Figma PAT. The token requires `library_content:read`, `file_content:read` and`file_code_connect:write`.

-   `figma:generate-glyph-icons`: Fetches all icons in Figma, and generates code connect definitions for each one.
-   `figma:publish`: Publishes code connect definitions.