PSC.Blazor.Components.Icons 6.0.7

SVG Icons and flags for Blazor

This component helps you to display an SVG image in your application. All the icons are embedded in the component. Also, you have the complete SVG images for flags.

The class SVGIcons has already 1298 SVG images ready to use. SVGFlags contains all the flags in SVG in 2 formats: square and wide.

The NuGet package for this component is available.

OnClick

This is an EventCallback<MouseEventArgs> if you want to receive a callback when you user clicks on the image.

Color

The color of the SVG image.

Size

The size of the image in pixel (default 24 pixels). This value is applied to Height and Width. So, the image is a square.

StrokeWidth

The size of the pen to draw the image (default 2 pixels)

Elements

SVG image to display. If you have an SVG image pass only the content of SVG tag. For example if you want to display _2fa:

<path stroke='none' d='M0 0h24v24H0z' fill='none' />
<path d='M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54' />
<path d='M10 16v-8h4' />
<line x1='10' y1='12' x2='13' y2='12' />
<path d='M17 16v-6a2 2 0 0 1 4 0v6' />
<line x1='17' y1='13' x2='21' y2='13' />

Filled

Define is you want to fill the image.

Rotate

The rotation to apply to your image

Examples

Basic use

<SVGIcon Elements="@SVGIcons.Code" />

Size and color

<SVGIcon Elements="@SVGIcon.Credit_card" Size="16" Color="blue" />

CSS class

<SVGIcon class="icon" Elements="@SVGIcons.Alarm" />
<SVGIcon class="icon" Elements="@SVGIcons.Code" />
<SVGIcon class="icon" Elements="@SVGIcons.Copy" Color="blue" />

Flags

OnClick

This is an EventCallback<MouseEventArgs> if you want to receive a callback when you user clicks on the image.

FlagType

The image could be:

• Square
• Wide

Width

It is the width of the image. The default value is 120.

Height

It is the height of the image. The default value is 100.

CountryCode

This is the code of the country with 2 letters.

Examples

<SVGFlag CountryCode="GB" FlagType="FlagType.Wide" Width="75" Height="50" />
<SVGFlag CountryCode="US" FlagType="FlagType.Square" Width="50" Height="50" />

Screenshot

Other Blazor components

More examples and documentation

• Write a reusable Blazor component
• Getting Started With C# And Blazor
• Setting Up A Blazor WebAssembly Application
• Working With Blazor Component Model
• Secure Blazor WebAssembly With IdentityServer4
• Blazor Using HttpClient With Authentication
• InputSelect component for enumerations in Blazor
• Use LocalStorage with Blazor WebAssembly
• Modal Dialog component for Blazor
• Create Tooltip component for Blazor
• Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs