[Question]: How to use icons from string?

[r-priyam]

When using the icons with strings it's not working in component. How to get it working, please? Sample code -

<template>
    <div>
        <nav class="grid gap-y-8">
            <a
		v-for="item in solutions"
		:key="item.name"
		:href="item.href"
		class="-m-3 p-3 flex items-center rounded-md"
	   >
		<component :is="item.icon" class="flex-shrink-0 h-6 w-6 text-black" aria-hidden="true" />
		<span class="ml-3 text-base font-medium text-gray-200">{{ item.name }}</span>
	   </a>
	</nav>
</div>

<script setup lang="ts">

const solutions = [
	{
		name: 'Item',
		description: 'Go to item',
		href: '#',
		icon: 'heroicons-outline:chart-bar',
	},
	{
		name: 'Item',
		description: 'Go to item',
		href: '#',
		icon: 'heroicons-outline:cursor-click',
	},
];

</script>

[antfu]

#5

As a workaround:

+ import ChartBar from '~icons/heroicons-outline/chart-bar'
+ import CursorClick from '~icons/heroicons-outline/cursor-click'

const solutions = [
	{
		name: 'Item',
		description: 'Go to item',
		href: '#',
-		icon: 'heroicons-outline:chart-bar',
+       icon: ChartBar
	},
	{
		name: 'Item',
		description: 'Go to item',
		href: '#',
-		icon: 'heroicons-outline:cursor-click',
+       icon: CursorClick
	},
];

[r-priyam]

That worked, Thank you :)