Ein Schriftart-ähnliches SVG-Symbolsystem für VUE

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!