Vue SVG-Symbolkonfiguration

Konfiguration des SVG-Symbols

Bei der Entwicklung von Projekten werden häufig SVG-Vektorgrafiken verwendet. Nachdem wir SVG verwendet haben, werden die Bildressourcen nicht mehr auf die Seite geladen.

Dies ist eine große Verbesserung der Seitenleistung, und unsere SVG-Datei ist viel kleiner als img und beansprucht kaum Ressourcen im Projekt.

Installieren Sie das SVG-Abhängigkeits-Plugin

pnpm install vite-plugin-svg-icons -D

Vite-plugin-svg-icons offizielles Dokument

vite.config.tsKonfigurieren Sie das Plugin in

import {
    
     createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
    
    
  return {
    
    
    plugins: [
      createSvgIconsPlugin({
    
    
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

Import der Eintragsdatei

app.use()

// svg插件需要的配置代码
import 'virtual:svg-icons-register'

app.mount('#app')

3.4.1 SVG ist als globale Komponente verpackt

Da viele Module des Projekts Symbole verwenden müssen, ist es als globale Komponente verpackt! ! !

Erstellen Sie eine SVGIcon-Komponente im Verzeichnis src/components: Die Darstellung sieht wie folgt aus

<template>
  <div>
    <svg :style="{ width: width, height: height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
defineProps({
  //xlink:href属性值的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  //svg矢量图的名字
  name: String,
  //svg图标的颜色
  color: {
    type: String,
    default: ""
  },
  //svg宽度
  width: {
    type: String,
    default: '16px'
  },
  //svg高度
  height: {
    type: String,
    default: '16px'
  }

})
</script>
<style scoped></style>

Erstellen Sie eine index.ts-Datei im Verzeichnis des src-Ordners: Wird zum Registrieren aller globalen Komponenten im Komponentenordner verwendet! ! !

import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
export default {
    install(app: App) {
        Object.keys(components).forEach((key: string) => {
            app.component(key, components[key]);
        })
    }
}

Führen Sie die Datei src/index.ts in die Eintragsdatei ein und installieren Sie das benutzerdefinierte Plug-In über die Methode app.use

import gloablComponent from './components/index';
app.use(gloablComponent);