aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.github/icons-stroke.pngbin0 -> 7714 bytes
-rw-r--r--.github/icons-stroke.svg22
-rw-r--r--.github/icons.pngbin80152 -> 177010 bytes
-rw-r--r--README.md6
-rw-r--r--gulpfile.js196
5 files changed, 98 insertions, 126 deletions
diff --git a/.github/icons-stroke.png b/.github/icons-stroke.png
new file mode 100644
index 00000000..54511056
--- /dev/null
+++ b/.github/icons-stroke.png
Binary files differ
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
index 444edbb1..2913a33d 100644
--- a/.github/icons.png
+++ b/.github/icons.png
Binary files differ
diff --git a/README.md b/README.md
index 639057f9..e710e9f5 100644
--- a/README.md
+++ b/README.md
@@ -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
-![](./.github/icons.svg)
+![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/icons.png)
## 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.
-![](./.github/icons-stroke.svg)
+![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/icons-stroke.png)
## 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");