abaabil.icon

abaabil.icon

A lightweight SVG icon component for React.

Installation

npm install abaabil.icon

Usage

import React from 'react';
import Icon from 'abaabil.icon';

function MyApp() {
    return (
        <Icon
          size={32}
          iconName="myIcon"
        />
    );
}

Props

• size (number, default: 32): Size of the icon.
• iconName (string): ID of the icon in the SVG sprite.
• style (object): Inline styles for the icon SVG element.

Icon Sprite

Important: This component expects an SVG sprite to be available at the root of your public directory.

Ensure that an SVG sprite is available at [your-domain]/sprite.svg. Each icon in the sprite should be given an ID, which will be referenced by the iconName prop.

Example SVG sprite structure:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="exampleIcon" viewBox="0 0 24 24">
    <!-- SVG path/data for the icon -->
  </symbol>
  <!-- More icons... -->
</svg>

Usage Example

To use an icon named exampleIcon from your sprite, utilize the iconName prop:

<Icon
  size={32}
  iconName="exampleIcon"
/>

The component will then render the icon using:

<use xlinkHref="/sprite.svg#exampleIcon" />

License

MIT