{
  "id": 6713349,
  "title": "How to add country icons to a Vue 3 app",
  "url": "https://urgent.news/2026/09/11/how-to-add-country-icons-to-a-vue-3-app",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-11T05:13:24.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/rushan123/how-to-add-country-icons-to-a-vue-3-app-13db"
  },
  "original_language": "en",
  "account": "Adding country icons to a Vue 3 app is a straightforward process. First, you must install the @geoicons/vue package using npm. Once installed, you can import individual country icons as Vue 3 components by using their full PascalCase names like UnitedStates, France, or Japan. The icons are rendered like any other Vue component, with the optional size and strokeWidth props used to adjust their dimensions and outline thickness, respectively. Default styling applies, and you can customize colors and other attributes through attribute fallthrough. For icons representing countries at runtime, create a small component map using the component :is directive to keep the bundle tree-shakable. ARIA labels should be provided only when the icon conveys the country information, as the icons themselves are decorative and receive aria-hidden by default.",
  "summary": "Vue has no shortage of icon sets. Carets and chevrons come in every pack. Geography is the thin part of the shelf: where a set covers countries at all, it usually means flag squares rather than map shapes . GeoIcons ships country, area, and subdivision icons as individual Vue 3 components, 799 of them at the time of writing. Adding one takes three steps: install the package, import the icon by…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}