abaabil.icon

Icon Component Documentation

Overview

The Icon component is a lightweight and flexible SVG icon component for React applications. It allows you to easily include icons in your application using a centralized sprite sheet, ensuring a consistent and efficient way to manage your iconography.

Features:

• Customizable Sizing: The component supports different sizes, allowing you to scale icons according to your design requirements.
• Accessibility Support: Includes options for making icons either decorative or informative, with appropriate ARIA attributes.
• SVG Sprite Usage: Icons are referenced from an external SVG sprite sheet, making it easy to manage and update icons across your application.

Installation

You can install the Icon component using npm:

npm install abaabil.icon

Props

id

• Type: string
• Description: The ID of the icon within the SVG sprite sheet. This ID is used to reference the specific icon you want to display.

size

• Type: string
• Default: 'base'
• Options: 'sm', 'base', 'lg'
• Description: Specifies the size of the icon. The available options correspond to different width and height values:
  • 'sm': Small size (w-4 h-4)
  • 'base': Base size (w-6 h-6)
  • 'lg': Large size (w-8 h-8)

className

• Type: string
• Description: Additional CSS classes to apply to the icon for custom styling.

aria-label

• Type: string
• Description: Provides an accessible label for the icon. Use this prop when the icon conveys meaningful information that needs to be announced by screen readers. If provided, the aria-hidden attribute is automatically set to false.

aria-hidden

• Type: boolean
• Default: true (when no aria-label is provided)
• Description: Controls whether the icon is hidden from screen readers. By default, the icon is hidden (aria-hidden="true"), but if an aria-label is provided, this attribute is automatically set to false.

Accessibility Considerations

• Decorative Icons: If the icon is purely decorative and does not convey any meaningful content, the aria-hidden="true" attribute is applied by default. This ensures that screen readers ignore the icon, improving the overall accessibility experience.

• Informative Icons: If the icon conveys important information (such as an error or success indicator), provide an aria-label prop to describe the icon. This makes the icon accessible to users relying on screen readers, ensuring that they receive the same information as sighted users.

Example Usage

Basic Icon (Decorative)

<Icon id="checkmark" />

In this example, the icon is decorative and does not require any additional accessibility features. The aria-hidden="true" attribute is applied by default.

Informative Icon (With aria-label)

<Icon id="checkmark" aria-label="Success" />

Here, the icon represents a "Success" status and therefore includes an aria-label. This makes the icon accessible to screen readers, ensuring that users are informed about the icon's meaning.

Large Icon with Custom Styling

<Icon id="alert" size="lg" className="text-red-500" />

This example shows how to render a large icon with custom styling applied via the className prop. The icon will have a large size and be colored red using Tailwind CSS utilities.

Best Practices

1. Always use aria-label for informative icons to ensure that their meaning is conveyed to users who rely on screen readers.
2. Use decorative icons sparingly and make sure they are correctly marked with aria-hidden="true" so they do not clutter the screen reader experience.
3. Consistently manage icon sizes using the provided size prop to ensure a cohesive visual design throughout your application.