Icons Use Cases

1. Icon Categories

The Icons package organizes all SVG assets into semantic categories. Each category can be imported independently for optimal tree-shaking.

2. Import Patterns

Category Imports (Recommended)

import * as arrows from '@universityofmaryland/web-icons-library/arrows';
import * as logos from '@universityofmaryland/web-icons-library/logos';
import * as social from '@universityofmaryland/web-icons-library/social';

// Each export is an SVG string
arrows.CHEVRON_SMALL;  // '<svg ...>...</svg>'
logos.UMD_LOGO_DARK;   // '<svg ...>...</svg>'

Main Namespace Import

import * as Icons from '@universityofmaryland/web-icons-library';

Icons.arrows.CHEVRON_SMALL;    // SVG string
Icons.logos.UMD_LOGO_DARK;     // SVG string
Icons.social.FACEBOOK;         // SVG string

3. Rendering Icons

Icon exports are raw SVG strings. Insert them into the DOM using innerHTML or framework-specific patterns.

Vanilla JavaScript

import * as arrows from '@universityofmaryland/web-icons-library/arrows';

const iconContainer = document.createElement('span');
iconContainer.innerHTML = arrows.CHEVRON_SMALL;
document.querySelector('#my-icon').appendChild(iconContainer);

React

import * as arrows from '@universityofmaryland/web-icons-library/arrows';

function Icon({ svg, label }: { svg: string; label: string }) {
  return (
    <span
      role="img"
      aria-label={label}
      dangerouslySetInnerHTML={{ __html: svg }}
    />
  );
}

// Usage
<Icon svg={arrows.CHEVRON_SMALL} label="Navigate forward" />

Sizing and Styling

/* SVG icons inherit color from their parent */
.icon-wrapper svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Custom sizing */
.icon-large svg {
  width: 2rem;
  height: 2rem;
}

4. Accessibility

Proper accessibility handling depends on whether the icon is decorative or conveys meaning.

Decorative Icons

Icons that are purely visual and do not convey information should be hidden from assistive technology:

<!-- Decorative: hidden from screen readers -->
<span aria-hidden="true">
  <!-- SVG icon inserted here -->
</span>

Meaningful Icons

Icons that convey information need a text alternative:

<!-- Meaningful: labeled for screen readers -->
<span role="img" aria-label="Search">
  <!-- SVG search icon inserted here -->
</span>

<!-- Icon with adjacent text (icon is decorative) -->
<button>
  <span aria-hidden="true"><!-- SVG icon --></span>
  Search
</button>

5. Logo Assets

The logos category contains official UMD brand assets in SVG format:

import * as logos from '@universityofmaryland/web-icons-library/logos';

// Insert the dark logo into a header
document.querySelector('.site-header').innerHTML = logos.UMD_LOGO_DARK;