BlazorDownloadFile

Performance

• Base64 vs Stream: base64 strings and byte[] generally perform faster than Stream because there is no direct conversion between a C# Stream and a JavaScript object.
• Binary Representation: The library uses Uint8Array to push binary data into a JavaScript Blob, which performs well.

Limitations

• Browser Limits: Be aware of the JavaScript Max Blob Size which varies by device, browser, and OS.
• Blazor Server: If using Blazor Server, be mindful of SignalR buffer management limitations during data transfer.

You can display Open Iconic icons as standard SVG images using the <img> tag. This is the simplest method and allows you to treat icons like any other image asset. Always remember to include an alt attribute for accessibility.

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

If your application uses a Content-Security-Policy with script-src 'self', you must manually include the library's JavaScript file in your HTML to ensure the download functionality works. Add the following script tag to your index/root HTML file:

<script src="_content/BlazorDownloadFile/BlazorDownloadFileScript.js"></script>

Open Iconic provides an SVG sprite that allows you to load all icons in a single HTTP request. To use an icon, embed a <use> element inside an <svg> tag, referencing the specific icon ID from the sprite file.

Implementation

To ensure icons are easily stylable, it is recommended to add a general class to the <svg> tag and a unique class name to the <use> tag.

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

Styling

Sizing

Since all icons are square, set equal width and height dimensions on the <svg> tag:

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

Coloring

Use the CSS fill property on the <use> tag to change the icon color:

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

Register the BlazorDownloadFileService in your application's dependency injection container within the services method.

Important: ServiceLifetime.Singleton is not supported. Use ServiceLifetime.Scoped (the default) or ServiceLifetime.Transient.

services.AddBlazorDownloadFile(ServiceLifetime.Scoped);

To use Open Iconic as an icon font within a Foundation project, include the Foundation-specific stylesheet and use the fi- class prefix.

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

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

You can display Open Iconic icons as standard SVG images. This is recommended for simplicity and accessibility. Always include an alt attribute for screen readers.

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

To use Open Iconic as an icon font within a Bootstrap project, include the Bootstrap-specific stylesheet and use the oi class prefix.

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

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

Install the BlazorDownloadFile package using the NuGet package manager to enable file downloading from C# in your Blazor application.

Install-Package BlazorDownloadFile -Version 2.4.0.2

To use Open Iconic as an icon font without a framework, include the default stylesheet and use the oi class with the data-glyph attribute.

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

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

If you have used AddBuffer to incrementally load data, you must call one of the following methods to merge those buffers and trigger the browser download:

• DownloadBase64Buffers: Use this if the buffers added via AddBuffer were Base64 strings.
• DownloadBinaryBuffers: Use this if the buffers added via AddBuffer were byte[], IEnumerable<byte>, or Stream types.

Both methods require a fileName and an optional contentType (defaults to application/octet-stream).

// Example: Merging binary buffers and downloading
await BlazorDownloadFileService.DownloadBinaryBuffers("largefile.zip");