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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
