### Install iconoir-react with npm, Yarn, or pnpm

Source: https://iconoir.com/docs/packages/iconoir-react

Instructions for installing the iconoir-react library using different package managers. This is the first step to using Iconoir icons in your React project.

```bash
npm i iconoir-react
```

```bash
yarn add iconoir-react
```

```bash
pnpm add iconoir-react
```

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

### Install Iconoir Vue Package

Source: https://iconoir.com/docs/packages/iconoir-vue

Instructions for installing the Iconoir Vue package using npm, Yarn, or pnpm. This package provides SVG icons as Vue.js components.

```bash
npm i @iconoir/vue
```

```bash
yarn add @iconoir/vue
```

```bash
pnpm add @iconoir/vue
```

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

### Install iconoir_flutter Package

Source: https://iconoir.com/docs/packages/iconoir-flutter

This command adds the iconoir_flutter package as a dependency to your Flutter project, allowing you to use Iconoir icons as widgets.

```bash
flutter pub add iconoir_flutter
```

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

### Install Iconoir NPM Package

Source: https://iconoir.com/docs/introduction

This snippet shows how to install the Iconoir NPM package using various package managers. This package provides access to the SVG icons for direct import.

```bash
npm i iconoir
yarn add iconoir
pnpm add iconoir
bun add iconoir
```

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

### Install iconoir-react-native and react-native-svg

Source: https://iconoir.com/docs/packages/iconoir-react-native

Installs the necessary packages for using Iconoir icons in React Native projects. This requires both the iconoir-react-native package and react-native-svg for rendering SVG components.

```npm
npm i iconoir-react-native react-native-svg
```

```yarn
yarn add iconoir-react-native react-native-svg
```

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

### Use Iconoir in SwiftUI (UIKit)

Source: https://iconoir.com/docs/introduction

Code examples for integrating Iconoir icons into iOS applications using Swift. It demonstrates how to use the `Iconoir` enum to get `UIImage` instances for use in `UIImageView`.

```swift
import UIKit
import Iconoir

let imageView = UIImageView(image: Iconoir.bell.asUIImage)
```

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

### Use Iconoir in SwiftUI (SwiftUI)

Source: https://iconoir.com/docs/introduction

Example showing how to use Iconoir icons within SwiftUI views. It leverages the `asImage` property to create `Image` views and allows for styling like color and font size.

```swift
import SwiftUI
import Iconoir

struct ContentView: View {
    var body: some View {
        Iconoir.bell.asImage
            .foregroundColor(.blue)
            .font(.system(size: 24))
    }
}
```

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

### Basic Icon Usage in Vue

Source: https://iconoir.com/docs/packages/iconoir-vue

Demonstrates how to import and use an Iconoir icon component within a Vue.js script setup and template. Any standard SVG properties can be passed as props.

```vue
<script setup>
  import { Iconoir } from '@iconoir/vue';
</script>

<template>
  <Iconoir />
</template>

```

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

### Apply Iconoir Icon Class in HTML

Source: https://iconoir.com/docs/packages/css

This example demonstrates how to use an Iconoir icon within your HTML. You apply the base class 'iconoir-' followed by the specific icon name to an `<i>` tag. The icon's display properties can be managed via CSS.

```html
<i class="iconoir-hand-brake"></i>
```

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

### Import Iconoir SVG in JavaScript

Source: https://iconoir.com/docs/introduction

Example of importing an SVG icon directly from the iconoir NPM package in a JavaScript environment. This is useful for custom icon handling or specific rendering needs.

```javascript
import Iconoir from 'iconoir/icons/iconoir.svg';
```

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

### Basic Usage of Iconoir Icons in Flutter

Source: https://iconoir.com/docs/packages/iconoir-flutter

This Flutter code demonstrates how to import and use the Iconoir widget within a basic Material App structure. It shows the necessary imports and a simple widget tree to display an icon.

```dart
import 'package:flutter/material.dart';
import 'package:iconoir_flutter/iconoir_flutter.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({ super.key });

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: DemoPage(),
    );
  }
}

class DemoPage extends StatelessWidget {
  const DemoPage({ super.key });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: const Iconoir(),
      ),
    );
  }
}

```

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

### Import Iconoir CSS Stylesheet

Source: https://iconoir.com/docs/packages/css

This snippet shows how to include the Iconoir CSS file in your HTML document, making all the icons available for use. Ensure this link is placed within the `<head>` section of your HTML.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css" />
```

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

### Basic Usage of Iconoir React Component

Source: https://iconoir.com/docs/packages/iconoir-react

Demonstrates how to import and render a basic Iconoir SVG icon component within a React application. No additional props are specified, so default values will be applied.

```jsx
import { Iconoir } from 'iconoir-react';
import React from 'react';

function App() {
  return <Iconoir />;
}

export default App;
```

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

### Using IconoirProvider for Default Icon Props

Source: https://iconoir.com/docs/packages/iconoir-react

Illustrates how to use the IconoirProvider component to set default props for all icons rendered within its scope. This avoids repetitive prop definitions for each icon instance, improving code maintainability.

```jsx
import { Check, IconoirProvider } from 'iconoir-react';

return (
  <IconoirProvider
    iconProps={{
      color: '#AAAAAA',
      strokeWidth: 1,
      width: '1em',
      height: '1em',
    }}>
    <SomeOtherContainer>
      <Check />
    </SomeOtherContainer>
  </IconoirProvider>
);
```

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

### Use Iconoir CSS Classes in HTML

Source: https://iconoir.com/docs/introduction

This snippet demonstrates how to include the Iconoir CSS file via a CDN and apply icon classes to HTML elements. The 'iconoir-' prefix followed by the icon name is used to display icons.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css" />
<i class="iconoir-hand-brake"></i>
```

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

### Using IconoirProvider for Default Props in Vue

Source: https://iconoir.com/docs/packages/iconoir-vue

Illustrates how to use the IconoirProvider component to set default properties (color, stroke-width, width, height) for all icons nested within it, simplifying repetitive prop definitions.

```vue
<script setup>
  import { IconoirProvider, Check } from '@iconoir/vue';
</script>

<template>
  <IconoirProvider
    :icon-props="{
      'color': '#AAAAAA',
      'stroke-width': 1,
      'width': '1em',
      'height': '1em',
    }" 
  >
    <SomeOtherContainer>
      <Check />
    </SomeOtherContainer>
  </IconoirProvider>
</template>

```

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

### Basic Iconoir Icon Usage in React Native

Source: https://iconoir.com/docs/packages/iconoir-react-native

Demonstrates how to import and render a basic Iconoir icon component within a React Native application. The component is imported from 'iconoir-react-native' and rendered inside a View component.

```javascript
import { Iconoir } from 'iconoir-react-native';
import React from 'react';
import { View } from 'react-native';

function App() {
  return (
    <View>
      <Iconoir />
    </View>
  );
}

export default App;

```

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

### Configure Default Icon Props with IconoirProvider

Source: https://iconoir.com/docs/packages/iconoir-react-native

Illustrates the use of IconoirProvider to set default props for all nested Iconoir icons. This simplifies styling by avoiding repetitive prop assignments for each icon, enabling global configuration of color, strokeWidth, width, and height.

```javascript
import { Check, IconoirProvider } from 'iconoir-react-native';

return (
  <IconoirProvider
    iconProps={{
      color: '#AAAAAA',
      strokeWidth: 1,
      width: '1em',
      height: '1em',
    }}>
    <SomeOtherContainer>
      <Check />
    </SomeOtherContainer>
  </IconoirProvider>
);

```

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

### Customizing Icon Properties in Vue

Source: https://iconoir.com/docs/packages/iconoir-vue

Shows how to apply standard SVG properties such as color, height, and width as props to an Iconoir Vue component for customization.

```vue
<Iconoir color="red" height="36" width="36" />

```

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

### Customizing Iconoir Component Props

Source: https://iconoir.com/docs/packages/iconoir-react

Shows how to pass standard SVG properties as props to an Iconoir React component to customize its appearance, such as color, height, and width. These props override the default values.

```jsx
<Iconoir color="red" height={36} width={36} />;
```

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

### Customize Iconoir Icon Props in React Native

Source: https://iconoir.com/docs/packages/iconoir-react-native

Shows how to apply common SVG properties as props to an Iconoir icon component to customize its appearance. Properties like color, height, and width can be directly passed to the icon component.

```javascript
<Iconoir color="red" height={36} width={36} />;

```

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