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>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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Parlons de la façon d'utiliser SVG pour obtenir un effet de mosaïque d'images
Sep 01, 2022 am 11:05 AM
Comment utiliser SVG pour obtenir un effet de mosaïque d’images sans utiliser Javascript ? L'article suivant vous donnera une compréhension détaillée, j'espère qu'il vous sera utile !
Comment convertir le format svg au format jpg
Nov 24, 2023 am 09:50 AM
svg peut être converti au format jpg à l'aide d'un logiciel de traitement d'image, d'outils de conversion en ligne et de la bibliothèque de traitement d'image Python. Introduction détaillée : 1. Le logiciel de traitement d'images comprend Adobe Illustrator, Inkscape et GIMP ; 2. Les outils de conversion en ligne incluent CloudConvert, Zamzar, Online Convert, etc. ; 3. Bibliothèque de traitement d'images Python, etc.
Une analyse approfondie de la façon d'utiliser les icônes svg dans vue3+vite
Apr 28, 2022 am 10:48 AM
Les images svg sont largement utilisées dans les projets. L'article suivant explique comment utiliser les icônes svg dans vue3 + vite. J'espère que cela sera utile à tout le monde !
Tutoriel d'introduction à VUE3 : Utilisez le plug-in Vue.js pour jouer avec SVG
Jun 16, 2023 am 09:48 AM
Avec le développement continu du développement frontal Web moderne, de plus en plus de technologies sont largement utilisées dans le développement réel. Parmi eux, Vue.js est actuellement l'un des frameworks JavaScript les plus populaires. Il est basé sur le modèle MVVM et fournit une riche bibliothèque d'API et de composants, facilitant le développement d'applications Web réactives, réutilisables et efficaces. La dernière version de Vue.js3 offre de meilleures performances et des fonctionnalités plus riches que l'ancienne version, qui a attiré une attention et des recherches généralisées. Cet article vous présentera un
Explication détaillée de l'utilisation de SVG pour ajouter un logo au favicon
Sep 07, 2022 am 10:30 AM
Comment ajouter un logo à un favicon en utilisant SVG ? L'article suivant vous présentera comment utiliser SVG pour générer un favicon avec logo. J'espère qu'il vous sera utile !
Comment utiliser la méthode svg dans vue3+vite2
May 11, 2023 pm 05:55 PM
1. Installez vite-plugin-svg-icons. Vous devez également installer les dépendances liées à fast-glob. Sinon, lorsque vite exécute npmrundev, il signalera l'erreur Cannotfindmodule'fast-glob' npmifast-glob@3.x-Dnpmivite-. plugin-svg. -icons@2.x-D 2. Créez un nouveau composant index.vueimport{computed}from'vue';cons sous src/components/svgIcon
Apprenez à utiliser le framework Gulp avec Laravel Elixir
Jan 22, 2024 am 11:27 AM
Laravel Elixir est un ensemble d'outils d'automatisation front-end populaire basé sur Gulp, qui simplifie de nombreuses tâches qui nécessitaient auparavant un travail manuel. Mais la conception élégante de l'API de Laravel Elixir ne signifie pas que les développeurs n'ont pas du tout besoin de comprendre l'utilisation de Gulp. Au contraire, comprendre l'utilisation de Gulp permet de mieux comprendre le principe de fonctionnement de Laravel Elixir et d'améliorer l'efficacité du développement. Cet article explique comment utiliser Gulp dans le framework Laravel Elixir.
Comment utiliser SVG dans vue3+vue-cli4
May 11, 2023 pm 05:58 PM
Il s'agit de "svg-sprite-loadernpminstallsvg-sprite-loader--save-dev" et de src/components/svgIcon.index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon", props :{iconClass :{type:String},className :{type:String},},setup
