### Install MingCute Icon Package

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/README.md

Installs the MingCute icon npm package. This is the first step to using the icon library in your project.

```shell
npm install mingcute_icon --save
```

--------------------------------

### Install MingCute React Icons

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/packages/mingcute-react/README.md

Instructions for installing the MingCute React icon library using npm, yarn, or pnpm. This is the first step to using the icons in your React application.

```bash
npm install @mingcute/react
# or
yarn add @mingcute/react
# or
pnpm add @mingcute/react
```

--------------------------------

### Install MingCute Icons for Vue

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/packages/mingcute-vue/README.md

Install the @mingcute/vue package using npm, yarn, or pnpm. This package provides Vue components for all MingCute icons.

```bash
npm install @mingcute/vue
# or
yarn add @mingcute/vue
# or
pnpm add @mingcute/vue
```

--------------------------------

### React Icon Component Usage

Source: https://context7.com/mingcute-design/mingcute-icons/llms.txt

Integrate MingCute icons into React applications using the dedicated `@mingcute/react` package. Install via npm and import the `Icon` component. It supports props for icon name, size, color, and spin animations, with full TypeScript support.

```bash
npm install @mingcute/react
```

```tsx
import { Icon } from '@mingcute/react';

// Basic usage
<Icon icon="mgc_home_1_line" />

// With size (number for pixels or string for CSS value)
<Icon icon="mgc_search_line" size={24} />
<Icon icon="mgc_search_line" size="2rem" />

// With color
<Icon icon="mgc_heart_fill" color="red" />
<Icon icon="mgc_star_fill" color="#FFD700" />

// With spin animation (useful for loading indicators)
<Icon icon="mgc_loading_line" spin={true} />
<Icon icon="mgc_loading_line" spin={true} spinDuration="1s" />

// Combined props
<Icon
  icon="mgc_notification_fill"
  size={32}
  color="blue"
/>
```

--------------------------------

### Vue Icon Component Usage

Source: https://context7.com/mingcute-design/mingcute-icons/llms.txt

Incorporate MingCute icons into Vue applications using the `@mingcute/vue` package. After installation via npm, import the `Icon` component and use it within your templates. Props are available for icon selection, size, color, and spin effects, fully supporting TypeScript.

```bash
npm install @mingcute/vue
```

```vue
<script setup>
import { Icon } from '@mingcute/vue';
</script>

<template>
  <!-- Basic usage -->
  <Icon icon="mgc_home_1_line" />

  <!-- With size -->
  <Icon icon="mgc_search_line" :size="24" />
  <Icon icon="mgc_search_line" size="2rem" />

  <!-- With color -->
  <Icon icon="mgc_heart_fill" color="red" />

  <!-- With spin animation -->
  <Icon icon="mgc_loading_line" :spin="true" />
  <Icon icon="mgc_loading_line" :spin="true" spin-duration="0.8s" />

  <!-- Combined props -->
  <Icon
    icon="mgc_settings_1_line"
    :size="28"
    color="#333"
  />
</template>
```

--------------------------------

### Basic React Icon Usage with MingCute

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/packages/mingcute-react/README.md

Demonstrates how to import and use MingCute icons in a React component. Shows default usage, custom size and color, and inheritance of SVG properties.

```jsx
import { MingcuteFill, Home1Line, SearchLine } from '@mingcute/react';

function App() {
  return (
    <div>
      {/* Default: 24px size and currentColor */}
      <MingcuteFill />

      {/* Custom size and color */}
      <Home1Line size={32} color="#007AFF" />

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

--------------------------------

### Basic React Icon Usage

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/react/README.md

Demonstrates how to import and use MingCute icons as standard React components. Icons can be customized with 'size' and 'color' props, and they also accept standard SVG props.

```typescript
import { MingcuteFill, Home1Line, SearchLine } from '@mingcute/react';

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

      {/* Custom size and color */}
      <Home1Line size={32} color="#007AFF" />

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

--------------------------------

### Import MingCute CSS Styles

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/README.md

Imports the MingCute CSS styles into your project's entry file. This makes the icon fonts available for use.

```javascript
// main.js
import 'mingcute_icon/font/Mingcute.css'
```

--------------------------------

### Basic Vue Usage of MingCute Icons

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/packages/mingcute-vue/README.md

Demonstrates how to import and use MingCute icons as Vue components. Shows default usage and customization of size and color props, as well as standard SVG attributes.

```vue
<template>
  <div>
    {/* Default: 24px size and currentColor */}
    <MingcuteFill />

    {/* Custom size and color */}
    <Home1Line size={32} color="#007AFF" />

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

<script setup>
import { MingcuteFill, Home1Line, SearchLine } from '@mingcute/vue';
</script>
```

--------------------------------

### Use MingCute Icons with HTML

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/README.md

Demonstrates how to use MingCute icons directly in HTML using span elements with specific class names. The class name follows the pattern `mgc_{name}_{style}`.

```html
<span class="mgc_search_line"></span>
<span class="mgc_search_fill"></span>
```

--------------------------------

### Optimized React Icon Import (Deep Imports)

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/react/README.md

Explains how to achieve minimal bundle sizes by importing individual icons directly from their specific paths, bypassing index files. This method ensures only the necessary icon code is processed.

```typescript
// This ensures that only the code for MingcuteFill is processed
import MingcuteFill from '@mingcute/react/icons/MingcuteFill';

function MinimalPage() {
  return <MingcuteFill />;
}
```

--------------------------------

### Direct SVG Usage with HTML

Source: https://context7.com/mingcute-design/mingcute-icons/llms.txt

Integrate SVG icons directly into your HTML by referencing the icon files from the `svg/` directory. This method allows for basic image embedding or inline SVG for more control over styling and interactivity. Ensure the path to the SVG file is correct.

```html
<img src="svg/arrow/arrow_down_line.svg" alt="Arrow Down" />

<img src="svg/arrow/arrow_down_fill.svg" alt="Arrow Down Filled" />

<svg width="24" height="24">
  <use href="svg/arrow/arrow_right_line.svg#icon"></use>
</svg>
```

--------------------------------

### Webfont Usage with CSS

Source: https://context7.com/mingcute-design/mingcute-icons/llms.txt

Utilize the MingCute webfont by including its CSS file and applying icon classes to HTML elements. This approach is efficient for displaying icons across various elements and allows for styling through CSS. The class naming convention is `mgc_{icon_name}_{style}`.

```html
<link rel="stylesheet" href="fonts/MingCute.css" />

<i class="mgc_home_1_line"></i>
<i class="mgc_home_1_fill"></i>
<i class="mgc_search_line"></i>
<i class="mgc_user_1_line"></i>

<i class="mgc_heart_fill" style="font-size: 24px; color: red;"></i>
```

--------------------------------

### MingCute React Icon Color Control

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/packages/mingcute-react/README.md

Illustrates methods for controlling the color of MingCute icons in React. This includes using the 'color' prop directly and leveraging CSS inheritance for dynamic styling.

```jsx
// Use color prop
<MingcuteFill color="red" />

// Use CSS inheritance
<div style={{ color: 'blue' }}>
  <MingcuteFill /> 
</div>
```

--------------------------------

### Styling React Icons with Tailwind CSS

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/react/README.md

Shows how to apply Tailwind CSS utility classes directly to MingCute React icons. This leverages the fact that the library spreads props to the underlying SVG element, enabling seamless integration with Tailwind.

```typescript
import { UserLine } from '@mingcute/react';

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>
  );
}
```

--------------------------------

### Overwrite Icon Color Globally

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/README.md

Overwrites the initial color of MingCute icons in your global style file. This allows for consistent color theming across your application.

```css
// index.css
[class^='mgc_']::before,
[class*=' mgc_']::before {
  color: inherit !important;
}
```

--------------------------------

### Control MingCute Icon Color in Vue

Source: https://github.com/mingcute-design/mingcute-icons/blob/main/packages/mingcute-vue/README.md

Illustrates two methods for controlling the color of MingCute icons in Vue applications: using the `color` prop directly on the icon component or relying on CSS inheritance by setting the `color` property on a parent element.

```vue
<!-- Use color prop -->
<MingcuteFill color="red" />

<!-- Use CSS inheritance -->
<div style="color: blue">
  <HomeLine />
</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.