Detaillierte grafische Erklärung zur Verwendung von SVG im Vue3+Vite-Projekt

const req = require.context('./icons/svg', false, /\.svg$/)
const erfordertAlles = erfordertInhalt => erfordertInhalt.keys().map(erfordertInhalt)
erfordernAlles(req)

npm installiere svg-sprite-loader -D
# über Garn
Garn fügt SVG-Sprite-Loader hinzu -D

   <Vorlage>
  <svg :class="svgClass" v-bind="$attrs" :style="{color: color}">
    <use :xlink:href="iconName" rel="external nofollow" />
  </svg>
</Vorlage>

<Skript-Setup>


importiere { defineProps, berechnet } von "vue";

const props = defineProps({
  Name: {
      Typ: Zeichenfolge,
      erforderlich: true
    },
    Farbe:
      Typ: Zeichenfolge,
      Standard: ''
    }
})

const iconName = berechnet(()=>`#icon-${props.name}`);
const svgClass = berechnet(()=> {
  console.log(Eigenschaftenname, 'Eigenschaftenname');
  wenn (Eigenschaften.Name) {
        gibt `svg-icon icon-${props.name}` zurück
      }
      gib 'svg-icon' zurück
});
</Skript>

<style lang='scss'>
.svg-Symbol {
  Breite: 1em;
  Höhe: 1em;
  füllen: aktuelle Farbe;
  vertikale Ausrichtung: Mitte;
}
</Stil>

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren

importiere svgIcon aus „./components/svgIcon.vue“

App erstellen(App).Komponente('svg-icon', svgIcon).mount('#app');

importiere { readFileSync, readdirSync } von 'fs'

let idPerfix = ''
const svgTitle = /<svg([^>+].*?)>/
const clearHeightWidth = /(Breite|Höhe)="([^>+].*?)"/g

const hasViewBox = /(viewBox="[^>+].*?")/g

const clearReturn = /(\r)|(\n)/g

Funktion findSvgFile(dir) {
  const svgRes = []
  const dirents = readdirSync(dir, {
    mitDateitypen: true
  })
  für (const dirent von dirents) {
    wenn (dirent.isDirectory()) {
      svgRes.push(...findSvgFile(dir + dirent.name + '/'))
    } anders {
      const svg = readFileSync(dir + dirent.name)
        .toString()
        .replace(clearReturn, '')
        .replace(svgTitle, ($1, $2) => {
          // konsole.log(++i)
          // konsole.log(dirent.name)
          lass Breite = 0
          sei Höhe = 0
          lass Inhalt = $2.replace(
            klareHöheBreite,
            (s1, s2, s3) => {
              wenn (s2 === 'Breite') {
                Breite = s3
              } sonst wenn (s2 === 'Höhe') {
                Höhe = s3
              }
              zurückkehren ''
            }
          )
          wenn (!hasViewBox.test($2)) {
            Inhalt += `viewBox="0 0 ${width} ${height}"`
          }
          gibt `<symbol id="${idPerfix}-${dirent.name.replace(
            '.svg',
            ''
          )}" ${content}>`
        })
        .replace('</svg>', '</symbol>')
      svgRes.push(svg)
    }
  }
  svgRes zurückgeben
}

export const svgBuilder = (Pfad, Perfix = 'Symbol') => {
  wenn (Pfad === '') return
  idPerfix = Perfix
  const res = findSvgFile(Pfad)
  // console.log(Res.Länge)
  // const res = []
  zurückkehren {
    Name: "svg-transform",
    transformIndexHtml(html) {
      html.replace( zurückgeben
        '<Text>',
        `
          <Text>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; breite: 0; höhe: 0">
              ${res.join('')}
            </svg>
        `
      )
    }
  }
}

importiere { svgBuilder } aus './src/plugins/svgBuilder'; 

exportiere Standard-DefineConfig({
  Plugins: [svgBuilder('./src/icons/svg/')] // Alle SVG-Dateien unter src/icons/svg/ wurden hierher importiert, sie müssen nicht separat importiert werden})