Systèmes de Sprites SVG : Gestion Efficace des Icônes
Créez des systèmes de sprites SVG efficaces pour les applications à grande échelle. Apprenez la génération de sprites, les patterns d'utilisation et les techniques d'optimisation des performances.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- Les sprites SVG combinent des dizaines d'icônes en une seule requête HTTP, réduisant considérablement la surcharge réseau
-
Le pattern
<symbol>+<use>permet de définir les icônes une fois et de les référencer n'importe où sur la page - Les sprites externes conviennent mieux aux grandes applications (cacheables), tandis que les sprites inline conviennent aux sites plus petits (latence zéro)
- Stylisez les sprites avec des propriétés personnalisées CSS pour un dimensionnement cohérent, des thèmes de couleur et des états hover
-
Ajoutez toujours
aria-hidden="true"aux icônes décoratives etrole="img"avec<title>aux icônes significatives
Pourquoi les Sprites SVG ?
Des fichiers SVG individuels signifient des requêtes HTTP séparées. Les systèmes de sprites combinent les icônes en fichiers uniques, améliorant les performances et simplifiant la gestion.
Avantages du Système de Sprites
Performance
Icônes Individuelles :
50 icônes x 1 requête = 50 requêtes
Sprite SVG :
50 icônes = 1 requêteGestion
Avantages :
- Source unique de vérité
- Mises à jour faciles
- Style cohérent
- Compatible avec le contrôle de version
Types de Sprites
Sprite Externe
Fichier séparé référencé :
<!-- sprites.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</symbol>
<symbol id="icon-search" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27..."/>
</symbol>
</svg>
<!-- Utilisation -->
<svg class="icon">
<use href="/sprites.svg#icon-home"/>
</svg>Sprite Inline
Intégré dans le HTML :
<body>
<!-- Conteneur de sprite caché -->
<svg style="display: none;">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="..."/>
</symbol>
<!-- plus de symboles -->
</svg>
<!-- Utilisation n'importe où sur la page -->
<svg class="icon">
<use href="#icon-home"/>
</svg>
</body>Sprite CSS en Arrière-plan
Approche Data URI :
.icon-home {
background-image: url("data:image/svg+xml,...");
}Pro Tip: Préférez les sprites inline pour les icônes au-dessus de la ligne de flottaison qui doivent s'afficher instantanément, et les sprites externes pour les grands ensembles d'icônes qui bénéficient du cache navigateur entre les navigations de pages.
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealCréation de Sprites
Création Manuelle
Structure :
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Styles partagés -->
<style>
.icon-stroke { stroke-width: 2; fill: none; }
</style>
</defs>
<symbol id="icon-1" viewBox="0 0 24 24">
<!-- chemins d'icônes -->
</symbol>
<symbol id="icon-2" viewBox="0 0 24 24">
<!-- chemins d'icônes -->
</symbol>
</svg>Génération Automatisée
Avec svg-sprite :
// gulpfile.js
const svgSprite = require('gulp-svg-sprite');
gulp.task('sprite', () => {
return gulp.src('icons/*.svg')
.pipe(svgSprite({
mode: {
symbol: {
dest: '.',
sprite: 'sprites.svg'
}
}
}))
.pipe(gulp.dest('dist'));
});Intégration Webpack
// webpack.config.js
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
module.exports = {
module: {
rules: [{
test: /\.svg$/,
use: [{
loader: 'svg-sprite-loader',
options: { extract: true }
}]
}]
},
plugins: [new SpriteLoaderPlugin()]
};Patterns d'Utilisation
Utilisation Basique
<svg class="icon icon-home" aria-hidden="true">
<use href="#icon-home"/>
</svg>Composant React
function Icon({ name, size = 24, className }) {
return (
<svg
className={`icon ${className}`}
width={size}
height={size}
aria-hidden="true"
>
<use href={`#icon-${name}`}/>
</svg>
);
}
// Utilisation
<Icon name="home" size={20} className="nav-icon"/>Composant Vue
<template>
<svg :class="['icon', className]" :width="size" :height="size">
<use :href="`#icon-${name}`"/>
</svg>
</template>
<script>
export default {
props: {
name: String,
size: { type: Number, default: 24 },
className: String
}
}
</script>"Un système de sprites SVG bien construit est l'épine dorsale de tout système de design scalable. C'est le seul asset qui touche chaque page et chaque composant.
Styliser les Sprites
Style CSS
.icon {
width: 24px;
height: 24px;
fill: currentColor;
}
.icon-primary {
fill: var(--color-primary);
}
.icon-lg {
width: 32px;
height: 32px;
}Propriétés Personnalisées CSS
:root {
--icon-size: 24px;
--icon-color: currentColor;
}
.icon {
width: var(--icon-size);
height: var(--icon-size);
fill: var(--icon-color);
}
.icon-lg { --icon-size: 32px; }
.icon-danger { --icon-color: #dc3545; }Icônes Stroke
.icon-stroke {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeAccessibilité
Icônes Décoratives
<button>
<svg class="icon" aria-hidden="true">
<use href="#icon-settings"/>
</svg>
Paramètres
</button>Icônes Significatives
<a href="/home">
<svg class="icon" role="img" aria-label="Accueil">
<title>Accueil</title>
<use href="#icon-home"/>
</svg>
</a>Optimisation des Performances
Stratégie de Cache
<!-- Pré-charger le sprite externe -->
<link rel="preload" href="/sprites.svg" as="image" type="image/svg+xml">Découpage de Code
// Charger le sprite à la demande
async function loadSprite() {
const response = await fetch('/sprites.svg');
const svg = await response.text();
document.body.insertAdjacentHTML('afterbegin', svg);
}Sous-ensemble de Sprites
Créez des sprites plus petits par section :
/sprites
/navigation-icons.svg
/social-icons.svg
/editor-icons.svgPour les applications avec plus de 100 icônes, divisez les sprites par section de page ou domaine fonctionnel. Cela évite de charger les icônes d'éditeur sur les pages qui n'ont besoin que des icônes de navigation, gardant le payload initial petit.
Gérer de Grands Ensembles d'Icônes
Organisation
/icons
/navigation
home.svg
menu.svg
/actions
edit.svg
delete.svg
/social
twitter.svg
facebook.svgDocumentation
Générez une référence d'icônes :
<div class="icon-grid">
<div class="icon-item">
<svg><use href="#icon-home"/></svg>
<span>home</span>
</div>
<!-- ... -->
</div>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealVectoSolve pour les Ensembles d'Icônes
Conversion d'Icônes
Utilisez VectoSolve pour créer des icônes :
- Convertissez les images sources
- Nettoyez et optimisez
- Combinez en sprite
- Déployez
Sortie Cohérente
VectoSolve fournit :
- Chemins propres
- viewBox cohérent
- Sortie optimisée
- Prêt pour les sprites
Conclusion
Les systèmes de sprites SVG améliorent considérablement la gestion des icônes et les performances. Choisissez la bonne approche pour votre projet — inline pour les petits ensembles, externe pour les grandes applications. Utilisez VectoSolve pour créer des icônes propres et cohérentes prêtes pour l'intégration en sprites.