web-dev-qa-db-fra.com

Comment importer un fichier svg dans un composant Vue?

Dans vue composant de fichier unique. J'importe un fichier svg comme celui-ci: import A from 'a.svg' Et comment puis-je utiliser A dans mon composant?

javascriptsvgvue.js
23
shangxinbo

D'après les informations que vous avez fournies, vous pouvez:

  1. Installer vue-svg-loader

npm install --save-dev vue-svg-loader

  1. Configurez le webpack:
module: {
    rules: [
      {
       test: /\.svg$/,
       loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
      },
    ],
  },
  1. Importez le svg et utilisez-le comme composant normal:
<template>
  <nav id="menu">
    <a href="...">
      <SomeIcon class="icon" />
      Some page
    </a>
  </nav>
</template>

<script>
import SomeIcon from './assets/some-icon.svg';

export default {
  name: 'menu',
  components: {
    SomeIcon,
  },
};
</script>

Référence: https://github.com/visualfanatic/vue-svg-loader

16
Renato Krcelic

Si vous avez le contrôle sur le fichier svg, vous pouvez simplement l'envelopper dans un fichier vue) comme ceci:

a.vue:

<template>
  <svg>...</svg>
</template>

Juste demander le fichier comme ça après: import A from 'a.vue'

11
Moritur

Si vous utilisez Webpack, vous pouvez utiliser le contexte require pour charger des fichiers SVG à partir d'un répertoire. Sachez que cela mettra tous les fichiers SVG dans vos fichiers Javascript et risquerait d'alourdir votre code.

Comme exemple simplifié, j’utilise ce composant svg:

data() {
    return {
        svg: ''
    };
},

props: {
    name: {
        type: String,
        required: true
    }
}

created() {
    this.svg = require(`resources/assets/images/svg/${this.name}.svg`);
}

Le modèle ressemble simplement à ceci:

<template>
    <div :class="classes" v-html="svg"></div>
</template>

Normalement, vous ne pouvez pas simplement charger des fichiers SVG de cette manière et vous attendre à ce qu’ils soient utilisés avec un fichier v-html directive puisque vous n'obtenez pas la sortie brute. Vous devez utiliser le Webpack raw-loader alors assurez-vous d’obtenir le résultat brut:

{
    test: /\.svg$/,
    use: [
        {
            loader: 'raw-loader',
            query: {
                name: 'images/svg/[name].[ext]'
            }
        },
        {
            loader: 'svgo-loader',
            options: svgoConfig
        }
    ]
}

L'exemple ci-dessus utilise également le svgo-loader puisque vous souhaiterez optimiser considérablement vos fichiers SVG si vous procédez de cette façon.

J'espère que cela vous aidera, vous ou toute autre personne, à résoudre ce problème sans vous plonger directement dans une solution tierce.

6
Stephan-v

Vous avez d’abord besoin d’un chargeur spécifique pour le composant, qui contiendra le svg my webpack.base.config.js

module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      },
      {
        test: /\.vue$/,

        use: [
                    {
            loader: "vue-loader", 
            options: vueLoaderConfig
                    },
                    {
                        loader: "vue-svg-inline-loader",
                        options: { /* ... */ }
                    }
                ]
      }
//.. your other rules
}

documentation de vues-svg-inline-loader: https://www.npmjs.com/package/vue-svg-inline-loader
documentation de vue-svg-loader: https://www.npmjs.com/package/vue-svg-loader

Ensuite, vous pouvez initialiser un fichier vue

<template>
<div>

  <img svg-inline class="icon" src='../pathtoyourfile/yoursvgfile.svg' alt="example" />

</div>
</template>

<script>
import axios from 'axios'



export default {
  name: 'logo',
  data () {
  },
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#logo{
  width:20%;
}
.rounded-card{
    border-radius:15px;
}
//the style of your svg 
//look for it in your svg file ..
//example
.cls-1,.cls-7{isolation:isolate;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);};stroke-width:2px;}..cls-6{opacity:0.75;mix-blend-mode:multiply;}.cls-7{opacity:0.13;}.cls-8{fill:#ed6a29;}.cls-9{fill:#e2522b;}.cls-10{fill:#ed956e;}.cls-185{fill:#ffc933;}..cls-13{fill:#ffd56e;}.cls-14{fill:#1db4d8;}.cls-15{fill:#0f9fb7;}.cls-16{fill:#3ad4ed;}.cls-17{fill:#25bdde;}.cls-18{fill:#fff;}
//


</style>

Votre svg fils ne doit pas contenir de balise de style, donc copiez-collez le style dans le style vue avec une propriété scoped pour le conserver spécifique à ce composant).
vous pouvez simplement charger votre composant à un emplacement spécifique de votre application et l'utiliser

<template>

<v-app id="app">

    <logo/>
   <router-view/>

</v-app>



</template>

<script>
import logo from './components/logo.vue'

export default {
  name: 'App',
  data(){
    return {
      //your data
    }
  },
  components:{
logo //the name of the component you imported
  },


  }
}
</script>

<style>
#app {

  font-family: 'Hellow', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #070b0f;
  margin-top: 60px;
}

</style>
0
Aleks

J'aime utiliser pug comme moteur de template (avec de nombreux avantages, à mon avis). Si vous le faites, vous pourrez facilement inclure des fichiers tels que SVG simplement en écrivant:

include ../assets/some-icon.svg

C'est ça! il n'y a rien d'autre à faire - je pense que c'est un moyen très facile et pratique d'inclure des choses comme de plus petits svg - le code facilement inclus du fichier est toujours propre!

Vous pouvez trouver ici plus d'informations sur la manière d'inclure PugJS Vue instance https://www.npmjs.com/package/vue-cli-plugin-pug

0
lazercaveman