abaabil

Getting Started

Interactive Components

Form Components

Data Display Components

Feedback Components

Layout & Navigation

Media Components

Icon

Symbolic visual element

A flexible Icon component that renders SVG icons from a sprite sheet, supporting various styles and accessibility features.

VersionLicenseDownloadsBundle Size (minified)Bundle Size (minified + gzip)

Overview

This documentation provides instructions on how to use the Icon component in your React projects. The Icon component is part of the abaabil.icon library.

import Icon from 'abaabil.icon';

Key Features

  • Renders SVG icons from a sprite sheet for optimal performance
  • Supports customizable styling through className prop
  • Implements accessibility features with aria-label and aria-hidden attributes
  • Consistent sizing and styling across different icons

Basic Usage

The Icon component can be used in your JSX to render SVG icons. You can customize the component by setting its properties such as id, className, and accessibility attributes.

Properties

The Icon component accepts the following properties:

id

Type: string

Description: The identifier of the icon in the sprite sheet.

className

Type: string

Description: Additional CSS classes to apply to the SVG element.

aria-label

Type: string

Description: Accessible label for the icon. If provided, aria-hidden is set to false.

aria-hidden

Type: boolean

Description: Determines if the icon should be hidden from assistive technologies.

Default: true if aria-label is not provided, false otherwise

Accessibility

The Icon component is designed with accessibility in mind:

  • Uses aria-label for providing accessible names to icons
  • Implements aria-hidden to hide decorative icons from assistive technologies
  • Ensures proper contrast and sizing for better visibility

Styling

The Icon component comes with default styling and offers customization options:

  • Default size of 24x24 pixels (w-6 h-6)
  • Uses currentColor for stroke, allowing easy color customization
  • Customizable through className prop for additional styling

Best Practices

Follow these best practices when using the Icon component:

  • Always provide an aria-label for icons that convey meaning
  • Use aria-hidden="true" for decorative icons
  • Ensure your sprite sheet (/sprite.svg) contains all necessary icons
  • Maintain consistent icon sizing throughout your application

Performance Considerations

The Icon component is optimized for performance:

  • Uses SVG sprite sheets for efficient loading of multiple icons
  • Minimal DOM nodes created for each icon instance
  • Utilizes CSS classes for styling, reducing inline styles

Integration with Other Components

The Icon component can be easily integrated with other Abaabil components:

  • Use within Button components for icon buttons
  • Incorporate in Input components for input adornments
  • Add to Navigation components for menu icons

Troubleshooting

Common issues and solutions when using the Icon component:

  • If icons are not displaying, ensure your sprite sheet path is correct
  • For sizing issues, check if any parent elements are constraining the icon size
  • If colors are not applying, verify that you're using the correct color utility classes