mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-01-17 12:48:26 +01:00
Code Issues Releases Wiki Activity

icons sprite

Browse Source
This commit is contained in:
codecalm 2020-03-10 00:29:22 +01:00
parent 62841aaacb
commit 0c0877269d
6 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
icons-stroke.svg → demo/icons-stroke.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

0
icons.svg → demo/icons.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 118 KiB

After

Width:  |  Height:  |  Size: 118 KiB

33
gulpfile.js
View File

@ -6,6 +6,33 @@ const gulp = require('gulp'),
gulp.task('icons-sprite', function (cb) {
glob("_site/icons/*.svg", {}, function (er, files) {
let svgContent = '';
files.forEach(function (file, i) {
let name = path.basename(file, '.svg'),
svgFile = fs.readFileSync(file),
svgFileContent = svgFile.toString();
svgFileContent = svgFileContent
.replace(/<svg[^>]+>/g, '')
.replace(/<\/svg>/g, '')
.replace(/\n+/g, '')
.replace(/>\s+</g, '><')
.trim();
svgContent += `<symbol id="${name}" viewBox="0 0 24 24">${svgFileContent}</symbol>`
});
let svg = `<svg xmlns="http://www.w3.org/2000/svg"><defs>${svgContent}</defs></svg>`;
fs.writeFileSync('icons-sprite.svg', svg);
cb();
});
});
gulp.task('icons-preview', function (cb) {
const columnsCount = 17,
padding = 29,
paddingOuter = 5,
@ -46,7 +73,7 @@ gulp.task('icons-sprite', function (cb) {
const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`;
fs.writeFileSync('icons.svg', svgContent);
fs.writeFileSync('demo/icons.svg', svgContent);
cb();
});
});
@ -82,7 +109,7 @@ gulp.task('icons-stroke', function (cb) {
const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`;
fs.writeFileSync('icons-stroke.svg', svgContent);
fs.writeFileSync('demo/icons-stroke.svg', svgContent);
cb();
});
@ -102,8 +129,6 @@ gulp.task('optimize', function (cb) {
.replace(/\s+"/g, '"')
.replace(/\n\n+/g, "\n");
console.log('file', file);
fs.writeFileSync(file, svgFileContent);
});

1
icons-sprite.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

2
package.json
View File

@ -14,7 +14,7 @@
"main": "gulpfile.js",
"scripts": {
"optimize": "gulp optimize",
"build": "gulp optimize && gulp build && gulp icons-sprite"
"build": "gulp optimize && gulp build && gulp icons-preview && gulp icons-sprite"
},
"description": "",
"devDependencies": {

4
readme.md
View File

@ -2,8 +2,8 @@
A set of almost 300 free MIT-licensed high-quality SVG icons for you to use in your web projects.
![Tabler icons](./icons.svg)
![Tabler icons](demo/icons.svg)
### Multiple strokes
![Tabler icons](./icons-stroke.svg)
![Tabler icons](demo/icons-stroke.svg)