abaabil.icon

Icon Component

The Icon component is a versatile and customizable SVG icon component built with React. It supports different sizes and allows for additional class names to be applied for further customization.

Usage

import * as React from 'react';
import Icon from './path-to-icon';

const App = () => (
  <div>
    <Icon id="settings" size="base" />
    <Icon id="check" size="lg" className="text-green-500" />
    <Icon id="warning" size="sm" className="text-red-500" />
  </div>
);

export default App;

Props

Prop	Type	Default	Description
id	string	null	The ID of the icon to use from the SVG sprite.
size	string	base	The size of the icon. Can be sm, base, or lg.
className	string	''	Additional class names to apply to the icon.

Sizes

• sm: Small icon size.
• base: Base icon size.
• lg: Large icon size.

Example

import * as React from 'react';
import Icon from './path-to-icon';

const Example = () => (
  <div>
    <Icon id="settings" size="base" />
    <Icon id="check" size="lg" className="text-green-500" />
    <Icon id="warning" size="sm" className="text-red-500" />
  </div>
);

export default Example;

This example demonstrates various ways to use the Icon component, showcasing different sizes and custom class names for further styling.