npm package: @rxbenefits/icons
Description: Custom SVG icon components for RxBenefits applications, including pharmacy and healthcare-specific icons plus re-exports of Ant Design icons
Author: RxBenefits
Latest version: 1.0.0

# @rxbenefits/icons

[![CI](https://github.com/RxBenefits/rxbenefits-icons/actions/workflows/ci.yml/badge.svg)](https://github.com/RxBenefits/rxbenefits-icons/actions/workflows/ci.yml)
[![npm version](https://badge.fury.io/js/@rxbenefits%2Ficons.svg)](https://www.npmjs.com/package/@rxbenefits/icons)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Custom SVG icon components for RxBenefits applications, including pharmacy and healthcare-specific icons plus re-exports of all Ant Design icons.

## Features

- 🎨 **Custom Healthcare Icons** - Pharmacy and healthcare-specific SVG icons
- 🔧 **Ant Design Integration** - Re-exports all Ant Design icons for convenience
- ⚛️ **React 18 Compatible** - Built for modern React applications
- 📦 **Tree-shakeable** - Import only what you need
- 🎯 **TypeScript Support** - Full type definitions included
- 🧪 **Well Tested** - Comprehensive test coverage
- 🚀 **Lightweight** - Small package size (<50KB)

## Installation

```bash
npm install @rxbenefits/icons

# or

yarn add @rxbenefits/icons

# or

pnpm add @rxbenefits/icons
```

### Peer Dependencies

This package requires React 18:

```bash
npm install react@^18.0.0 react-dom@^18.0.0
```

## Usage

### Custom RxBenefits Icons

```tsx
import { DrugsIcon, PharmacyIcon, ProtectIcon } from '@rxbenefits/icons';

function MyComponent() {
  return (
    <div>
      <DrugsIcon style={{ fontSize: '24px', color: '#1890ff' }} />
      <PharmacyIcon style={{ fontSize: '32px' }} />
      <ProtectIcon className="custom-icon" />
    </div>
  );
}
```

### Ant Design Icons (Re-exported)

All Ant Design icons are re-exported for convenience:

```tsx
import { HomeOutlined, UserOutlined, SettingOutlined } from '@rxbenefits/icons';

function Navigation() {
  return (
    <nav>
      <HomeOutlined />
      <UserOutlined />
      <SettingOutlined />
    </nav>
  );
}
```

## Available Custom Icons

### DrugsIcon

Prescription drugs/medication icon for drug-related features.

```tsx
import { DrugsIcon } from '@rxbenefits/icons';

<DrugsIcon style={{ fontSize: '24px' }} />;
```

### PharmacyIcon

Pharmacy location/services icon for pharmacy-related features.

```tsx
import { PharmacyIcon } from '@rxbenefits/icons';

<PharmacyIcon style={{ fontSize: '24px', color: '#52c41a' }} />;
```

### LockedMemberIcon

Locked member account icon for access control features.

```tsx
import { LockedMemberIcon } from '@rxbenefits/icons';

<LockedMemberIcon style={{ fontSize: '20px', color: '#ff4d4f' }} />;
```

### UnlockMemberIcon

Unlocked member account icon for access control features.

```tsx
import { UnlockMemberIcon } from '@rxbenefits/icons';

<UnlockMemberIcon style={{ fontSize: '20px', color: '#52c41a' }} />;
```

### ProtectIcon

Protection/security icon for security-related features.

```tsx
import { ProtectIcon } from '@rxbenefits/icons';

<ProtectIcon style={{ fontSize: '24px' }} />;
```

### SuccessfulIcon

Success/completion icon for status indicators.

```tsx
import { SuccessfulIcon } from '@rxbenefits/icons';

<SuccessfulIcon style={{ fontSize: '20px', color: '#52c41a' }} />;
```

## Icon Props

All custom icons accept standard Ant Design Icon props:

```tsx
interface IconProps {
  className?: string;
  style?: React.CSSProperties;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
  rotate?: number;
  spin?: boolean;
  twoToneColor?: string;
  'aria-label'?: string;
  role?: string;
}
```

### Example with Props

```tsx
import { DrugsIcon } from '@rxbenefits/icons';

<DrugsIcon
  className="drug-icon"
  style={{ fontSize: '32px', color: '#1890ff' }}
  onClick={() => console.log('Icon clicked')}
  aria-label="Prescription drugs"
  role="img"
/>;
```

## Styling Icons

### Using Inline Styles

```tsx
<PharmacyIcon style={{ fontSize: '24px', color: '#1890ff' }} />
```

### Using CSS Classes

```tsx
<PharmacyIcon className="my-icon-class" />
```

```css
.my-icon-class {
  font-size: 24px;
  color: #1890ff;
}
```

### Using CSS-in-JS

```tsx
import styled from 'styled-components';
import { DrugsIcon } from '@rxbenefits/icons';

const StyledIcon = styled(DrugsIcon)`
  font-size: 24px;
  color: ${(props) => props.theme.primaryColor};

  &:hover {
    color: ${(props) => props.theme.primaryHover};
  }
`;
```

## Accessibility

All icons support ARIA attributes for accessibility:

```tsx
<DrugsIcon aria-label="Prescription medications" role="img" />
```

For decorative icons, use `aria-hidden`:

```tsx
<DrugsIcon aria-hidden="true" />
```

## Tree Shaking

This package is fully tree-shakeable. Only import the icons you need:

```tsx
// ✅ Good - Only DrugsIcon is included in bundle
import { DrugsIcon } from '@rxbenefits/icons';

// ❌ Avoid - Imports entire package
import * as Icons from '@rxbenefits/icons';
```

## Browser Support

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

## TypeScript

Full TypeScript support is included. All icons have proper type definitions:

```tsx
import { DrugsIcon } from '@rxbenefits/icons';
import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';

const MyIcon: React.FC<Partial<CustomIconComponentProps>> = (props) => {
  return <DrugsIcon {...props} />;
};
```

## Development

### Install Dependencies

```bash
npm install
```

### Run Tests

```bash
npm test

# Watch mode
npm run test:watch

# With coverage
npm run test:coverage
```

### Build

```bash
npm run build
```

### Lint

```bash
npm run lint

# Auto-fix
npm run lint:fix
```

### Format

```bash
npm run format

# Check formatting
npm run format:check
```

## Contributing

Contributions are welcome! Please read our [Code of Conduct](CODE_OF_CONDUCT.md) before contributing.

### Adding New Icons

1. Create a new `.tsx` file in `src/` with your icon component
2. Follow the existing icon pattern (see `DrugsIcon.tsx` as example)
3. Export the icon in `src/index.ts`
4. Add tests in `src/__tests__/icons.test.tsx`
5. Update this README with the new icon documentation

### Icon Component Template

```tsx
import Icon from '@ant-design/icons';
import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';

const MyIconSvg = () => (
  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none">
    {/* Your SVG paths */}
  </svg>
);

export const MyIcon = (props: Partial<CustomIconComponentProps>) => {
  return (
    <Icon
      component={MyIconSvg}
      onPointerEnterCapture={undefined}
      onPointerLeaveCapture={undefined}
      {...props}
    />
  );
};
```

## License

[MIT](LICENSE)

## Support

For issues and questions:

- 🐛 [Report bugs](https://github.com/RxBenefits/rxbenefits-icons/issues)
- 💬 [Ask questions](https://github.com/RxBenefits/rxbenefits-icons/discussions)
- 🔒 [Report security issues](SECURITY.md)

## Related Packages

- [@rxbenefits/types](https://www.npmjs.com/package/@rxbenefits/types) - TypeScript type definitions
- [@rxbenefits/constants](https://www.npmjs.com/package/@rxbenefits/constants) - Shared constants
- [@rxbenefits/utils](https://www.npmjs.com/package/@rxbenefits/utils) - Utility functions

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for release history.

---

Made with ❤️ by RxBenefits