Un système d'icônes SVG en forme de police pour VUE

La gestion des icônes dans Vue.js peut être délicate. Les polices d'icônes sont pratiques mais manquent de flexibilité de personnalisation, et le contrôle des versions peut être un cauchemar en raison de leur nature binaire. Les SVG offrent une solution supérieure, mais le maintien de la facilité d'utilisation et de la gestion efficace nécessite une approche réfléchie.

Cet article présente un système d'icônes SVG idéal pour les applications Vue.js, en se concentrant sur la simplicité et la maintenabilité:

• Ajout / suppression d'icônes: Ajoutez ou supprimez simplement les SVG d'un dossier désigné.
• Utilisation: utilisez des icônes dans des modèles avec la syntaxe simple<svg-icon icon="rocket"></svg-icon> .
• Styling: Icônes d'échelle et de couleur utilisant des propriétés font-size et color CSS, imitant le comportement des polices d'icônes.
• Optimisation: évite la duplication du code SVG pour plusieurs instances de la même icône.
• Intégration WebPack: aucune modification de configuration Webpack n'est nécessaire.

Ce système est construit à l'aide de deux petits composants Vue à un seul fichier et nécessite:

• WebPack: supposé si vous utilisez la Vue CLI.
• svg-inline-loader : Installable via npm install svg-inline-loader --save-dev . Ce chargeur nettoie les parties inutiles du code SVG.

Le composant SVG Sprite ( SvgSprite.vue )

Pour éviter la répétition du code SVG, nous créons un SVG Sprite - un SVG caché contenant toutes les autres icônes SVG. Les icônes sont accessibles via le<use></use> Tag faisant référence à l'ID de l'icône:<svg><use xlink:href="#rocket"></use></svg> . Le composant SvgSprite implémente ceci:

<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>

Le modèle comprend un caché<svg></svg> élément dont le contenu est généré dynamiquement par $options.svgSprite . Le script utilise require.context avec svg-inline-loader pour traiter les SVG, supprimant les balises et attributs inutiles. Il convertit ensuite chaque SVG en un<symbol></symbol> élément, ajoutant un ID unique.

Placez ce composant en haut de votre fichier App.vue .

La composante icône ( SvgIcon.vue )

Le composant SvgIcon est plus simple, en utilisant le<use></use> Tag aux icônes de référence du 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>

Le CSS stylise l'icône pour se comporter comme une police d'icône, permettant des ajustements de couleur et de taille faciles. Un accessoire spin ajoute une animation.

Enregistrez ce composant dans main.js :

 Importer Vue à partir de «Vue»
importer svgicon à partir de '@ / composants / svgicon.vue'
Vue.Component («SVG-ICON», SVGICON)

Ce système fournit une solution propre, efficace et facilement maintenable pour gérer les icônes SVG dans vos applications Vue.js. D'autres améliorations pourraient inclure la gestion des ratios d'aspect non carré et la compatibilité des outils de cadre / build plus large.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!