Maison  >  Article  >  interface Web  >  Comment créer une icône à partir d'un symbole en SVG

Comment créer une icône à partir d'un symbole en SVG

不言
不言original
2018-08-08 11:15:082502parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn