Le contenu de cet article explique comment créer des icônes à partir de symboles en svg. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
1. cnpm i gulp -g
2. Créez un nouveau fichier gulpfile.js
var gulp = require('gulp');
var svgSymbols = require('gulp-svg-symbols');
gulp.task('sprites',function(){
return gulp.src('assets/svg/*.svg').pipe(svgSymbols()).pipe(gulp.dest('assets'));
})3. Créez un nouvel actif/svg et mettez le fichier svg téléchargé. dans
Astuce dans le fichier svg : remplacez le nom du fichier svg par l'identifiant requis
4 Exécutez les sprites gulp
5. Utilisez
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.icon{
width:32px;
height:32px;
fill:red;
}
</style>
</head>
<body>
<svg class="icon">
<use xlink:href="/assets/svg-symbols.svg#boat"></use>
</svg>
</body>
</html>Articles connexes recommandés :
Fonction de dessin SVG : SVG réalise le dessin d'une fleur (avec code)
<élément marqueur> les attributs d'utilisation et de marqueur
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!
Comment trier dans Excel
Comment déclencher un événement de pression de touche
Classement des applications de la plateforme de trading de devises virtuelles
Comment connecter PHP à la base de données mssql
Que dois-je faire si mon lecteur C devient rouge ?
Introduction aux modificateurs de contrôle d'accès Java
Comment résoudre l'exception de débordement de pile Java
référencement wordpress
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
