Vue.js verarbeitet Icon-Symbole über Komponenten

<Vorlage>
    <div
        v-if="istExternal"
        :Stil="StilExternesSymbol"
        Klasse = "svg-external-icon svg-icon"
        :Klasse="Klassenname"
    />
    <svg v-else class="svg-icon" :Klasse="Klassenname" aria-hidden="true">
        <use :xlink:href="iconName" rel="external nofollow" />
    </svg>
</Vorlage>
​
<Skript-Setup>
    importiere { isExternal als extern } von '@/utils/validate'
    importiere { defineProps, berechnet } von 'vue'
    const props = defineProps({
        //Symbol Symbol: {
            Typ: Zeichenfolge,
            erforderlich: true
        },
        // Name der Symbolklasse className: {
            Typ: Zeichenfolge,
            Standard: ''
        }
    })
    /**
     * Bestimmen Sie, ob es sich um ein externes Symbol handelt*/
    const isExternal = berechnet(() => extern(props.icon))
    /**
     * Externer Symbolstil */
    const styleExternalIcon = berechnet(() => ({
        Maske: `url(${props.icon}) no-repeat 50% 50%`,
        „-webkit-mask“: „url(${props.icon}) keine Wiederholung 50 % 50 %“
    }))
    /**
     * Projektsymbol */
    const iconName = berechnet(() => `#icon-${props.icon}`)
</Skript>
​
<style lang='scss' scoped>
    .svg-Symbol {
        Breite: 1em;
        Höhe: 1em;
        vertikale Ausrichtung: -0,15em;
        füllen: aktuelle Farbe;
        Überlauf: versteckt;
    }
​
    .svg-external-icon {
        Hintergrundfarbe: aktuelle Farbe;
        Maskengröße: Abdeckung !wichtig;
        Anzeige: Inline-Block;
    }
</Stil>
​

/**
 * Bestimmen Sie, ob es sich um eine externe Ressource handelt*/
Exportfunktion isExternal(Pfad) {
  return /^(https?:|mailto:|tel:)/.test(Pfad)
}

<span class="svg-container">
    <svg-Symbol Symbol="https://xxx.svg"></svg-Symbol>
</span>

importiere SvgIcon aus '@/components/SvgIcon'
​
// Erstellen Sie Ihren eigenen Kontext mit der Funktion require.context()
const svgRequire = require.context('./svg', false, /\.svg$/)
// An dieser Stelle wird eine Require-Funktion zurückgegeben, welche einen Request-Parameter für den Require-Import entgegennehmen kann.
// Diese Funktion bietet drei Eigenschaften und Sie können alle SVG-Symbole über require.keys() abrufen. // Durchlaufen Sie die Symbole und übergeben Sie die Symbole als Anforderungen an die Funktion „Require Import“, um den Import der lokalen SVG-Symbole abzuschließen. svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))
​
Standard-App exportieren => {
 app.component('svg-icon', SvgIcon)
}

...
// svgIcon importieren
importiere installIcons aus '@/icons'
...
installIcons(App)
...

// Benutzername <svg-icon icon="user" />
// Passwort<svg-icon icon="password" />

const Pfad = require('Pfad')
Funktion „resolve(dir)“ {
 return path.join(__dirname, dir)
}
​
modul.exporte = {
 chainWebpack(Konfiguration) {
   // SVG-Sprite-Loader einrichten
   Konfigurationsmodul
     .regel('svg')
     .exclude.add(auflösen('src/icons'))
     .Ende()
   Konfigurationsmodul
     .regel('Symbole')
     .prüfung(/\.svg$/)
     .include.add(auflösen('src/icons'))
     .Ende()
     .verwenden('svg-sprite-loader')
     .loader('svg-sprite-loader')
     .Optionen({
       symbolId: 'Symbol-[Name]'
     })
     .Ende()
 }
}