A high-performance, tree-shakable React icon library generated from MingCute design system. Built with TypeScript and optimized for modern frameworks like Next.js, Vite, and Remix.

Installation

Bash

# Using npm
npm install @mingcute/react

# Using yarn
yarn add @mingcute/react

# Using pnpm
pnpm add @mingcute/react

Usage

1. Basic Example

Import icons as standard React components. All icons accept size and color props.

TypeScript

import { BankFill, HomeLine, SearchLine } from 'mingcute-icon-library';

function App() {
  return (
    <div className="container">
      {/* Default: 24px size and currentColor */}
      <BankFill />

      {/* Custom size and color */}
      <HomeLine size={32} color="#3b82f6" />

      {/* Inherits standard SVG props */}
      <SearchLine opacity={0.5} />
    </div>
  );
}

2. Styling with Tailwind CSS

Since the library spreads props to the underlying SVG, you can use Utility Classes directly.

TypeScript

import { UserLine } from 'mingcute-icon-library';

export default function Profile() {
  return (
    <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
      <UserLine className="w-5 h-5 animate-pulse" />
      <span>Profile</span>
    </button>
  );
}

Optimization (Deep Imports)

While the main entry point supports tree-shaking, you can bypass index files entirely for absolute minimum bundle sizes by importing individual icons.

TypeScript

// This ensures that only the code for BankFill is processed
import BankFill from 'mingcute-icon-library/icons/BankFill';

function MinimalPage() {
  return <BankFill />;
}

Props

All components extend React.SVGProps<SVGSVGElement>.

Prop	Type	Default	Description
`size`	`number	string`	`24`
`color`	`string`	`"currentColor"`	Sets the color
`className`	`string`	-	Standard React className for styling
`...props`	`SVGProps`	-	Any valid SVG attribute (title, opacity, etc.)