Dynamic named imports using variables doesn't work with tree shaking

[HunterMeyer]

My app displays social media links and specifies the icon to display with each link.

I'm using the oh-vue-icons icon library. If you import the whole thing, it's huge.
So I want to import only the icons I have defined links for.
However, when I try to do the dynamic imports, it breaks tree shaking and I'm left with the entire library.

Here's my /src/data/social-links.js where I define the links and their icon name:

export default [
  {
    name: "LinkedIn",
    url: "...",
    iconName: "CoLinkedinIn"
  },
  {
    name: "GitHub",
    url: "...",
    iconName: "CoGithub"
  }
]

Now in my Vue code, SocialLinks.vue, I have:

import socialLinks from "/src/data/social-links.js"
import { ref, onBeforeMount } from "vue"
import { addIcons } from "oh-vue-icons"

const iconsLoaded = ref(false)

onBeforeMount(() => {
  importIcons()
})

const importIcons = async () => {
  const iconNames = socialLinks.map(link => link.iconName)

  await import("oh-vue-icons/icons").then(module => {
    const iconModules = iconNames.map(name => module[name])
    addIcons(...iconModules)
    iconsLoaded.value = true
  })
}

I have also tried an alternative approach in importIcons. But it didn't work either:

const importIcons = async () => {
  Promise.all(
    socialLinks.map(async (link) => {
      const { [link.iconName]: iconModule } = await import("oh-vue-icons/icons")
      return iconModule
    })
  ).then((modules) => {
    addIcons(...modules)
    iconsLoaded.value = true
  })
}

This works on the front-end code, however, tree shaking doesn't work.

I imagine this has something to do with not being able to evaluate the runtime code. But perhaps there's something I can do as a pre-build step?