Overview

GlyphKit is an extensive icon library designed to be friendly to use, highly performant, flexible to any need, and in a constant state of evolution. This documentation will help you get started with using the library effectively.

Performance

GlyphKit includes built-in caching for SVG content:

SVGs are cached after the first load.
Subsequent requests use cached content.
Memory-efficient Map implementation.
Automatic error handling.

Browser Support

Supported browsers include:

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Note: IE11 is not supported.

Getting Started

Installation

Choose your preferred package manager:


# npm
npm install @glyphkit/glyphkit

# yarn
yarn add @glyphkit/glyphkit

# pnpm
pnpm add @glyphkit/glyphkit

Quick Start

Once installed correctly, its pretty simple to get started... Just import the package where will be consumed then add the icon reference like so.


import { Icon } from '@glyphkit/glyphkit';

function App() {
  return (
    <Icon
      name="arrow-right"
      size={24}
      color="#000"
    />
  );
}

API Reference

Icon Props

Prop	Type	Default	Description
`name`	`string`	Required	Icon name (without .svg extension)
`size`	`number`	24	Icon size in pixels
`color`	`string`	'currentColor'	Icon color
`className`	`string`	''	Additional CSS classes
`aria-hidden`	`boolean`	undefined	Whether to hide the icon from screen readers
`aria-label`	`string`	undefined	Accessible label for the icon
`role`	`string`	'img' if aria-label present	ARIA role for the icon
`onError`	`(error: Error) => void`	undefined	Error callback
`onLoad`	`() => void`	undefined	Success callback

Usage

Error Handling

The onError and onLoad props can be used for debugging purposes. The onError prop allows you to handle any issues that arise when loading an icon, while the onLoad prop can be used to confirm successful loading.


<Icon
  name="user"
  onError={(error) => console.error('Icon failed to load:', error)}
  onLoad={() => console.log('Icon loaded successfully')}
/>

Color

The color prop can handle various formats, including hex, rgba, and even advanced logic for dynamic color changes. This allows for flexible styling based on application state or user interactions.


<Icon
  name="heart"
  color={isLiked ? '#ff0000' : '#cccccc'}
  size={24}
/>

Size

The size prop allows you to specify the size of the icon. You can use dynamic size attributes to adjust the icon's size based on your application's needs. For example, you can specify sizes likex_16 or x_24 in the icon name to indicate the desired size.


<Icon
  name="x_24"
  size={24}
/>

Accessibility

GlyphKit icons support ARIA attributes for proper accessibility implementation. Here are the common patterns for different use cases:

Decorative Icons

Icons that are purely decorative should have aria-hidden="true". This will not visually hide the icon, but it will hide the element from assistive technology.


<Icon 
  name="heart"
  aria-hidden={true}
  size={24}
/>

Interactive Icons

If the icon conveys meaning, it should have alternate text defined by adding an aria-label.


<Icon
  name="heart"
  aria-label="Add to favorites"
  size={24}
/>

Icons Within Interactive Elements

When an icon is inside another element that it's describing, the parent element should have the aria-label, and the icon should be hidden using aria-hidden.


<button aria-label="Add to favorites">
  <Icon
    name="heart"
    aria-hidden={true}
    size={24}
  />
</button>

Need Help?

Hopefully, this documentation has helped you get started. If you have any questions, requests, or concerns, please reach out to us at hello@glyphkit.com.

GlyphKit Docs