Schritte zum Verpacken und Konfigurieren von SVG-Komponenten in Vue-Projekten

<Vorlage>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" rel="external nofollow" />
  </svg>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "SvgIcon",
  Requisiten: {
    Symbolklasse: {
      Typ: Zeichenfolge,
      erforderlich: wahr,
    },
    Klassenname: {
      Typ: Zeichenfolge,
      Standard: "",
    },
  },
  berechnet: {
    Symbolname() {
      gibt `#icon-${this.iconClass}` zurück;
    },
    svgClass() {
      wenn (dieser.Klassenname) {
        gibt "SVG-Symbol" + diesen Klassennamen zurück;
      } anders {
        gibt "SVG-Symbol" zurück;
      }
    },
  },
};
</Skript>

<Stilbereich>
.svg-Symbol {
  Breite: 1em;
  Höhe: 1em;
  vertikale Ausrichtung: -0,15em;
  füllen: aktuelle Farbe;
  Überlauf: versteckt;
}
</Stil>

Vue von „vue“ importieren
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(req)

const Pfad = require('Pfad')
modul.exporte = {
    chainWebpack: Konfiguration => {
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRegel
            .prüfung(/\.svg$/)
            .include.add(Pfad.resolve(__dirname, './src/icons')).end()
            .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'))
            .Ende()
            .use('Dateilader')
            .loader('Dateilader')
    }
}

<Skript>
Standard exportieren {
  funktional: wahr,
  Requisiten: {
    Ebene:
      Typ: Nummer,
      erforderlich: wahr,
    },
  },
  rendern: Funktion (h, Kontext) {
    konsole.log(Kontext);
    lass vnodes = [];
    let { Ebene } = Kontext.Eigenschaften;
    // vnodes.push(<i class="el-icon-edit" style="width:19px"></i>);
    vnodes.push(<svg-icon icon-class="date"></svg-icon>);
    vnodes.push(<span class="span">{level}</span>);
    vnodes zurückgeben;
  },
};
</Skript>
<Stilbereich>
.span {
  Schriftgröße: 50px;
}
</Stil>