### Install Dependencies with npm

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor/src/README.md

Run this command in your terminal to install all project dependencies listed in package.json.

```sh
npm install
```

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

### Install XtermBlazor Package

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/README.md

Use the .NET CLI to add the XtermBlazor package to your project.

```sh
dotnet add package XtermBlazor
```

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

### Register Service Worker

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/index.html

Registers the service worker for the application. This is a standard web application setup.

```javascript
navigator.serviceWorker.register('service-worker.js');
```

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

### Register addon-fit for Blazor Server

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/README.md

Include the addon-fit.min.js script and register the FitAddon before XtermBlazor.min.js in _Host.cshtml for Blazor Server.

```html
<!-- Add addon-fit.min.js before blazor.server.js and XtermBlazor.min.js -->
<script src="https://cdn.jsdelivr.net/npm/@@xterm/addon-fit@0.11.0/lib/addon-fit.min.js"></script>

<script src="_framework/blazor.server.js"></script>

<!-- Load the XtermBlazor library and register addons -->
<script src="_content/XtermBlazor/XtermBlazor.min.js"></script>
<script>XtermBlazor.registerAddons({"addon-fit": new FitAddon.FitAddon()});</script>
```

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

### Using Open Iconic with Foundation Classes

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/css/open-iconic/README.md

Utilize Foundation's icon classes, prefixed with `fi-`, to display Open Iconic glyphs.

```html
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
```

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

### Using Open Iconic with Bootstrap Classes

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/css/open-iconic/README.md

Apply icons in Bootstrap projects using the `oi` class and specific icon names.

```html
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
```

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

### Including Open Iconic with Foundation

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/css/open-iconic/README.md

Link the Foundation-specific stylesheet to integrate Open Iconic with the Foundation framework.

```html
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
```

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

### Compile TypeScript to JavaScript

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor/src/README.md

Execute this command to compile TypeScript files into JavaScript, generating XtermBlazor.min.js and XtermBlazor.min.css in the wwwroot directory.

```sh
npm run build
```

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

### Register addon-fit for Blazor WASM

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/README.md

Include the addon-fit.min.js script and register the FitAddon before XtermBlazor.min.js in index.html for Blazor WebAssembly.

```html
<!-- Add addon-fit.min.js before blazor.webassembly.js and XtermBlazor.min.js -->
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.11.0/lib/addon-fit.min.js"></script>

<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>

<!-- Load the XtermBlazor library and register addons -->
<script src="_content/XtermBlazor/XtermBlazor.min.js"></script>
<script>XtermBlazor.registerAddons({"addon-fit": new FitAddon.FitAddon()});</script>
```

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

### Including Open Iconic Standalone

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/css/open-iconic/README.md

Link the default Open Iconic stylesheet for standalone usage without a specific framework.

```html
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
```

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

### Using Open Iconic Standalone Classes

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/css/open-iconic/README.md

Apply icons independently using the `oi` class and the `data-glyph` attribute to specify the icon.

```html
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
```

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

### Add XtermBlazor CSS Reference

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/README.md

Link the XtermBlazor CSS file in your HTML head section (index.html or _Host.cshtml).

```html
<link href="_content/XtermBlazor/XtermBlazor.min.css" rel="stylesheet" />
```

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

### Add XtermBlazor JavaScript Reference

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/README.md

Include the XtermBlazor JavaScript file in your HTML body section (index.html or _Host.cshtml).

```html
<script src="_content/XtermBlazor/XtermBlazor.min.js"></script>
```

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

### Including Open Iconic with Bootstrap

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/css/open-iconic/README.md

Link the Bootstrap-specific stylesheet to use Open Iconic with Bootstrap framework conventions.

```html
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
```

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

### Basic XtermBlazor Usage

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/README.md

Integrate the Xterm component into your Blazor page, configure options, and handle the first render event.

```razor
<Xterm @ref="_terminal" Options="_options" OnFirstRender="@OnFirstRender" />

@code {
    private Xterm _terminal;

    private TerminalOptions _options = new TerminalOptions
    {
        CursorBlink = true,
        CursorStyle = CursorStyle.Bar,
        Theme =
        {
            Background = "#17615e",
        },
    };

    private async Task OnFirstRender()
    {
        await _terminal.WriteLine("Hello World");
    }
}
```

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

### Add XtermBlazor Import

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/README.md

Include the XtermBlazor namespace in your _Imports.razor file for component usage.

```razor
@using XtermBlazor
```

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

### Register XtermBlazor Addons

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/index.html

Registers various XtermBlazor addons, including Fit, Search, and Web Links. Ensure these addons are available in your project.

```javascript
XtermBlazor.registerAddons({ "addon-fit": new FitAddon.FitAddon(), "addon-search": new SearchAddon.SearchAddon(), "addon-web-links": new WebLinksAddon.WebLinksAddon() });
```

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

### Sizing Icons with CSS

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/css/open-iconic/README.md

Control the size of icons by setting equal width and height on the SVG element using CSS.

```css
.icon {
  width: 16px;
  height: 16px;
}
```

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

### Usage with addon-fit

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/README.md

Integrate the Xterm component with addons by specifying them in the Addons property and invoking addon methods.

```razor
<Xterm @ref="_terminal" Options="_options" Addons="_addons" OnFirstRender="@OnFirstRender" />

@code {
    private Xterm _terminal;

    private TerminalOptions _options = new TerminalOptions
    {
        CursorBlink = true,
        CursorStyle = CursorStyle.Bar,
    };

    private HashSet<string> _addons = new HashSet<string>()
    {
        "addon-fit",
    };

    private async Task OnFirstRender()
    {
        // Invoke fit() function
        await _terminal.Addon("addon-fit").InvokeVoidAsync("fit");

        await _terminal.WriteLine("Hello World");
    }
}
```

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

### Displaying Open Iconic SVGs

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/css/open-iconic/README.md

Use the `<img>` tag to display individual Open Iconic SVG files. Remember to include an `alt` attribute for accessibility.

```html
<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
```

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

### Using Open Iconic SVG Sprite

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/css/open-iconic/README.md

Incorporate icons from the SVG sprite for efficient loading. Apply a general class to the `<svg>` and a specific class to the `<use>` tag for styling.

```html
<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>
```

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

### Coloring Icons with CSS

Source: https://github.com/battlefieldduck/xtermblazor/blob/main/XtermBlazor.Demo.Wasm/wwwroot/css/open-iconic/README.md

Change the color of specific icons by setting the `fill` property on their corresponding `use` tag class in CSS.

```css
.icon-account-login {
  fill: #f00;
}
```

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