Vue 3 mengimport secara dinamik berdasarkan Props

Question

Saya menggunakan unplugin-icon untuk mencipta komponen ikon, biasanya saya boleh mengimport cth.

//script
import IconCopy from '~icons/prime/copy'
//template
<IconCopy/>

Ia berfungsi, tetapi jika kita ingin menggunakan ikon lain, rasanya menyusahkan untuk mengimport satu persatu, jadi saya mencipta komponen dinamik bernama Eunoicon.vue

<script setup>
const props = defineProps({
    icon : {type:String}
})
const from = `~icons/prime/${props.icon}`
const TheIcon = await import(/* @vite-ignore */from)
console.log('ti',TheIcon)
</script>
<template>
<TheIcon/>  
</template>

Tetapi apabila saya cuba mengimportnya ke dalam komponen, ia menimbulkan ralat Uncaught (in Promise) TypeError: 无法解析模块说明符 '~icons/prime/copy'. Sebarang cadangan untuk pendekatan ini atau mana-mana perpustakaan ikon yang menyediakan pendekatan mudah? Saya telah mencuba vue font Awesome tetapi ia masih tidak semudah yang saya mahukan.

Answer 1

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 '<line x1="148" y1="172" x2="40" y2="172" fill="none" /> <line x1="216" y1="172" x2="188" y2="172" fill="none" /> <circle cx="168" cy="172" r="20" fill="none" /> <line x1="84" y1="84" x2="40" y2="84" fill="none" /> <line x1="216" y1="84" x2="124" y2="84" fill="none" /> <circle cx="104" cy="84" r="20" fill="none" /> ';
    },
}

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

<script setup lang="ts">
import { computed } from "vue";
import { importSvg } from "@/icons/importSvg";

interface Props {
  icon: string;
}

const IconComponent = importSvg(props.icon);

</script>

<template>
  <span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 256 256"
      :aria-labelledby="icon"
      v-html="IconComponent"
    ></svg>
  </span>
</template>

<style>
...
</style>

<MyIcon icon="sliders-horizontal"/>

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