Maison > Article > interface Web > Comment créer une icône à partir d'un symbole en SVG
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>directement en HTML.
Articles connexes recommandés :
Fonction de dessin SVG : SVG réalise le dessin d'une fleur (avec code)
cfed34043276627a47b82a517c1f84ee 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!