# Icons

SVG icon set used across the system; includes sprite or individual SVGs depending on build.

## Usage

Reference icons via `<svg>` use patterns or load the sprite.

## Installation

Include the compiled icon assets into your build or use the loader script where provided.

# @wmcadigital/ui-icons

SVG icon set used across the design system. Provides a small runtime helper to inject a sanitized SVG sprite into the page and a stylesheet that makes icons inherit the current theme colour.

## Install

Install from the monorepo package registry (or use the workspace package):

pnpm add @wmcadigital/ui-icons

## What this package provides

- `initIcons()` (default export): a small function that fetches a sprite (the demo uses `/demo/sprite.svg`), sanitises presentation attributes and injects it into the document so icons can be referenced with `<use>`.
- SCSS/CSS that makes icon SVGs inherit the current theme colour and exposes a CSS variable you can override: `--wmca-icons-fill`.
- Source SVGs organised under `src/icon/` (categories: caret, chevron, facilities, files, general, info-warnings, modes, portfolio, sharing, social, swift, etc.).

## Usage

1. Sprite + runtime (recommended for many icons):

```js
import initIcons from '@wmcadigital/ui-icons';

// Call once on app startup to inject the SVG sprite into the document
initIcons();
```

Then reference an icon in markup:

<svg class="wmca-icon" aria-hidden="true" width="16" height="16">
  <use href="#icon-facebook"></use>
</svg>

Notes:

• The demo server serves a sprite.svg file — adapt the fetch path in initIcons() if you host the sprite at a different URL.
• The package's JS sanitises the sprite to remove presentation attributes (so icons use currentColor).

2. Inline SVGs

You can also inline individual SVG files from src/icon/* when you need to keep an icon self-contained (for example if it requires unique accessibility text or animation). The shipped stylesheet applies fill: currentColor so SVGs will pick up the surrounding color value.

<svg class="wmca-icon" aria-hidden="true" width="20" height="20">...inline svg content...</svg>

Accessibility

• Decorative icons should use aria-hidden="true" so they are ignored by assistive technology.
• If an icon conveys meaning, make it accessible by providing a text alternative: either a visible label or a title element inside the SVG and ensure aria-hidden is not set.
• Consider pairing non-decorative icons with an off-screen label for screen readers.

Customisation

• Override the icon colour using the CSS variable --wmca-icons-fill, or directly set color on the icon container. The SCSS sets --wmca-icons-fill to the theme primary colour by default.

Example:

.my-button .wmca-icon {
  color: #0a66c2;
}
/* or override the variable */
:root {
  --wmca-icons-fill: #0a66c2;
}

Development

• Source SVGs are in src/icon/<category>/.
• The runtime helper src/index.ts fetches /demo/sprite.svg in development; when deploying you should generate and serve a sprite file and ensure the fetch path is correct or provide your own injection mechanism.