Vue

@geoicons/vue ships every icon as its own tree-shakeable Vue 3 component. Install it, import by category, and style with props. The full prop contract lives on the API overview. It's the same in every framework.

Requires Vue 3 (3.0+). On Vue 3.5+ it uses the built-in useId() for stable, SSR-safe ids; on 3.0–3.4 it falls back automatically.

Install

npm install @geoicons/vue

Import

import { Jp } from '@geoicons/vue/countries'; // country
import { Africa } from '@geoicons/vue/areas'; // area

Examples

<script setup lang="ts">
import { Jp } from '@geoicons/vue/countries';
</script>

<template>
  <!-- Default outline -->
  <Jp />

  <!-- Larger, bolder, colored -->
  <Jp :size="64" :stroke-width="1.75" stroke="currentColor" />

  <!-- Filled -->
  <Jp fill="currentColor" />

  <!-- Meaningful (announced by screen readers) -->
  <Jp aria-label="Japan" />
</template>

Convenience props are bound with :size / :stroke-width. Any other native SVG attribute (class, style, @click, data-*) falls through to the underlying <svg>.

There is no variant prop. Weight and fill are continuous. Drive them with strokeWidth and fill directly. See Styling.

License

If you're using GeoIcons with a commercial product, install the GeoiconsLicense plugin to activate your license. It verifies your commercial license key and waives the GPLv3 licensing requirements, allowing you to use Geoicons in proprietary applications under the terms of your commercial license.

import { createApp } from 'vue';
import { GeoiconsLicense } from '@geoicons/vue';
import App from './App.vue';

createApp(App)
  .use(GeoiconsLicense, { licenseKey: import.meta.env.VITE_GEOICONS_KEY })
  .mount('#app');

Read the reactive status anywhere with the useGeoiconsLicense() composable. See Licensing for more details.