The component SVG Icons and flags for Blazor helps you to display a SVG image in your application for Blazor WebAssembly and Blazor Server with .NET6. All the icon are embedded in the component. Also, you have the complete SVG images for flags.
So, to add an icon, the class SVGIcons has already 1298 SVG images ready to use. SVGFlags contains all the flags (534) in SVG in 2 formats: square and wide.
The NuGet package for this component is available.
OnClick
Now, 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.
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
This part of the component gives you the opportunity to display a flag in SVG format.
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.
| Country code | Country name |
|---|---|
| ac | Ascension Island |
| ad | Andorra |
| ae | United Arab Emirates |
| af | Afghanistan |
| ag | Antigua and Barbuda |
| ai | Anguilla |
| al | Albania |
| am | Armenia |
| ao | Angola |
| aq | Antarctica |
| ar | Argentina |
| as | American Samoa |
| at | Austria |
| au | Australia |
| aw | Aruba |
| ax | Aland Islands |
| az | Azerbaijan |
| ba | Bosnia and Herzegovina |
| bb | Barbados |
| bd | Bangladesh |
| be | Belgium |
| bf | Burkina Faso |
| bg | Bulgaria |
| bh | Bahrain |
| bi | Burundi |
| bj | Benin |
| bl | Saint Barthélemy |
| bm | Bermuda |
| bn | Brunei Darussalam |
| bo | Bolivia (Plurinational State of) |
| bq | Bonaire, Sint Eustatius and Saba |
| br | Brazil |
| bs | Bahamas |
| bt | Bhutan |
| bv | Bouvet Island |
| bw | Botswana |
| by | Belarus |
| bz | Belize |
| ca | Canada |
| cc | Cocos (Keeling) Islands |
| cd | Democratic Republic of the Congo |
| cf | Central African Republic |
| cg | Republic of the Congo |
| ch | Switzerland |
| ci | Côte d’Ivoire |
| ck | Cook Islands |
| cl | Chile |
| cm | Cameroon |
| cn | China |
| co | Colombia |
| cp | Clipperton Island |
| cr | Costa Rica |
| cu | Cuba |
| cv | Cabo Verde |
| cw | Curaçao |
| cx | Christmas Island |
| cy | Cyprus |
| cz | Czech Republic |
| de | Germany |
| dg | Diego Garcia |
| dj | Djibouti |
| dk | Denmark |
| dm | Dominica |
| do | Dominican Republic |
| dz | Algeria |
| ea | Ceuta & Melilla |
| ec | Ecuador |
| ee | Estonia |
| eg | Egypt |
| eh | Western Sahara |
| er | Eritrea |
| es | Spain |
| es-ct | Catalonia |
| es-ga | Galicia |
| et | Ethiopia |
| eu | Europe |
| fi | Finland |
| fj | Fiji |
| fk | Falkland Islands |
| fm | Federated States of Micronesia |
| fo | Faroe Islands |
| fr | France |
| ga | Gabon |
| gb | United Kingdom |
| gb-eng | England |
| gb-nir | Northern Ireland |
| gb-sct | Scotland |
| gb-wls | Wales |
| gd | Grenada |
| ge | Georgia |
| gf | French Guiana |
| gg | Guernsey |
| gh | Ghana |
| gi | Gibraltar |
| gl | Greenland |
| gm | Gambia |
| gn | Guinea |
| gp | Guadeloupe |
| gq | Equatorial Guinea |
| gr | Greece |
| gs | South Georgia and the South Sandwich Islands |
| gt | Guatemala |
| gu | Guam |
| gw | Guinea-Bissau |
| gy | Guyana |
| hk | Hong Kong |
| hm | Heard Island and McDonald Islands |
| hn | Honduras |
| hr | Croatia |
| ht | Haiti |
| hu | Hungary |
| ic | Canary Islands |
| id | Indonesia |
| ie | Ireland |
| il | Israel |
| im | Isle of Man |
| in | India |
| io | British Indian Ocean Territory |
| iq | Iraq |
| ir | Iran (Islamic Republic of) |
| is | Iceland |
| it | Italy |
| je | Jersey |
| jm | Jamaica |
| jo | Jordan |
| jp | Japan |
| ke | Kenya |
| kg | Kyrgyzstan |
| kh | Cambodia |
| ki | Kiribati |
| km | Comoros |
| kn | Saint Kitts and Nevis |
| kp | North Korea |
| kr | South Korea |
| kw | Kuwait |
| ky | Cayman Islands |
| kz | Kazakhstan |
| la | Laos |
| lb | Lebanon |
| lc | Saint Lucia |
| li | Liechtenstein |
| lk | Sri Lanka |
| lr | Liberia |
| ls | Lesotho |
| lg | LGBT |
| lt | Lithuania |
| lu | Luxembourg |
| lv | Latvia |
| ly | Libya |
| ma | Morocco |
| mc | Monaco |
| md | Moldova |
| me | Montenegro |
| mf | Saint Martin |
| mg | Madagascar |
| mh | Marshall Islands |
| mk | North Macedonia |
| ml | Mali |
| mm | Myanmar |
| mn | Mongolia |
| mo | Macau |
| mp | Northern Mariana Islands |
| mq | Martinique |
| mr | Mauritania |
| ms | Montserrat |
| mt | Malta |
| mu | Mauritius |
| mv | Maldives |
| mw | Malawi |
| mx | Mexico |
| my | Malaysia |
| mz | Mozambique |
| na | Namibia |
| nc | New Caledonia |
| ne | Niger |
| nf | Norfolk Island |
| ng | Nigeria |
| ni | Nicaragua |
| nl | Netherlands |
| no | Norway |
| np | Nepal |
| nr | Nauru |
| nu | Niue |
| nz | New Zealand |
| om | Oman |
| pa | Panama |
| pe | Peru |
| pf | French Polynesia |
| pg | Papua New Guinea |
| ph | Philippines |
| pk | Pakistan |
| pl | Poland |
| pm | Saint Pierre and Miquelon |
| pn | Pitcairn |
| pr | Puerto Rico |
| ps | State of Palestine |
| pt | Portugal |
| pw | Palau |
| py | Paraguay |
| qa | Qatar |
| re | Réunion |
| ro | Romania |
| rs | Serbia |
| ru | Russia |
| rw | Rwanda |
| sa | Saudi Arabia |
| sb | Solomon Islands |
| sc | Seychelles |
| sd | Sudan |
| se | Sweden |
| sg | Singapore |
| sh | Saint Helena, Ascension and Tristan da Cunha |
| si | Slovenia |
| sj | Svalbard and Jan Mayen |
| sk | Slovakia |
| sl | Sierra Leone |
| sm | San Marino |
| sn | Senegal |
| so | Somalia |
| sr | Suriname |
| ss | South Sudan |
| st | Sao Tome and Principe |
| sv | El Salvador |
| sx | Sint Maarten |
| sy | Syrian Arab Republic |
| sz | Swaziland |
| ta | Tristan da Cunha |
| tc | Turks and Caicos Islands |
| td | Chad |
| tf | French Southern Territories |
| tg | Togo |
| th | Thailand |
| tj | Tajikistan |
| tk | Tokelau |
| tl | Timor-Leste |
| tm | Turkmenistan |
| tn | Tunisia |
| to | Tonga |
| tr | Turkey |
| tt | Trinidad and Tobago |
| tv | Tuvalu |
| tw | Taiwan |
| tz | Tanzania |
| ua | Ukraine |
| ug | Uganda |
| um | United States Minor Outlying Islands |
| un | United Nations |
| us | United States of America |
| uy | Uruguay |
| uz | Uzbekistan |
| va | Holy See |
| vc | Saint Vincent and the Grenadines |
| ve | Venezuela (Bolivarian Republic of) |
| vg | Virgin Islands (British) |
| vi | Virgin Islands (U.S.) |
| vn | Vietnam |
| vu | Vanuatu |
| wf | Wallis and Futuna |
| ws | Samoa |
| xk | Kosovo |
| xx | Unknown |
| ye | Yemen |
| yt | Mayotte |
| za | South Africa |
| zm | Zambia |
| zw | Zimbabwe |
Example
<SVGFlag CountryCode="GB" FlagType="FlagType.Wide" Width="75" Height="50" />
<SVGFlag CountryCode="US" FlagType="FlagType.Square" Width="50" Height="50" />
Screenshots
Wrap up
In conclusion, I hope you like this SVG Icons and flags for Blazor. I hope it is useful for all of us. Please extend this component: the full source code is on GitHub. I’m really happy if you want to leave a message about this component in the forum.
Hey Enrico! Great work, this was exactly what im looking for (:
But I have to ask a few things.
1. You don’t have any license conditions – We want to use this package for a language selector in our business application. Is it free to use for us? I can’t find a license file or anything for this.
2. There is a little bug with the height parameter (: Currently the width is set to width and height and the Height parameter is not used.
[attach]8[/attach]
3. I can’t swap icons on the fly. You see a possibility to do this? I have a small workaround for this, where i wrap your component in another one, your component only gets rendered if my language code is not null. I set the language code to null in my parent element, trigger StageHasChanged, wait for 1ms and set the language to its new value and it works. Maybe you can do similar stuff in the setter of the parameter or stuff like that (:
Hi Padsen,
thank you for your message.
Keep in touch!
Thanks for the fast response (:1. Great to hear, thanks for you work! Was very easy to implement.
2. True, but the html-element has a dimension of 30×30 (if i set width to 30) – the svg (FlagType.Wide) has a dimension of 30×21.42, so the element has always padding top and bot. I guess height should not be a parameter and get set in the correct ratio-relation to the width. Just a point to think about if you work on it. The dimension of the flag does not change, thats right (:
3. It’s just a suggestion, yeah (: I expected that it’ll change if I change the code – just experience.
Have a good one and keep going!