diff options
| -rw-r--r-- | .github/icons-stroke.png | bin | 0 -> 7714 bytes | |||
| -rw-r--r-- | .github/icons-stroke.svg | 22 | ||||
| -rw-r--r-- | .github/icons.png | bin | 80152 -> 177010 bytes | |||
| -rw-r--r-- | README.md | 6 | ||||
| -rw-r--r-- | gulpfile.js | 196 |
5 files changed, 98 insertions, 126 deletions
diff --git a/.github/icons-stroke.png b/.github/icons-stroke.png Binary files differnew file mode 100644 index 00000000..54511056 --- /dev/null +++ b/.github/icons-stroke.png diff --git a/.github/icons-stroke.svg b/.github/icons-stroke.svg index e91bfe86..a85315f6 100644 --- a/.github/icons-stroke.svg +++ b/.github/icons-stroke.svg @@ -1,19 +1,19 @@ -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 394 74" width="394" height="74" style="color: #354052"><rect x="0" y="0" width="394" height="74" fill="#fff"></rect> - <symbol id="icon-.5" class="icon tabler-icon tabler-icon-disabled" viewBox="0 0 24 24" stroke-width=".5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 106 7.5" /> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 882 42" width="882" height="42" style="color: #354052"><rect x="0" y="0" width="882" height="42" fill="#fff"></rect> + <symbol id="icon-.5" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width=".5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="24" height="24" stroke="none"></rect><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" /> </symbol> - <symbol id="icon-1" class="icon tabler-icon tabler-icon-disabled" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 106 7.5" /> + <symbol id="icon-1" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="24" height="24" stroke="none"></rect><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" /> </symbol> - <symbol id="icon-1.5" class="icon tabler-icon tabler-icon-disabled" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 106 7.5" /> + <symbol id="icon-1.5" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="24" height="24" stroke="none"></rect><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" /> </symbol> - <symbol id="icon-2" class="icon tabler-icon tabler-icon-disabled" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 106 7.5" /> + <symbol id="icon-2" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="24" height="24" stroke="none"></rect><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" /> </symbol> - <symbol id="icon-2.75" class="icon tabler-icon tabler-icon-disabled" viewBox="0 0 24 24" stroke-width="2.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 106 7.5" /> + <symbol id="icon-2.75" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="2.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="24" height="24" stroke="none"></rect><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" /> </symbol> - <use xlink:href="#icon-.5" x="5" y="5" width="64" height="64" /> - <use xlink:href="#icon-1" x="85" y="5" width="64" height="64" /> - <use xlink:href="#icon-1.5" x="165" y="5" width="64" height="64" /> - <use xlink:href="#icon-2" x="245" y="5" width="64" height="64" /> - <use xlink:href="#icon-2.75" x="325" y="5" width="64" height="64" /> + <use xlink:href="#icon-.5" x="5" y="5" width="32" height="32" /> + <use xlink:href="#icon-1" x="53" y="5" width="32" height="32" /> + <use xlink:href="#icon-1.5" x="101" y="5" width="32" height="32" /> + <use xlink:href="#icon-2" x="149" y="5" width="32" height="32" /> + <use xlink:href="#icon-2.75" x="197" y="5" width="32" height="32" /> </svg>
\ No newline at end of file diff --git a/.github/icons.png b/.github/icons.png Binary files differindex 444edbb1..2913a33d 100644 --- a/.github/icons.png +++ b/.github/icons.png @@ -2,11 +2,11 @@ A set of over 300 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a `2px` stroke. -**If you want to support my project and help me grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm)!** +**If you want to support my project and help me grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate me on PayPal](https://paypal.me/codecalm) :)** ## Preview - + ## Installation @@ -71,7 +71,7 @@ Add an icon to be displayed on your page with the following markup (`activity` i All icons in this repository have been created with the value of the `stroke-width` property, so if you change the value, you can get different icon variants that will fit in well with your design. - + ## License diff --git a/gulpfile.js b/gulpfile.js index ab729bed..7affc732 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -49,8 +49,9 @@ const createScreenshot = async (filePath) => { const page = await browser.newPage(); await page.setViewport({ - height: 100, - width: 100 + height: 10, + width: 10, + deviceScaleFactor: 2 }); await page.goto(htmlFilePath); @@ -68,6 +69,77 @@ const createScreenshot = async (filePath) => { } }; + +const printChangelog = function(newIcons, modifiedIcons, renamedIcons) { + if(newIcons.length > 0) { + let str = ''; + str += `${newIcons.length} new icons: `; + + newIcons.forEach(function(icon, i){ + str += `\`${icon}\``; + + if((i + 1) <= newIcons.length - 1) { + str += ', ' + } + }); + + console.log(str); + console.log(''); + } + + if(modifiedIcons.length > 0) { + let str = ''; + str += `Fixed icons: `; + + modifiedIcons.forEach(function(icon, i){ + str += `\`${icon}\``; + + if((i + 1) <= modifiedIcons.length - 1) { + str += ', ' + } + }); + + console.log(str); + console.log(''); + } + + if(renamedIcons.length > 0) { + console.log(`Renamed icons: `); + + renamedIcons.forEach(function(icon, i){ + console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``); + }); + } +}; + + + +gulp.task('build-zip', function() { + const version = p.version; + + return gulp.src('{icons/**/*,icons-png/**/*,tabler-sprite.svg,tabler-sprite-nostroke.svg}') + .pipe(zip(`tabler-icons-${version}.zip`)) + .pipe(gulp.dest('packages')) +}); + +gulp.task('build-jekyll', function(cb){ + cp.exec('bundle exec jekyll build', function() { + cb(); + }); +}); + +gulp.task('build-copy', function(cb){ + cp.exec('mkdir -p icons/ && rm -fd ./icons/* && cp ./_site/icons/* ./icons', function() { + cb(); + }); +}); + +gulp.task('clean-png', function(cb){ + cp.exec('rm -fd ./icons-png/*', function() { + cb(); + }); +}); + gulp.task('icons-sprite', function (cb) { glob("_site/icons/*.svg", {}, function (er, files) { @@ -143,15 +215,15 @@ gulp.task('icons-preview', function (cb) { }); }); -gulp.task('icons-stroke', function (cb) { +gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) { const icon = "disabled", strokes = ['.5', '1', '1.5', '2', '2.75'], - svgFileContent = fs.readFileSync(`_site/icons/${icon}.svg`).toString(), + svgFileContent = fs.readFileSync(`icons/${icon}.svg`).toString(), padding = 16, paddingOuter = 5, - iconSize = 64, - width = (strokes.length * (iconSize + padding) - padding) + paddingOuter * 2, + iconSize = 32, + width = 882, height = iconSize + paddingOuter * 2; let svgContentSymbols = '', @@ -174,10 +246,10 @@ 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); - createScreenshot('icons-stroke.svg'); + fs.writeFileSync('.github/icons-stroke.svg', svgContent); + createScreenshot('.github/icons-stroke.svg'); cb(); -}); +})); gulp.task('optimize', function (cb) { glob("src/_icons/*.svg", {}, function (er, files) { @@ -202,6 +274,7 @@ gulp.task('optimize', function (cb) { }); }); + gulp.task('changelog-commit', function(cb) { cp.exec('git status', function(err, ret) { let newIcons = [], modifiedIcons = [], renamedIcons = []; @@ -222,45 +295,7 @@ gulp.task('changelog-commit', function(cb) { return newIcons.indexOf( el ) < 0; }); - if(newIcons.length > 0) { - let str = ''; - str += `${newIcons.length} new icons: `; - - newIcons.forEach(function(icon, i){ - str += `\`${icon}\``; - - if((i + 1) <= newIcons.length - 1) { - str += ', ' - } - }); - - console.log(str); - console.log(''); - } - - if(modifiedIcons.length > 0) { - let str = ''; - str += `Fixed icons: `; - - modifiedIcons.forEach(function(icon, i){ - str += `\`${icon}\``; - - if((i + 1) <= modifiedIcons.length - 1) { - str += ', ' - } - }); - - console.log(str); - console.log(''); - } - - if(renamedIcons.length > 0) { - console.log(`**Renamed icons: `); - - renamedIcons.forEach(function(icon, i){ - console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``); - }); - } + printChangelog(newIcons, modifiedIcons, renamedIcons); cb(); }); @@ -288,75 +323,12 @@ gulp.task('changelog-diff', function(cb) { return newIcons.indexOf( el ) < 0; }); - if(newIcons.length > 0) { - let str = ''; - str += `${newIcons.length} new icons: `; - - newIcons.forEach(function(icon, i){ - str += `\`${icon}\``; - - if((i + 1) <= newIcons.length - 1) { - str += ', ' - } - }); - - console.log(str); - console.log(''); - } - - if(modifiedIcons.length > 0) { - let str = ''; - str += `Fixed icons: `; - - modifiedIcons.forEach(function(icon, i){ - str += `\`${icon}\``; - - if((i + 1) <= modifiedIcons.length - 1) { - str += ', ' - } - }); - - console.log(str); - console.log(''); - } - - if(renamedIcons.length > 0) { - console.log(`**Renamed icons: `); - - renamedIcons.forEach(function(icon, i){ - console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``); - }); - } + printChangelog(newIcons, modifiedIcons, renamedIcons); cb(); }); }); -gulp.task('build-zip', function() { - const version = p.version; - - return gulp.src('{icons/**/*,icons-png/**/*,tabler-sprite.svg,tabler-sprite-nostroke.svg}') - .pipe(zip(`tabler-icons-${version}.zip`)) - .pipe(gulp.dest('packages')) -}); - -gulp.task('build-jekyll', function(cb){ - cp.exec('bundle exec jekyll build', function() { - cb(); - }); -}); - -gulp.task('build-copy', function(cb){ - cp.exec('mkdir -p icons/ && rm -fd ./icons/* && cp ./_site/icons/* ./icons', function() { - cb(); - }); -}); - -gulp.task('clean-png', function(cb){ - cp.exec('rm -fd ./icons-png/*', function() { - cb(); - }); -}); gulp.task('svg-to-png', gulp.series('build-jekyll', 'clean-png', async (cb) => { let files = glob.sync("_site/icons/*.svg"); |
