Dynamic icon name

[ejerskov]

Im trying to use country-icons dynamically based on input, but Im having issues.

<script setup lang="ts">
import { Icon } from '#components'

const props = defineProps<{
  country: string
}>()

const icon = computed(() => {
  const icon = props?.country.toLowerCase()
  if (icon == 'northern ireland') {
    return 'ireland'
  }
  return icon
})
const FlagIcon = h(Icon, { name: 'twemoji:flag-' + icon.value, size: 18 })

</script>
<template>
  <FlagIcon />
</template>

This is working when loading the page SSR, but navigating to the page results in errors like this: DR5f3n0Z.js:52 [Icon] failed to load icon 'twemoji:flag-hungary'

How can I create the icon names dynamically?

[antfu]

Can you provide a minimal reproduction? Thanks.

Why reproduction is required

[ejerskov]

Hi @antfu Im not very familiar with repos so I hope that this is a generic example where someone can help me on how to fix it.