Svelte and (bootstrap) Icons - Import only the ones I need

I'm having troubles trying to understand how to import only the icons I need and use them as inline svg (so that I can change color and dimension, font icons would be ok as well)

I can:

1. Use the single svg files as with the img tag, not ok
2. Use font icons -> it imports the whole icon files with 1300 icons, when I just need like 20 of those
3. Reference the right symbol with svg use tag in the bootstrap-icons.svg file, the problem again is that that file has the whole 1300 files inside of it and it downloads the entirety of it on the client side before referencing a symbol
4. Copy pasting the single svgs interal tags and properties in a js object and then use it in an svg in conjuction with @html svelte utility (that is the best approach I've found right now, but it's really painful having to copy and modify/adapt every single svg I find)

The ideal would be to have a single svg file with only the symbols for the icons I need, but as far I can see bootstrap-icons doesn't have such a feature; and removing all the ones I dont use would be a pain

What would be your approach ? I'm lost

example of what I'm doing right now:

// icons.ts
export const svgIcons = {
    'award-fill': {
        viewBox: '0 0 16 16',
        svg: `<path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z"/>
        <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>`
    }
};

<script>
    // Icon.svelte
    import { svgIcons } from '../ts/icons';
    export let icon = 'award-fill';

    $: iconObject = svgIcons[icon];
</script>

<svg class="text-success" width="32" height="32" viewBox={iconObject.viewBox} fill="currentColor">
    {@html iconObject.svg}
</svg>