Comment importer des fichiers svg dans Vue 3 ?

Question

J'ai essayé ce qui suit :
https://github com. /visualfanatic/vue-svg-loader/tree/master

Mais comme vue-template-compiler est utilisé dans Vue 2, il existe un conflit de version.

J'ai essayé :
https://github.com/visualfanatic/vue-svg -loader

Mais il me manque une dépendance Vue spécifique.

J'ai remarqué qu'il y avait une note lors de l'utilisation de TypeScript, qui nécessite de déclarer un fichier de définition de type. Cependant, j'obtiens toujours l'erreur "Impossible de trouver le module '../../assets/myLogo.svg' ou sa déclaration de type correspondante".

Voici ce que j'ai ajouté :

vue.config.js

module.exports = {
  chainWebpack : (config) =>
  {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRègle
      .use('vue-loader-v16')
      .loader('vue-loader-v16')
      .fin()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
  configureWebpack : process.env.NODE_ENV === 'production' {} : {
    outil de développement : 'carte-source'
  },
  publicPath : process.env.NODE_ENV === 'production' ?
    '/Site Web personnel/' : '/'
}</pré>
<p>cales-svg.d.ts</p>
<pre class="brush:php;toolbar:false;">déclarer le module '*.svg' {
  contenu const : n’importe lequel ;
  exporter le contenu par défaut ;
}</pré>
<p>MonComponent.vue</p>
<pre class="brush:php;toolbar:false;"><template>
  <div>
     <MonLogo />
  </div>
</modèle>

<script lang="ts">
importer * en tant que MyLogo depuis "../../assets/myLogo.svg" ;

exporter le composant défini par défaut ({
  nom : "MonComposant",
  Composants: {
    MonLogo
  },
  accessoires : {
    
  },
  configuration (accessoires)
  {
    retour {
      accessoires
    } ;
  }
});


</script>

Answer 1

vue-svg-loader n'est pas compatible avec vue 3. Pour importer un fichier SVG et l'utiliser comme composant, enveloppez simplement le contenu du fichier dans un « modèle »

En composante :

<template>
  <div class="title">
    <span>Lorem ipsum</span>
    <Icon />
  </div>
</template>

<script>
import Icon from '~/common/icons/icon.svg';

export default {
  name: 'PageTitle',
  components: { Icon },
};
</script>

Webpack :

{
   test: /\.svg$/,
   use: ['vue-loader', path.resolve(__dirname, 'scripts/svg-to-vue.js')],
}

scripts/svg-to-vue.js :

module.exports = function (source) {
  return `<template>\n${source}\n</template>`;
};

Answer 2

En fait, Vue CLI prend déjà en charge SVG de manière native. Il utilise file-loader en interne. Vous pouvez confirmer en exécutant la commande suivante sur le terminal :

vue inspect --rules

Si « svg » est répertorié (il devrait l'être), alors il vous suffit de :

<template>
  <div>
    <img :src="myLogoSrc" alt="my-logo" />
  </div>
</template>

<script lang="ts">
  // 请使用`@`来引用项目的根目录“src”
  import myLogoSrc from "@/assets/myLogo.svg";

  export default defineComponent({
    name: "MyComponent",

    setup() {
      return {
        myLogoSrc
      };
    }
  });
</script>

Donc, si votre objectif est simplement d'afficher du SVG, vous n'avez besoin d'aucune bibliothèque tierce.

Bien sûr, pour satisfaire aux exigences de déclaration de type du compilateur TypeScript :

declare module '*.svg' {
  // 它实际上是一个字符串，精确地说是指向图像文件的解析路径
  const filePath: string;

  export default filePath;
}