diff --git a/.gitignore b/.gitignore index c53ac12e6..7903a4c2f 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ _site/ node_modules/ .jekyll-cache/ +package-lock.json diff --git a/_config.yml b/_config.yml index 7582e66f8..595be93e1 100644 --- a/_config.yml +++ b/_config.yml @@ -10,6 +10,7 @@ defaults: type: "icons" values: layout: icon + permalink: 'icons/tabler-:slug' collections: icons: diff --git a/_icons/heart.svg b/_icons/heart.svg new file mode 100644 index 000000000..1b1ea6f3a --- /dev/null +++ b/_icons/heart.svg @@ -0,0 +1,5 @@ +--- +--- + + + diff --git a/_icons/map-pin.svg b/_icons/map-pin.svg new file mode 100644 index 000000000..d02683846 --- /dev/null +++ b/_icons/map-pin.svg @@ -0,0 +1,6 @@ +--- +--- + + + + diff --git a/_icons/user-plus.svg b/_icons/user-plus.svg new file mode 100644 index 000000000..950a86553 --- /dev/null +++ b/_icons/user-plus.svg @@ -0,0 +1,8 @@ +--- +--- + + + + + + diff --git a/_icons/user.svg b/_icons/user.svg new file mode 100644 index 000000000..0483d65a8 --- /dev/null +++ b/_icons/user.svg @@ -0,0 +1,6 @@ +--- +--- + + + + diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 000000000..f5bedd199 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,52 @@ +const gulp = require('gulp'), + glob = require("glob"), + fs = require("fs"), + path = require("path"), + svg2img = require('svg2img'); + + +gulp.task('icons-sprite', function (cb) { + const columnsCount = 20, + padding = 16, + paddingOuter = 49, + iconSize = 24; + + glob("_site/icons/*.svg", {}, function (er, files) { + const iconsCount = files.length, + rowsCount = Math.ceil(iconsCount / columnsCount), + width = columnsCount * (iconSize + padding) + 2 * paddingOuter - padding, + height = rowsCount * (iconSize + padding) + 2 * paddingOuter - padding; + + let svgContentSymbols = '', + svgContentIcons = '', + x = paddingOuter, + y = paddingOuter; + files.forEach(function (file, i) { + let name = path.basename(file, '.svg'); + + let svgFile = fs.readFileSync(file), + svgFileContent = svgFile.toString(); + + svgFileContent = svgFileContent + .replace('', '') + .replace(/\n\s+/g, ''); + + svgContentSymbols += `\t${svgFileContent}\n`; + svgContentIcons += `\t\n`; + + x += padding + iconSize; + + if (i % columnsCount === columnsCount - 1) { + x = paddingOuter; + y += padding + iconSize; + } + }); + + const svgContent = `\n${svgContentSymbols}\n${svgContentIcons}\n`; + + fs.writeFileSync('icons.svg', svgContent); + cb(); + }); +}); diff --git a/icons.svg b/icons.svg new file mode 100644 index 000000000..59e0fe816 --- /dev/null +++ b/icons.svg @@ -0,0 +1,223 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json index 6d0ba923f..60a66dc0c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,6 @@ { "name": "tabler-icons", "version": "1.0.0", - "description": "", "repository": { "type": "git", "url": "git+https://github.com/tabler/tabler-icons.git" @@ -10,5 +9,15 @@ "license": "MIT", "bugs": { "url": "https://github.com/tabler/tabler-icons/issues" + }, + "homepage": "https://github.com/tabler/tabler-icons#readme", + "main": "gulpfile.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "description": "", + "devDependencies": { + "glob": "^7.1.6", + "gulp": "^4.0.2" } } diff --git a/readme.md b/readme.md new file mode 100644 index 000000000..04f57ac45 --- /dev/null +++ b/readme.md @@ -0,0 +1,3 @@ +# Tabler icons + +![Tabler icons](https://raw.githubusercontent.com/tabler/tabler-icons/master/icons.svg) diff --git a/style.scss b/style.scss index 503842b2b..68f67ce6e 100644 --- a/style.scss +++ b/style.scss @@ -250,6 +250,7 @@ Components position: absolute; top: ($btn-form-height - 1.25rem) / 2; right: ($btn-form-height - 1.25rem) / 2; + stroke-width: 1.75; } &.icon-left {