Malangnya, pada masa ini tidak mungkin untuk membuat import secara dinamik. Saya mendapati diri saya mengalami masalah yang sama beberapa bulan lalu. Penyelesaian saya adalah untuk merawat ikon sebagai SVG dan mencipta fail import yang dilampirkan pada projek saya seperti ini:

interface SvgObject { [key: string]: Function; } export function importSvg(icon: string) { const svg = { "sliders-horizontal": () => { return '      '; }, }

Dan buat komponen paparan seperti yang ditunjukkan di bawah yang akan mendapatkan semula ikon yang sepadan dengan nama yang diberikan dengan bantuan prop.

Sudah tentu, membuat fail import secara manual akan menjadi rumit, jadi dalam kes saya, saya mencipta skrip python yang membawa laluan ke folder ikon SVG dan memproses setiap ikon untuk mengecilkannya dan mencipta fail import secara automatik. Skrip ini berfungsi dengan ikon dari Perpustakaan Ikon Phosphor. Anda boleh mencari kod untuk skrip dan komponen Vue dalam repositori github:

https://github.com/fchancel/Phosphor-icon-vue-component

Jika anda memutuskan untuk menggunakan ikon Fosfor, jangan teragak-agak untuk mendapat inspirasi daripadanya, ubah suai atau gunakannya