客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：shakyShane/gulp-svg-sprites开源软件地址(OpenSource Url)：https://github.com/shakyShane/gulp-svg-sprites开源编程语言(OpenSource Language)：JavaScript 45.2%开源软件介绍(OpenSource Introduction)：gulp-svg-sprites
Table of contents
InstallInstall it locally to your project. $ npm install --save-dev gulp-svg-spritesWindows note: Using Version < 4.0.0, make sure you also have all prerequisites for node-gyp. UsageWith no configuration,
var svgSprite = require("gulp-svg-sprites");
gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite())
.pipe(gulp.dest("assets"));
});Then, if you had a <i class="icon facebook"></i>PNG fallbackYou can easily support old browsers by piping the new SVG sprite through to another gulp task. There will be a
var svgSprite = require("gulp-svg-sprites");
var filter = require('gulp-filter');
var svg2png = require('gulp-svg2png');
gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite())
.pipe(gulp.dest("assets")) // Write the sprite-sheet + CSS + Preview
.pipe(filter("**/*.svg")) // Filter out everything except the SVG file
.pipe(svg2png()) // Create a PNG
.pipe(gulp.dest("assets"));
});Symbols modePass gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite({mode: "symbols"}))
.pipe(gulp.dest("assets"));
});Defs modePass gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite({mode: "defs"}))
.pipe(gulp.dest("assets"));
});Custom selectorsBy default, the filename will be used as the selector in the CSS, but this is how you'd override it (the gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite({
selector: "icon-%f"
}))
.pipe(gulp.dest("assets"));
});Custom IDsWith the gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite({
svgId: "svg-%f"
}))
.pipe(gulp.dest("assets"));
});Custom filenamesYou can also change the generated filenames with ease. For example, if you want to create a // Custom CSS filename
gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite({
cssFile: "scss/_sprite.scss"
}))
.pipe(gulp.dest("assets"));
});
// Custom SVG filename
gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite({
svg: {
sprite: "svg.svg"
}
}))
.pipe(gulp.dest("assets"));
});
// Custom preview filename + custom SVG filename
gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite({
svg: {
sprite: "svg.svg"
},
preview: {
sprite: "index.html"
}
}))
.pipe(gulp.dest("assets"));
});Base sizeSet the font-size of the .icon class. Just pass a plain number, no units. gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite({
baseSize: 16
}))
.pipe(gulp.dest("assets"));
});No previewsIf you don't want 'em. Works in all modes. gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite({
preview: false
}))
.pipe(gulp.dest("assets"));
});Using the built-in SCSS templategulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite({
templates: { scss: true }
}))
.pipe(gulp.dest("assets"));
});Advanced: custom templatesTemplates use Lodash Templates - check out their docs for usage instructions. Or take a look at the default CSS or the default SCSS for tips. You can get your hands on JUST the SVG Data and provide your own templates. For example, if you want to provide your own template for the CSS output, you could do this: var config = {
templates: {
css: require("fs").readFileSync("./path/to/your/template.css", "utf-8")
}
};
gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest("assets"));
});You can override all the templates used in the same way. Advanced: data transformsIf you want to do some custom stuff with your templates, you might need to transform the SVG data before it gets to your template. There
are two functions you can provide to do this and they'll override the internal ones. Override // Synchronous
var config = {
transformData: function (data, config) {
return data; // modify the data and return it
},
templates: {
css: require("fs").readFileSync("./path/to/your/template.css", "utf-8")
}
};
// Asynchronous
var config = {
asyncTransforms: true,
transformData: function (data, config, done) {
done(data); // modify the data and pass it
},
templates: {
css: require("fs").readFileSync("./path/to/your/template.css", "utf-8")
}
};
gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest("assets"));
});You can override all the templates used here in the same way. If you are doing any async work in these callbacks set Options
LicenseCopyright (c) 2017 Shane Osbourne Licensed under the MIT license. 
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论