Vue 3 importe dynamiquement en fonction des accessoires

Question

J'utilise unplugin-icon pour créer un composant d'icône, normalement je peux importer par exemple

.

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

Cela fonctionne, mais si nous voulons utiliser une autre icône, cela ne semble pas pratique d'importer une par une, j'ai donc créé un composant dynamique appelé 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>

Mais lorsque j'essaie de l'importer dans un composant, cela génère une erreur Uncaught (in Promise) TypeError: 无法解析模块说明符 '~icons/prime/copy'. Des suggestions pour cette approche ou une bibliothèque d'icônes proposant une approche simple ? J'ai essayé vue font Awesome mais ce n'est toujours pas aussi simple que je le souhaiterais.

Answer 1

Malheureusement, il n'est actuellement pas possible de créer des importations dynamiques. Je me suis retrouvé avec le même problème il y a quelques mois. Ma solution était de traiter les icônes en SVG et de créer un fichier d'import attaché à mon projet comme ceci :

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" /> ';
    },
}

Et créez un composant de vue comme indiqué ci-dessous qui récupérera l'icône correspondant au nom donné à l'aide d'accessoires.

<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"/>

Bien sûr, créer manuellement le fichier d'importation serait fastidieux, donc dans mon cas, j'ai créé un script python qui prend le chemin d'accès au dossier des icônes SVG et traite chaque icône pour les réduire et créer automatiquement le fichier d'importation. Ce script fonctionne avec les icônes de la bibliothèque d'icônes Phosphor. Vous pouvez trouver le code des scripts et des composants Vue dans le dépôt github :

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

Si vous décidez d'utiliser une icône Phosphor, n'hésitez pas à vous en inspirer, à la modifier ou à l'utiliser