Das Verwalten von Symbolen in Vue.js kann schwierig sein. Icon -Schriftarten sind bequem, aber es fehlt die Flexibilit?t der Anpassung, und die Versionskontrolle kann aufgrund ihrer bin?ren Natur ein Albtraum sein. SVGs bieten eine überlegene L?sung, aber die Aufrechterhaltung der Benutzerfreundlichkeit und das effiziente Management erfordert einen nachdenklichen Ansatz.

Dieser Artikel enth?lt ein ideales SVG -Symbolsystem für VUE.JS -Anwendungen, wobei der Schwerpunkt auf Einfachheit und Wartbarkeit liegt:

• Symbol Addition/Entfernung: Fügen Sie SVGs einfach von einem festgelegten Ordner hinzu oder l?schen Sie sie einfach.
• Verwendung: Verwenden Sie Symbole in Vorlagen mit der einfachen Syntax<svg-icon icon="rocket"></svg-icon> .
• Styling: Skalierungs- und Farbsymbole unter Verwendung von CSS- font-size und color , das Verhalten des Symbol Schriftarts nachahmen.
• Optimierung: Vermeidet SVG -Code -Duplikation für mehrere Instanzen desselben Symbols.
• Webpack -Integration: Es sind keine Webpack -Konfigurations?nderungen erforderlich.

Dieses System wird unter Verwendung von zwei kleinen Ein-Datei-Vue-Komponenten erstellt und ben?tigt:

• Webpack: Angenommen, wenn Sie die Vue CLI verwenden.
• svg-inline-loader : Installierbar über npm install svg-inline-loader --save-dev . Dieser Loader reinigt unn?tige Teile des SVG -Codes.

Die SVG Sprite -Komponente ( SvgSprite.vue )

Um die Wiederholung von SVG -Code zu verhindern, erstellen wir eine SVG -Sprite - eine versteckte SVG mit allen anderen SVG -Symbolen. Icons werden über die zugegriffen<use></use> Tag verweist auf die ID des Symbols:<svg><use xlink:href="#rocket"></use></svg> . Die SvgSprite -Komponente implementiert dies:

<template>
  <svg height="0" style="display: none;" v-html="$options.svgSprite" width="0"></svg>
</template>

<script>
const svgContext = require.context(
  '!svg-inline-loader?'  
  'removeTags=true'   // Remove title tags, etc.
  '&removeSVGTagAttrs=true'   // Remove attributes
  '&removingTagAttrs=fill'   // Remove fill attributes
  '!@/assets/icons', // Icon directory
  true, // Search subdirectories
  /\w \.svg$/i // Only include SVG files
);

const symbols = svgContext.keys().map(path => {
  const id = path.replace(/^\.\/(.*)\.\w $/, '$1'); // Extract ID from filename
  const content = svgContext(path); // Get SVG content
  return content.replace('<svg', `<symbol id="${id}"`).replace('svg>', 'symbol>'); // Convert to symbol
});

export default {
  name: 'SvgSprite',
  svgSprite: symbols.join('\n'), // Concatenate symbols
};
</script>

Die Vorlage enth?lt eine versteckte<svg></svg> Element, deren Inhalt dynamisch von $options.svgSprite generiert wird. Das Skript verwendet require.context mit svg-inline-loader um SVGs zu verarbeiten, wodurch unn?tige Tags und Attribute entfernt werden. Es wandelt dann jeden SVG in a um<symbol></symbol> Element, Hinzufügen einer eindeutigen ID.

Platzieren Sie diese Komponente oben in Ihrer App.vue -Datei.

Die Symbolkomponente ( SvgIcon.vue )

Die SvgIcon -Komponente ist einfacher und verwendet die<use></use> Tag zu Referenzsymbolen aus dem Sprite:

<template>
  <svg class="icon" :class="{ 'icon-spin': spin }">
    <use :xlink:href="`#${icon}`"></use>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    icon: { type: String, required: true },
    spin: { type: Boolean, default: false },
  },
};
</script>

<style scoped>
svg.icon {
  fill: currentColor;
  height: 1em;
  margin-bottom: 0.125em;
  vertical-align: middle;
  width: 1em;
}
svg.icon-spin {
  animation: icon-spin 2s infinite linear;
}
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}
</style>

Das CSS stilft das Symbol, um sich wie eine Symbolschrift zu verhalten, wodurch einfache Farb- und Gr??enanpassungen erm?glicht werden k?nnen. Eine spin -Requisite fügt Animation hinzu.

Registrieren Sie diese Komponente in main.js :

 Vue aus "Vue" importieren
Importieren Sie SVGICON aus '@/components/svgicon.vue' '
VUE.COMPONENT ('SVG-ICON', SVGICON)

Dieses System bietet eine saubere, effiziente und leicht wartbare L?sung für die Verwaltung von SVG -Symbole in Ihren VUE.JS -Anwendungen. Weitere Verbesserungen k?nnten die Handhabung von Nicht-Quadrat-Seitenverh?ltnissen und eine breitere Kompatibilit?t für Framework/Build-Tool umfassen.

Das obige ist der detaillierte Inhalt vonEin Schriftart-?hnliches SVG-Symbolsystem für VUE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!