本篇文章给大家带来的内容是关于svg中的symbol如何制作icon，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1. cnpm i gulp -g
2. 新建一个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.新建assets/svg，将下载下来的svg放到svg文件中
Tip:将svg文件名改成需要的id
4.运行gulp sprites
5.直接在HTML中使用
<!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>相关文章推荐：
Atas ialah kandungan terperinci svg中的symbol如何制作icon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk memasukkan audio ke dalam ppt
Penggunaan fungsi fscanf
Bagaimana untuk menyembunyikan alamat IP pada TikTok
Muat turun E-O Exchange
Pengesyoran kedudukan perisian pengesanan perkakasan komputer
Pengenalan kepada arahan biasa postgresql
index.html apa itu
Bagaimana untuk menyambung vb untuk mengakses pangkalan data
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
