svg中的symbol如何制作icon

时间2024-01-23 15:11:22发布访客分类HTML浏览510

导读：收集整理的这篇文章主要介绍了svg中的symbol如何制作icon，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于svg中的symbol如何制作icon，有一定的参考价值，有需要的朋友可以参考一下，希望对你有...

收集整理的这篇文章主要介绍了svg中的symbol如何制作icon，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于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>