The content of this article is about how to create icons from symbols in svg. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. cnpm i gulp -g
2. Create a new gulpfile.js file
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. Create a new assets/svg and put the downloaded svg into the svg file
Tip: Change the svg file name to the required id
4. Run gulp sprites
5. Use it directly in 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>Related articles Recommended:
SVG drawing function: svg to draw a flower (with code)
The use of
The above is the detailed content of How to make icon from symbol in svg. For more information, please follow other related articles on the PHP Chinese website!
How to solve invalid synrax
What to do if windows photo viewer is out of memory
Common encryption methods for data encryption storage
Introduction to foreign free vps software
The difference between scratch and python
What does network access denied mean wifi?
Port 8080 is occupied
SQL 5120 error solution
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
