Blazor.Animate

You can display Open Iconic icons as standard SVG images. It is recommended to use the alt attribute for accessibility.

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

By default, animations trigger when the component enters the view. To trigger an animation manually (e.g., on a button click), set IsManual="true" and capture a reference to the component using @ref. Note that the component will remain hidden until the Run() method is called.

<Animate @ref="myAnim" Animation="Animations.ZoomIn" IsManual="true">
    <Counter></Counter>
</Animate>

@code {
    private Animate myAnim;

    private void RunAnimation()
    {
        myAnim.Run();
    }
}

Wrap any component or HTML element inside the <Animate> component to apply effects like fade, slide, or zoom. You can control the animation type, duration, and delay using component parameters.

<Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" Delay="TimeSpan.FromSeconds(1)">
    <Counter></Counter>
</Animate>

Open Iconic provides an SVG sprite that allows you to load all icons in a single request. To use them, reference the sprite file and the specific icon ID within a <use> tag.

Styling Tips:

• Sizing: Set equal width and height on the <svg> tag.
• Coloring: Use the CSS fill property on the <use> tag to change the icon color.
• Best Practice: Add a general class to the <svg> tag and a unique class to the <use> tag for easier styling.

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

/* Sizing */
.icon {
  width: 16px;
  height: 16px;
}

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

To use Blazor.Animate in your Blazor application, follow these three steps:

1. Add the NuGet package: Install-Package BlazorAnimate

2. Configure _Imports.razor to include the namespace:

   @using BlazorAnimate

3. Add the JS interop script to your _Host.cshtml file:

   <script src="_content/BlazorAnimate/blazorAnimateInterop.js"></script>

Open Iconic provides webfont stylesheets for standalone use, Bootstrap, and Foundation. Use the corresponding CSS file and HTML structure for your chosen method.

Standalone

• CSS: /open-iconic/font/css/open-iconic.css
• HTML: <span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

Bootstrap

• CSS: /open-iconic/font/css/open-iconic-bootstrap.css
• HTML: <span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

Foundation

• CSS: /open-iconic/font/css/open-iconic-foundation.css
• HTML: <span class="fi-icon-name" title="icon name" aria-hidden="true"></span>

<!-- Example: Standalone usage -->
<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>

The SVG sprite allows you to load all icons in a single request. To use it, place an <svg> tag in your HTML and use the <use> tag to reference a specific icon from the sprite file.

Styling

• Sizing: Set equal width and height on the <svg> tag.
• Coloring: Set the fill property on the <use> tag.

Tip: Add a general class to the <svg> tag for shared styles and a unique class to the <use> tag for icon-specific styles (like color).

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

<style>
.icon {
  width: 16px;
  height: 16px;
}

.icon-account-login {
  fill: #f00;
}
</style>

Blazor.Animate supports named options via ASP.NET Core's named options pattern. This allows you to define multiple distinct sets of default animation settings and select them using the OptionsName parameter on the <Animate> component.

// Define a named configuration
services.Configure<AnimateOptions>("my", options =>
{
    options.Animation = Animations.FadeDown;
    options.Duration = TimeSpan.FromSeconds(2);
});

// Apply the named configuration
<Animate OptionsName="my">
    <h1>Hello, world!</h1>
</Animate>

You can define global default animation settings using ASP.NET Core's Configure<AnimateOptions> in your service configuration. If an <Animate> component does not specify its own parameters, it will use these defaults.

services.Configure<AnimateOptions>(options =>
{
    options.Animation = Animations.FadeDown;
    options.Duration = TimeSpan.FromMilliseconds(100);
});

The Easing property of the <Animate> component accepts values from the BlazorAnimate.Easings class. Available easings include:

• Linear
• Ease, EaseIn, EaseOut, EaseInOut
• EaseInBack, EaseOutBack, EaseInOutBack
• EaseInSine, EaseOutSine, EaseInOutSine
• EaseInQuad, EaseOutQuad, EaseInOutQuad
• EaseInCubic, EaseOutCubic, EaseInOutCubic
• EaseInQuart, EaseOutQuart, EaseInOutQuart

The Animation property of the <Animate> component accepts values from the BlazorAnimate.Animations class. Available animations include:

• Fade: Fade, FadeIn, FadeUp, FadeDown, FadeLeft, FadeRight, FadeUpRight, FadeUpLeft, FadeDownRight, FadeDownLeft
• Flip: FlipUp, FlipDown, FlipLeft, FlipRight
• Slide: SlideUp, SlideDown, SlideLeft, SlideRight
• Zoom: ZoomIn, ZoomInUp, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomOut, ZoomOutUp, ZoomOutDown, ZoomOutLeft, ZoomOutRight