Zwei Möglichkeiten zum Einführen von SVG-Symbolen in Vue

So führen Sie SVG-Symbole in Vue ein

Methode 1 zum Einführen eines SVG-Symbols in Vue

Installieren

Garn fügt SVG-Sprite-Loader hinzu --dev

SVG-Komponente

index.vue

<!-- SVG-Komponente -->
<Vorlage>
 <svg Klasse="svg-icon" :Klasse="svgClass" aria-hidden="true">
  <use :xlink:href="Symbolname" />
 </svg>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "SvgIcon",
 Requisiten: {
  // SVG-Name svgName: {
   Typ: Zeichenfolge,
   erforderlich: true
  }
 },
 berechnet: {
  Symbolname() {
   gibt `#icon-${this.svgName}` zurück
  },
  svgClass() {
   wenn (dieser.svgName) {
    gib 'svg-icon' + this.svgName zurück
   } anders {
    gib 'svg-icon' zurück
   }
  }
 }
}
</Skript>

<style lang="less" scoped>
.svg-Symbol {
 Breite: 100px;
 Höhe: 100px;
 vertikale Ausrichtung: -0,15em;
 füllen: aktuelle Farbe;
 Überlauf: versteckt;
}
</Stil>

Registrieren Sie sich für den globalen

index.js

Vue von „vue“ importieren
importiere SvgIcon aus '@/components/SvgIcon'

// Registrieren Sie sich beim globalen Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
erfordernAlles(req)

vue.config.js

modul.exporte = {
	chainWebpack: Konfiguration => {
	 	Konfigurationsmodul
   .regel('svg')
   .exclude.add(auflösen('src/assets/icons'))
   .Ende()
  Konfigurationsmodul
   .regel('Symbole')
   .prüfung(/\.svg$/)
   .include.add(auflösen('src/assets/icons'))
   .Ende()
   .verwenden('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .Optionen({
    symbolId: 'Symbol-[Name]'
   })
   .Ende()
	}  
}

Auf der Seite verwendet

<!-- svg-name ist der SVG-Name-->
<svg-icon svg-name="ic_home_news" />

Methode 2 zum Einführen eines SVG-Symbols in Vue

npm installiere svg-sprite-loader --save-dev

Fügen Sie den folgenden Code zu vue.config.js hinzu

const path = require('Pfad');
Funktion „resolve(dir)“ {
 // __dirname absoluter Pfad des Stammverzeichnisses des Projekts return path.join(__dirname, dir);
}
modul.exporte = {
 chainWebpack: Konfiguration => {
 const svgRule = config.module.rule('svg');
 // Alle vorhandenen Loader löschen
 // Wenn Sie dies nicht tun, werden nachfolgende Loader nach den vorhandenen Loadern für diese Regel angehängt svgRule.uses.clear();
 svgRegel
  .prüfung(/\.svg$/)
  .include.add(Pfad.auflösen(__dirname, './src/icons/svg'))
  .Ende()
  .verwenden('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .Optionen({
  symbolId: 'Symbol-[Name]'
  });
 const fileRule = config.module.rule('Datei');
 fileRule.uses.clear();
 Dateiregel
  .prüfung(/\.svg$/)
  .exclude.add(Pfad.auflösen(__dirname, './src/icons/svg'))
  .Ende()
  .use('Dateilader')
  .loader('Dateilader');
 },
}

Erstellen Sie das folgende Dateiverzeichnis

SvgIcon.vue-Code

<Vorlage>
 <svg :class="svgClass" xmlns="http://www.w3.org/2000/svg">
 <use :xlink:href="Symbolname" xmlns:xlink="http://www.w3.org/1999/xlink" />
 </svg>
</Vorlage>
<Skript>
Standard exportieren {
 Name: "SvgIcon",
 Requisiten: {
 Symbolklasse: {
  Typ: Zeichenfolge,
  erforderlich: true
 },
 Klassenname: {
  Typ: Zeichenfolge,
  Standard: ''
 }
 },
 berechnet: {
 Symbolname() {
  gibt `#icon-${this.iconClass}` zurück;
 },
 svgClass() {
  wenn (dieser.Klassenname) {
  gib „SVG-Symbol“ + diesen Klassennamen zurück;
  } anders {
  gib „SVG-Symbol“ zurück;
  }
 }
 }
};
</Skript>
<Stilbereich>
.svg-Symbol {
 Breite: 1em;
 Höhe: 1em;
 vertikale Ausrichtung: -0,15em;
 füllen: aktuelle Farbe;
 Überlauf: versteckt;
}
</Stil>

SVG-Ordner zum Platzieren des SVG-Symbols

index.js-Code

importiere Vue von „vue“;
importiere SvgIcon von '@/components/SvgIcon'; // SVG-Komponente // global registrieren
Vue.component('svg-icon', SvgIcon);
const req = require.context('./svg', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
erfordernAlles(erfordern);

Führen Sie es schließlich in main.js ein

importiere './icons';

Verwenden von SVG auf der Seite

icon-class ist der SVG-Symbolname class-name ist der Klassenname, den Sie anpassen möchten

<svg-icon icon-class="features_ic_risk@1x" class-name="icon"></svg-icon>

Zusammenfassen

Damit ist dieser Artikel über zwei Möglichkeiten zum Einführen von SVG-Symbolen in Vue abgeschlossen. Weitere relevante Inhalte zum Einführen von SVG-Symbolen in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren: