Die Verwendung von SVG-Komponenten im Vue-Cli-Projekt und die Analyse der Prinzipien der SVG-Nutzung

Ich bin auf die Verwendung von SVG im Vue-Cli-Projekt gestoßen und habe den Prozess der Erkundung seiner Verwendungsprinzipien aufgezeichnet.

• SVG-Dateireferenz

1. Schauen Sie sich zunächst das SVG-Verzeichnis dieses Projekts an. Verschiedene SVG-Dateien werden in den Verzeichnissen src/icons und SVG gespeichert (Sie können die Alibaba- Bibliotheksadresse aus der Alibaba-Vektorbibliothek iconfont abrufen ) .

---

 2. Öffnen Sie index.js unter den Symbolen wie folgt:

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
import generateIconsView from '@/views/svg-icons/generateIconsView.js' // just for @/views/icons , you can delete it
// register globally
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('./svg', false, /\.svg$/)
const iconMap = requireAll(req)

generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it

---

analysieren:

//Den Kontext der Datei abrufen, die importiert werden muss. Was zurückgegeben wird, ist eine Funktion. Zum Verständnis können Sie auf einen anderen Blog verweisen: Grundlegendes zu require.context

const req = require.context('./svg', false, /\.svg$/)

Ich gebe req in der Konsole aus:

Diese Funktion hat drei Eigenschaften:

Diese Funktion hat drei Attribute: Auflösung, Schlüssel, ID

        · Auflösung: ist eine Funktion, die die ID des aufzulösenden Moduls zurückgibt.

        · Schlüssel: ist ebenfalls eine Funktion, die ein Array zurückgibt, das aus allen Anforderungsobjekten besteht, die vom Kontextmodul analysiert werden können.

        · id: ID des Kontextmoduls

Die Funktion „keys()“ wird von der nächsten Funktion aufgerufen (ich habe die folgende Ausgabe gemacht):

const requireAll = requireContext => {

    console.log('2222')

    console.log(requireContext.keys())

    console.log('33333')

    console.log(requireContext.keys().map(requireContext))

    return requireContext.keys().map(requireContext) // alle SVG-Dateien im SVG-Ordner benötigen

}

Der Zweck dieser Funktion besteht darin, auf alle SVG-Dateien im SVG-Ordner zu verweisen , ähnlich wie require('./svg/wechat.svg') ;

Konsolenausgabe:

Erweitern Sie die zweite Ausgabe:

Der nächste Schritt besteht darin, es in main.js einzuführen und es dann in der SVG-Komponente aufzurufen.

        import './icons' // Symbol

Importieren Sie SVGIcon aus '@/components/SvgIcon' // SVG-Komponente. Die von Ihnen geschriebene Komponente wird zum Aufrufen der SVG-Datei verwendet. Die SVG-Komponente muss nur den Namen der SVG-Datei erhalten, um wirksam zu werden.

<svg-icon class-name="disabled" :icon-class=" item " /> //item ist der Dateiname von .svg

• Quelle der SVG-Komponente:

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

Das Obige ist die Definition der Komponente. Sie empfängt zwei Parameter, className und iconClass: className ist optional; iconClass ist eigentlich der Name der .svg-Datei.

<svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>

Dieser Absatz stellt eine feste Methode zum Aufrufen von SVG-Dateien dar. Sie müssen sich keine Gedanken darüber machen, warum sie auf diese Weise verwendet wird (wenn Sie herausfinden möchten, warum, können Sie sich die Zeit nehmen, sie selbst zu erkunden).

• Lassen Sie uns abschließend über einige nützliche Möglichkeiten sprechen, SVG-Dateien in Projekten zu verwenden, ohne Komponenten zu verwenden.

1. Verwenden Sie das <img>-Tag als Bild

<img src="mySVG.svg" alt="" />

2. Als CSS-Hintergrundbild

.el {background-image: url(mySVG.svg);}

3. Ich persönlich finde die Verwendung anderer Iframe-Tags wie des a-Tags unpraktisch.

Diese Erkundung endet hier, sie ist möglicherweise nicht vollständig, sie dient nur als Referenz! Wenn Sie Fragen haben, die gemeinsam besprochen werden müssen, können Sie uns gerne mitteilen, vielen Dank!