SVG Icons and flags for Blazor

icons wallpaper

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 codeCountry name
acAscension Island
adAndorra
aeUnited Arab Emirates
afAfghanistan
agAntigua and Barbuda
aiAnguilla
alAlbania
amArmenia
aoAngola
aqAntarctica
arArgentina
asAmerican Samoa
atAustria
auAustralia
awAruba
axAland Islands
azAzerbaijan
baBosnia and Herzegovina
bbBarbados
bdBangladesh
beBelgium
bfBurkina Faso
bgBulgaria
bhBahrain
biBurundi
bjBenin
blSaint Barthélemy
bmBermuda
bnBrunei Darussalam
boBolivia (Plurinational State of)
bqBonaire, Sint Eustatius and Saba
brBrazil
bsBahamas
btBhutan
bvBouvet Island
bwBotswana
byBelarus
bzBelize
caCanada
ccCocos (Keeling) Islands
cdDemocratic Republic of the Congo
cfCentral African Republic
cgRepublic of the Congo
chSwitzerland
ciCôte d’Ivoire
ckCook Islands
clChile
cmCameroon
cnChina
coColombia
cpClipperton Island
crCosta Rica
cuCuba
cvCabo Verde
cwCuraçao
cxChristmas Island
cyCyprus
czCzech Republic
deGermany
dgDiego Garcia
djDjibouti
dkDenmark
dmDominica
doDominican Republic
dzAlgeria
eaCeuta & Melilla
ecEcuador
eeEstonia
egEgypt
ehWestern Sahara
erEritrea
esSpain
es-ctCatalonia
es-gaGalicia
etEthiopia
euEurope
fiFinland
fjFiji
fkFalkland Islands
fmFederated States of Micronesia
foFaroe Islands
frFrance
gaGabon
gbUnited Kingdom
gb-engEngland
gb-nirNorthern Ireland
gb-sctScotland
gb-wlsWales
gdGrenada
geGeorgia
gfFrench Guiana
ggGuernsey
ghGhana
giGibraltar
glGreenland
gmGambia
gnGuinea
gpGuadeloupe
gqEquatorial Guinea
grGreece
gsSouth Georgia and the South Sandwich Islands
gtGuatemala
guGuam
gwGuinea-Bissau
gyGuyana
hkHong Kong
hmHeard Island and McDonald Islands
hnHonduras
hrCroatia
htHaiti
huHungary
icCanary Islands
idIndonesia
ieIreland
ilIsrael
imIsle of Man
inIndia
ioBritish Indian Ocean Territory
iqIraq
irIran (Islamic Republic of)
isIceland
itItaly
jeJersey
jmJamaica
joJordan
jpJapan
keKenya
kgKyrgyzstan
khCambodia
kiKiribati
kmComoros
knSaint Kitts and Nevis
kpNorth Korea
krSouth Korea
kwKuwait
kyCayman Islands
kzKazakhstan
laLaos
lbLebanon
lcSaint Lucia
liLiechtenstein
lkSri Lanka
lrLiberia
lsLesotho
lgLGBT
ltLithuania
luLuxembourg
lvLatvia
lyLibya
maMorocco
mcMonaco
mdMoldova
meMontenegro
mfSaint Martin
mgMadagascar
mhMarshall Islands
mkNorth Macedonia
mlMali
mmMyanmar
mnMongolia
moMacau
mpNorthern Mariana Islands
mqMartinique
mrMauritania
msMontserrat
mtMalta
muMauritius
mvMaldives
mwMalawi
mxMexico
myMalaysia
mzMozambique
naNamibia
ncNew Caledonia
neNiger
nfNorfolk Island
ngNigeria
niNicaragua
nlNetherlands
noNorway
npNepal
nrNauru
nuNiue
nzNew Zealand
omOman
paPanama
pePeru
pfFrench Polynesia
pgPapua New Guinea
phPhilippines
pkPakistan
plPoland
pmSaint Pierre and Miquelon
pnPitcairn
prPuerto Rico
psState of Palestine
ptPortugal
pwPalau
pyParaguay
qaQatar
reRéunion
roRomania
rsSerbia
ruRussia
rwRwanda
saSaudi Arabia
sbSolomon Islands
scSeychelles
sdSudan
seSweden
sgSingapore
shSaint Helena, Ascension and Tristan da Cunha
siSlovenia
sjSvalbard and Jan Mayen
skSlovakia
slSierra Leone
smSan Marino
snSenegal
soSomalia
srSuriname
ssSouth Sudan
stSao Tome and Principe
svEl Salvador
sxSint Maarten
sySyrian Arab Republic
szSwaziland
taTristan da Cunha
tcTurks and Caicos Islands
tdChad
tfFrench Southern Territories
tgTogo
thThailand
tjTajikistan
tkTokelau
tlTimor-Leste
tmTurkmenistan
tnTunisia
toTonga
trTurkey
ttTrinidad and Tobago
tvTuvalu
twTaiwan
tzTanzania
uaUkraine
ugUganda
umUnited States Minor Outlying Islands
unUnited Nations
usUnited States of America
uyUruguay
uzUzbekistan
vaHoly See
vcSaint Vincent and the Grenadines
veVenezuela (Bolivarian Republic of)
vgVirgin Islands (British)
viVirgin Islands (U.S.)
vnVietnam
vuVanuatu
wfWallis and Futuna
wsSamoa
xkKosovo
xxUnknown
yeYemen
ytMayotte
zaSouth Africa
zmZambia
zwZimbabwe

Example

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

Screenshots

Wide flags from the component - SVG Icons and flags for Blazor
Wide flags from the component
Square flags from the component - SVG Icons and flags for Blazor
Square flags from the component

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.

3 thoughts on “SVG Icons and flags for Blazor

  1. 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 (: 

  2. Hi Padsen,

    thank you for your message.

    1. There is not licence at the moment. The component is free to use. I create those component for me and other developers. I hope they can be useful. Every donation is accepted 🤣 
    2. Yes, this is true. I’m not consider that a bug because I decided to to that. The logic behind is that an icon is square. So, Width and Height are the same for icons. For flags, it is slightly different because I use them. Which one do you use? Icons or Flags? I’ll update the component with your request in the next release.
    3. Thank you for the suggestion. I’ll look at it and update the component in the next release.

    Keep in touch!

  3. 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!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.