Flag Image v1.0

The <e-flag-image> component is a component that can be used for for displaying the country flag based by the iso code.

Usage

The e-flag-image has attributes that must be provided,

<e-flag-image
  :isoCode="nl"
  :cdnBaseUrl="cdnBaseUrl"
/>

sandbox data :

isoCode: nlcdnBaseUrl: https://accp-cdn.econnect.rocks/

placeholder

Attributes

isoCode | Type: String | required
cdnBaseUrl | Type: String | required

<e-flag-image
  isoCode="nl"
  :cdnBaseUrl="cdnBaseUrl"
/>

Examples

Below a few interactive examples of e-images can be found.

NL Flag

<e-flag-image
  :isoCode="nl"
  :cdnBaseUrl="https://accp-cdn.econnect.rocks/"
/>

PL Flag

<e-flag-image
  :isoCode="pl"
  :cdnBaseUrl="https://accp-cdn.econnect.rocks/"
/>

Source Code

e-flag-image.vue

<script setup lang="ts">
import { computed } from 'vue';

import { Locale } from 'types/locale';

export type Props = {
  isoCode?: Locale | 'unknown' | string;
  cdnBaseUrl: string;
};

const props = withDefaults(defineProps<Props>(), {
  isoCode: 'unknown'
});

const isoCodeImage = computed(() => {
  return `${props.cdnBaseUrl}media/flags/${props.isoCode}.svg`;
});
</script>

<template>
  <div class="e-flag-image">
    <img
      :src="isoCodeImage"
      :alt="`flag_${isoCode}`"
    />
  </div>
</template>

<style scoped lang="scss">
.e-flag-image {
  width: 24px;

  img {
    max-width: 24px;
    max-height: 24px;
    border-radius: 6px;
  }
}
</style>