Using a prop in an import statement in Vue, using Laravel and Inertia?

I'm trying to dynamically load only specific icons from the lucide-vue-next package in my vue page, however it's not wanting to work. I'm using Laravel 12 (Latest), Vue3 (Latest shipped with Laravel), and Inertia.js (Latest shipped with Laravel)

My controller code:

$races = Race::with('skills', 'trait')->get();
$raceIcons = 'Sparkles'; //implode(',', $races->pluck('icon')->toArray());
return Inertia::render('game/character/Create', ['races' => $races, 'races_icons' => $raceIcons]);

My vue code:

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Head, useForm, usePage } from '@inertiajs/vue3';

const page = usePage();
const raceIcons = computed(() => page.props.races_icons); // With or without .value at the end of the statement before the ;
console.log(raceIcons);
...
</script>

<script lang="ts">
    import { raceIcons } from 'lucide-vue-next';
</script>

I'm getting the error: Uncaught ReferenceError: raceIcons is not defined

The component isn't loaded when I try to do this dynamically, however when I call:

import { Sparkles } from 'lucide-vue-next';

It works just fine. Is there any way I can get this to work? I really don't want to load absolutely every single lucide icon on every page.