简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Tutoriel H5 > le corps du texte

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

不言
Libérer： 2018-08-08 11:15:08
original
2485 Les gens l'ont consulté

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'));
})
Copier après la connexion

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>
Copier après la connexion
directement en 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!

Étiquettes associées：
gulp svg
source：php.cn
Article précédent：Fonction de dessin SVG : svg réalise le dessin d'une fleur (avec code) Article suivant：Exemple de conversion d'une image jpg en animation de chemin de texte SVG (avec code)
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Créer un curseur de température SVG circulaire dans Angular ? Voici une démonstration statique d'un curseur de pouce circulaire que j'essaie de créer da...
Depuis 2024-04-03 09:33:29
0
1
376
Charger SVG en ligne et modifier la couleur de remplissage J'utilise le SVG comme ceci : <imagex="0"y="0"width="40"h...
Depuis 2024-04-02 13:32:42
0
1
321
Créez une carte avec D3 mais les données du pays n'apparaissent pas J'ai créé une carte en utilisant D3 de topojson mais dans le HTML, les données des pays ne...
Depuis 2024-04-02 10:29:33
0
1
282
SVG - bords laids avec plusieurs remplissages dégradés Je souhaite créer un sélecteur de couleurs JavaScript. J'utilise SVG pour créer un triangl...
Depuis 2024-04-01 20:00:27
0
1
289
Les icônes Reactjs SVG sont de tailles différentes malgré le même CSS C'est la première fois que je crée un site Web avec Reactjs. J'utilise les icônes ReactJS ...
Depuis 2024-04-01 13:18:38
0
1
355
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！