Ability to use icons via Name parameter

[Lewitje]

trafficstars

We want to save the icon names as strings in our db, then use them via a name option, this is not currently possible via importing each icon seperatly.

E.g.

Is this something that could be implemented?

[hypernova7]

You can use require.context, like this:

const icons = require.context('./node_modules/phosphor-vue/src/components', true, /\.vue$/i)
icons.keys().map((icon) => {
  const component = icons(icon).default
  console.log(component.name)
  // Load components
  Vue.component(component.name, component)
})

[dnlsndr]

Hi @Lewitje thanks for opening this issue. It's currently not possible to import a icon manifest that links a icon name to the actual component. What you can do, and what I'd suggest, is that you create a spearate mapping table that maps your custom names to the icon component:

import { markRaw } from 'vue'
import { PhAirplaneLanding } from '@phosphor-icons/vue'

const iconMap = new Map()
map.set('ph-airplane-landing', markRaw(PhAirplaneLanding))

// or 

const iconMap = {
  'ph-airplane-landing': markRaw(PhAirplaneLanding))
}

which allows you to specify a completely custom name for each icon.

You could also do this:

import * as icons from  '@phosphor-icons/vue'

which will result in a key-value pairing of the module name e.g.

icons == {
... ,
PhAirplaneLanding: <component>
}

This solution is for vue 3.