mf-react-basketball-logos

Unofficial React components for basketball team logos

mf-react-basketball-logos is a maintained fork of react-nba-logos by Christopher Katsaras (ISC license), modernized with TypeScript, modern build tools, and designed for extension to additional basketball leagues.

Not affiliated with or endorsed by the NBA, EuroLeague, LBA, or any other league or team. All trademarks and logos belong to their respective owners.

Features

✅ TypeScript - Full TypeScript support with type definitions ✅ Tree-shakeable - Import only what you need for smaller bundles ✅ Modern React - Compatible with React 18 and 19 ✅ Zero dependencies - Only React as a peer dependency ✅ Accessible - Proper ARIA labels and semantic SVG markup ✅ Tested - Comprehensive test coverage with Vitest

Install

npm install mf-react-basketball-logos

Usage

Basic Usage (JavaScript)

import { TOR } from "mf-react-basketball-logos";

const Example = () => {
  return <TOR />; // Loads the Toronto Raptors logo
};

export default Example;

TypeScript Usage

import { TOR, type LogoProps } from "mf-react-basketball-logos";

const Example: React.FC = () => {
  return <TOR />; // Fully typed component
};

export default Example;

Import All Logos

import * as BasketballLogos from "mf-react-basketball-logos";

const Example = () => {
  return <BasketballLogos.TOR />; // Loads the Toronto Raptors logo
};

export default Example;

Tree-shaking (Recommended for smaller bundles)

When you import specific teams, modern bundlers will automatically tree-shake unused logos:

import { TOR, LAL, BOS } from "mf-react-basketball-logos";

// Only these 3 logos will be included in your bundle

Configuration

Each logo component supports customization through props:

import { TOR } from "mf-react-basketball-logos";

const Example = () => {
  return (
    <div>
      {/* Default: 100px */}
      <TOR />

      {/* Custom size */}
      <TOR size={60} />
      <TOR size={140} />

      {/* Custom title for accessibility */}
      <TOR title="Toronto Raptors Logo" />

      {/* Additional SVG props */}
      <TOR className="my-logo" style={{ opacity: 0.8 }} />
    </div>
  );
};

export default Example;

Props

Each logo component accepts the following props:

interface LogoProps extends React.SVGProps<SVGSVGElement> {
  /**
   * Size of the logo in pixels (sets both width and height)
   * @default 100
   */
  size?: number | string;

  /**
   * Accessible title for the logo
   * @default Team name (e.g., "Toronto Raptors")
   */
  title?: string;

  /**
   * Optional className for additional styling
   */
  className?: string;

  // ... all standard SVG element props
}

Compatibility

Supported Browsers

Modern browsers with ES2020 support:

• Chrome/Edge 80+
• Firefox 74+
• Safari 13.1+
• iOS Safari 13.4+

React Compatibility

• React 18.x ✅
• React 19.x ✅
• Next.js 13+ ✅
• Remix ✅
• Vite ✅

Build Tools

Works with all modern bundlers:

• Webpack 5+
• Vite 2+
• Rollup 2+
• Parcel 2+
• esbuild
• Turbopack

TypeScript

Requires TypeScript 4.5+ for full type support.

Node.js

Node.js 18+ required for development.

Bundle Size

Each logo component is 2-35KB minified (most are 2-11KB). Tree-shaking ensures you only bundle the logos you import.

Example bundle impact:

• Import 1 team: ~2-11KB added to your bundle
• Import 5 teams: ~10-50KB added to your bundle
• Import all 30 NBA teams: ~244KB added to your bundle

Available Teams (NBA)

30 NBA teams + NBA logo currently available:

Development

# Install dependencies
npm install

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Build the package
npm run build

# Lint code
npm run lint

# Format code
npm run format

Credits

Based on the original work in react-nba-logos by Christopher Katsaras. Modernized and maintained by Mattia Ferrari.

Licensed under the ISC License.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ISC