美文网首页
html载入svg雪碧图

html载入svg雪碧图

作者: 吞风咽雪 | 来源:发表于2020-08-14 10:14 被阅读0次

gulpfile.js

var gulp = require('gulp');
var path = require('path');
var svgSymbols = require('gulp-svg-symbols');
gulp.task('build', function() {
    return gulp.src('svgs/*.svg').pipe(
        svgSymbols({
            svgAttrs: {
                style: 'position: absolute; width: 0px; height: 0px; overflow: hidden;'
            },
            slug: name => 'icon-' + name,
            templates: [
                path.join(__dirname, `template/svg-symbols.tpl`),
            ]
        })
    ).pipe(
        gulp.dest('dist')
    );
})

template

<svg<%= attributesToString(svgAttrs) %>>
<% if (defs) { %><defs>
<%= defs.trim() %>
</defs>
<% } %><%= icons.map(svgdataToSymbol).join('\n') %>
</svg>

相关文章

  • html载入svg雪碧图

    gulpfile.js template

  • vue-cli3使用svg的最佳实践

    目录 iconfont的三种使用方式及其优缺点 封装svg组件 svg雪碧图 自动导入svg图标 封装svg组件 ...

  • 雪碧图

    html文件: css文件: 雪碧图: 效果图:

  • 雪碧图

    雪碧图 .lian:link{ display:...

  • 如何管理系统中的图标?

    1.雪碧图2.svg 多侧图标3.font 单侧图标 vue.config.js 中自定义vue-svg-load...

  • 不同图片类型以及区别

    一些名词:jpg(jpeg),png,gif,webp,bmp,apng,base64,svg,雪碧图,图标字体 ...

  • 雪碧图

    雪碧图 *{ padding: 0; margin: 0; } .xuebitu:...

  • 前端性能优化汇总

    网络优化 减少请求文件数,资源合并(雪碧图、SVG(Iconfont)、JS/CSS文件合并) 减少资源体积,资源...

  • SVG

    @(HTML5)[canvas与SVG] [TOC] 十一 、SVG HTML体系中,最常用的绘制矢量图的技术是S...

  • 雪碧图

    雪碧图 .box:link{display: block;width: 3...

网友评论

      本文标题:html载入svg雪碧图

      本文链接:https://www.haomeiwen.com/subject/cotgdktx.html