@rxbenefits/icons

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

npm install @rxbenefits/icons

# or

yarn add @rxbenefits/icons

# or

pnpm add @rxbenefits/icons

Peer Dependencies

This package requires React 18:

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

Usage

Custom RxBenefits Icons

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:

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.

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

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

PharmacyIcon

Pharmacy location/services icon for pharmacy-related features.

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

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

LockedMemberIcon

Locked member account icon for access control features.

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

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

UnlockMemberIcon

Unlocked member account icon for access control features.

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

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

ProtectIcon

Protection/security icon for security-related features.

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

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

SuccessfulIcon

Success/completion icon for status indicators.

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

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

Icon Props

All custom icons accept standard Ant Design Icon props:

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

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

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

Using CSS Classes

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

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

Using CSS-in-JS

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:

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

For decorative icons, use aria-hidden:

<DrugsIcon aria-hidden="true" />

Tree Shaking

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

// ✅ 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:

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

npm install

Run Tests

npm test

# Watch mode
npm run test:watch

# With coverage
npm run test:coverage

Build

npm run build

Lint

npm run lint

# Auto-fix
npm run lint:fix

Format

npm run format

# Check formatting
npm run format:check

Contributing

Contributions are welcome! Please read our Code of Conduct 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

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

Support

For issues and questions:

• 🐛 Report bugs
• 💬 Ask questions
• 🔒 Report security issues

Related Packages

• @rxbenefits/types - TypeScript type definitions
• @rxbenefits/constants - Shared constants
• @rxbenefits/utils - Utility functions

Changelog

See CHANGELOG.md for release history.

Made with ❤️ by RxBenefits