lecoupa/vueflags

🇺🇸🇫🇷 One easy-to-use flag component for Vue.js with all ISO 3166-1 countries.

👋 Hey, I'm Julien. Follow me to learn more about my favorite Vue, Nuxt, Adonis and Tailwind packages.

The API to search or enrich companies	Improve your life by building new habits
The Companies API	Resilience Club

vueflags's Issues

Swiss and Vatican flag should be a square

Swiss flag:

Since January 1st, 2017 the Swiss Flag is required by law to be square:
"The Swiss flag shows a Swiss cross on a square background."
https://www.admin.ch/opc/en/classified-compilation/20091656/index.html#a3
https://www.admin.ch/opc/en/classified-compilation/20091656/index.html#app2

Just the flag on the sea has the proportions of 2:3.
https://www.admin.ch/opc/de/classified-compilation/19530141/index.html#app1ahref0

Vatican flag:
https://en.wikipedia.org/wiki/Flag_of_Vatican_City

Missing flags - compliance with ISO 3166-1

Hello first let me say I love the component and the effort you put into this project.
I noticed that some flags are missing when cross-checking them with the countries specified by the ISO 3166-1 - source: https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes
Maybe you find the time to implement the missing flags or can show me the process how to add them myself so they comply with the format used within vueflags.
Below I provided a list of missing flags:

country name	filename
Antarctica	aq.svg
Bouvet Island	bv.svg
United States Minor Outlying Islands	um.svg
French Guiana	gf.svg
French Southern Territories	tf.svg
Guadeloupe	gp.svg
Guyana	gy.svg
Heard Island and McDonald Islands	hm.svg
Kiribati	ki.svg
Mayotte	yt.svg
New Caledonia	nc.svg
Réunion	re.svg
Saint Helena, Ascension and Tristan da Cunha	sh.svg
Saint Martin (French part)	mf.svg
Saint Pierre and Miquelon	pm.svg
South Georgia and the South Sandwich Islands	gs.svg
Svalbard and Jan Mayen	sj.svg
Swaziland	sz.svg
Tuvalu	tv.svg
Wallis and Futuna	wf.svg

Thanks in advance!

Vue 3 support

Hello,

will you plan to add support for Vue3?

Best Regards

SVG images not showing on Chromium based browsers (Edge and Chrome)

It seems as if chromium based browsers can cause problems with the way flags are represented in the dom

currently

<img alt="gb" src="/path/to/flags/gb.svg" class="flag mx-3 gb-flag gb-flag--small" />

However if it is represented as an object it will work
working alternative

<object type="image/svg+xml" data="/path/to/flags/de.svg" class="flag gb-flag gb-flag--small"></object>

I don't know if this has something to do with in my case vue.js because it obviously works in chrome on your home page. But other than that I couldn't spot any difference in my code.

[bug] vue2 can not work

<el-table-column label="c">
    <template>
  <VueFlags code="ipInfo.countryCode" size="small" />
</template></el-table-column>

Relative icon paths are ignored

I couldn't figure out how to tell the component to render "./flags"; it will always assume "/flags" instead.

Create release and tags

Hello,

Is it possible that you can create a release/tag so I can fetch the assets folder for a version directly?
Would really help automatically downloading the zip from github for a specific version of this repo, into my project

Thanks!

Malta's Flag

The cross on Malta's flag must be on the left side of the white part not on the right.

Can you create a new release tag?

Hello @LeCoupa,

I am using the vueflags assets in a project of mine and would very much like to automate the checkout process.
While it is possible to specify a commit an checkout from there the nicer approach would be to reference a release tag.
It is pretty simple to create a new release tag from the github page for others to reference it: https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository

Would you be so kind and create a release tag?

Rounded flags

Noticed you only had the rectangular version of the flags set on the repo and I needed the rounded ones for my project. I have them all properly named and cleaned up on one of my projects in case anyone needs them. Ideally they'd sit under /assets/flags-rounded and the same could be done for the square ones.

Let me know if you're interested on a PR that adds them. The only issue I can think of is flags will need to be contributed to all sets instead of just one like you're doing now. If that's too much overhead, I'll probably share them on a new repo and link back to the plugin.

Importing into quasar

Hello how would I achive importing this plugin into the quasar framework?

Prop name wrong?

[Vue tip]: Prop "iconpath" is passed to component , but the declared prop name is "iconPath". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "icon-path" instead of "iconPath".

Indian Flag Issue

Hi, Thank you for providing .svg flags for Vue. Though, I have an issue.

The flag you have deployed for India is invalid in vueflags/assets/flags/in.svg. It is not an Indian flag. I request you to please change the flag to the one that I have shared below from the source of wikipedia or as per your wished open source. Furthermore, the Indian flag has 'Ashok Chakra' in between and not the star. I thank you in advance for the same.

Your flag:

Link:

https://github.com/growthbunker/vueflags/blob/master/assets/flags/in.svg

Svg:

<?xml version="1.0" encoding="iso-8859-1"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <rect y="85.337" style="fill:#F0F0F0;" width="512" height="341.326"/> <rect y="85.337" style="fill:#FF9811;" width="512" height="113.775"/> <rect y="312.888" style="fill:#6DA544;" width="512" height="113.775"/> <circle style="fill:#0052B4;" cx="256" cy="256" r="43.896"/> <circle style="fill:#F0F0F0;" cx="256" cy="256" r="27.434"/> <polygon style="fill:#0052B4;" points="256,222.146 264.464,241.341 285.319,239.073 272.927,256 285.319,272.927 264.464,270.659 256,289.854 247.536,270.659 226.681,272.927 239.073,256 226.681,239.073 247.536,241.341 "/> </svg>

Real Indian Flag:

Link:

https://en.wikipedia.org/wiki/File:Flag_of_India.svg#/media/File:Flag_of_India.svg

Svg:

<?xml version="1.0" encoding="UTF-8"?> <svg width="1350" height="900" viewBox="0 0 225 150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="225" height="150" fill="#f93"/> <rect y="50" width="225" height="100" fill="#fff"/> <rect y="100" width="225" height="50" fill="#128807"/> <g transform="translate(112.5,75)"> <circle r="20" fill="#008"/> <circle r="17.5" fill="#fff"/> <circle r="3.5" fill="#008"/> <g id="e"> <g id="f"> <g id="g"> <g id="h"> <circle transform="rotate(7.5) translate(17.5)" r=".875" fill="#008"/> <path d="m0 17.5 0.6-10.5-0.6-5-0.6 5 0.6 10.5z" fill="#008"/> </g> <use transform="rotate(15)" xlink:href="#h"/> </g> <use transform="rotate(30)" xlink:href="#g"/> </g> <use transform="rotate(60)" xlink:href="#f"/> </g> <use transform="rotate(120)" xlink:href="#e"/> <use transform="rotate(240)" xlink:href="#e"/> </g> </svg>

New Release?

You've merged #27 support Vue 3. What about sharing this with the public? :-)

No alt on images of flags

Lighthouse punishes for not having any alt on the images

Europe Flags

Hello,

I notice that the EU flag is not working, it returns unknown flag.