So verwenden Sie SVG in vue2

Schritt 1: Installieren Sie das SVG-Sprite-Loader-Plugin

npm install -S svg-sprite-loader

Schritt 2: Kapseln Sie die SVG-Komponente

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>
 
<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
  },
};
</script>
 
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em; 
  fill: currentColor; 
  overflow: hidden;
}
</style>

Schritt 3: Legen Sie die erforderlichen SVG-Symbole im Verzeichnis ab

Schritt 4: Konfiguration

Es kann in webpack.config.js oder vue.config.js konfiguriert werden. Der Code lautet wie folgt

module.exports = {
  chainWebpack (config) {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

Schritt 5: Globale Registrierung

Erstellen Sie die Datei index.js im Symbolverzeichnis

Der Inhalt in index.js ist wie folgt

import Vue from 'vue'
import SvgIcon from '../../components/svgIcon'// svg component
 
// register globally
Vue.component('svg-icon', SvgIcon)
 
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

Schritt 6: Global in main.js importieren

import './assets/icons/index';

Schritt sieben: Verwenden

Code wie folgt anzeigen:

<!-- icon-class的值对应的是目录中svg的名子 -->
<p><svg-icon icon-class="user" /></p>
<p><svg-icon icon-class="advert" color='#27ac3d'/></p>
<p><svg-icon icon-class="brand" color='red'/></p>

Der Effekt ist wie folgt

Hinweis: Wenn das Symbol nicht angezeigt wird, führen Sie das Projekt bitte erneut aus.

Wenn es nach der Ausführung nicht angezeigt wird, überprüfen Sie bitte, ob der importierte Pfad an der entsprechenden Stelle korrekt ist, insbesondere der Pfad in vue.config.js.

So verwenden Sie SVG in vue2

Acho que você gosta