diff options
| -rw-r--r-- | _icons/home.svg | 7 | ||||
| -rw-r--r-- | gulpfile.js | 8 | ||||
| -rw-r--r-- | icons.svg | 189 |
3 files changed, 107 insertions, 97 deletions
diff --git a/_icons/home.svg b/_icons/home.svg new file mode 100644 index 0000000..fd24220 --- /dev/null +++ b/_icons/home.svg @@ -0,0 +1,7 @@ +--- +--- +<svg> + <polyline points="5 12 3 12 12 3 21 12 19 12" /> + <path d="M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" /> + <path d="M9 21v-6a2 2 0 012 -2h2a2 2 0 012 2v6" /> +</svg> diff --git a/gulpfile.js b/gulpfile.js index 07a95de..7e858bc 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -6,10 +6,10 @@ const gulp = require('gulp'), gulp.task('icons-sprite', function (cb) { - const columnsCount = 10, - padding = 24, + const columnsCount = 20, + padding = 16, paddingOuter = 49, - iconSize = 48; + iconSize = 24; glob("_site/icons/*.svg", {}, function (er, files) { const iconsCount = files.length, @@ -44,7 +44,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}"><rect x="0" y="0" width="${width}" height="${height}" fill="#fafafa"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`; + 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="#f5f7fb"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`; fs.writeFileSync('icons.svg', svgContent); cb(); @@ -1,4 +1,4 @@ -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 794 794" width="794" height="794"><rect x="0" y="0" width="794" height="794" fill="#fafafa"></rect> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 882 282" width="882" height="282" style="color: #354052"><rect x="0" y="0" width="882" height="282" fill="#f5f7fb"></rect> <symbol id="tabler-activity" class="icon tabler-icon tabler-icon-activity" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 12 17 12 14 20 10 4 7 12 3 12" /> </symbol> <symbol id="tabler-ajdustments" class="icon tabler-icon tabler-icon-ajdustments" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="10" r="2" /><line x1="6" y1="4" x2="6" y2="8" /><line x1="6" y1="12" x2="6" y2="20" /> @@ -132,6 +132,8 @@ </symbol> <symbol id="tabler-heart" class="icon tabler-icon tabler-icon-heart" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path> </symbol> + <symbol id="tabler-home" class="icon tabler-icon tabler-icon-home" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" /><path d="M9 21v-6a2 2 0 012 -2h2a2 2 0 012 2v6" /> +</symbol> <symbol id="tabler-layout" class="icon tabler-icon tabler-icon-layout" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="8" height="6" rx="2" ry="2"></rect><rect x="3" y="13" width="8" height="8" rx="2" ry="2"></rect><rect x="15" y="3" width="6" height="18" rx="2" ry="2"></rect> </symbol> <symbol id="tabler-map-pin" class="icon tabler-icon tabler-icon-map-pin" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="11" r="3"></circle><path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> @@ -197,97 +199,98 @@ <symbol id="tabler-zoom-out" class="icon tabler-icon tabler-icon-zoom-out" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><line x1="7" y1="10" x2="13" y2="10"></line><line x1="21" y1="21" x2="15" y2="15"></line> </symbol> - <use xlink:href="#tabler-activity" x="49" y="49" width="48" height="48" /> - <use xlink:href="#tabler-ajdustments" x="121" y="49" width="48" height="48" /> - <use xlink:href="#tabler-alert-circle" x="193" y="49" width="48" height="48" /> - <use xlink:href="#tabler-align-center" x="265" y="49" width="48" height="48" /> - <use xlink:href="#tabler-align-justified" x="337" y="49" width="48" height="48" /> - <use xlink:href="#tabler-align-left" x="409" y="49" width="48" height="48" /> - <use xlink:href="#tabler-align-right" x="481" y="49" width="48" height="48" /> - <use xlink:href="#tabler-arrow-down-circle" x="553" y="49" width="48" height="48" /> - <use xlink:href="#tabler-arrow-down-left-circle" x="625" y="49" width="48" height="48" /> - <use xlink:href="#tabler-arrow-down-left" x="697" y="49" width="48" height="48" /> - <use xlink:href="#tabler-arrow-down-right-circle" x="49" y="121" width="48" height="48" /> - <use xlink:href="#tabler-arrow-down-right" x="121" y="121" width="48" height="48" /> - <use xlink:href="#tabler-arrow-down" x="193" y="121" width="48" height="48" /> - <use xlink:href="#tabler-arrow-left-circle" x="265" y="121" width="48" height="48" /> - <use xlink:href="#tabler-arrow-left" x="337" y="121" width="48" height="48" /> - <use xlink:href="#tabler-arrow-narrow-down" x="409" y="121" width="48" height="48" /> - <use xlink:href="#tabler-arrow-narrow-left" x="481" y="121" width="48" height="48" /> - <use xlink:href="#tabler-arrow-narrow-right" x="553" y="121" width="48" height="48" /> - <use xlink:href="#tabler-arrow-narrow-up" x="625" y="121" width="48" height="48" /> - <use xlink:href="#tabler-arrow-right-circle" x="697" y="121" width="48" height="48" /> - <use xlink:href="#tabler-arrow-right" x="49" y="193" width="48" height="48" /> - <use xlink:href="#tabler-arrow-up-circle" x="121" y="193" width="48" height="48" /> - <use xlink:href="#tabler-arrow-up-left-circle" x="193" y="193" width="48" height="48" /> - <use xlink:href="#tabler-arrow-up-left" x="265" y="193" width="48" height="48" /> - <use xlink:href="#tabler-arrow-up-right-circle" x="337" y="193" width="48" height="48" /> - <use xlink:href="#tabler-arrow-up-right" x="409" y="193" width="48" height="48" /> - <use xlink:href="#tabler-arrow-up" x="481" y="193" width="48" height="48" /> - <use xlink:href="#tabler-border-all" x="553" y="193" width="48" height="48" /> - <use xlink:href="#tabler-border-bottom" x="625" y="193" width="48" height="48" /> - <use xlink:href="#tabler-border-horizontal" x="697" y="193" width="48" height="48" /> - <use xlink:href="#tabler-border-inner" x="49" y="265" width="48" height="48" /> - <use xlink:href="#tabler-border-left" x="121" y="265" width="48" height="48" /> - <use xlink:href="#tabler-border-none" x="193" y="265" width="48" height="48" /> - <use xlink:href="#tabler-border-outer" x="265" y="265" width="48" height="48" /> - <use xlink:href="#tabler-border-right" x="337" y="265" width="48" height="48" /> - <use xlink:href="#tabler-border-top" x="409" y="265" width="48" height="48" /> - <use xlink:href="#tabler-border-vertical" x="481" y="265" width="48" height="48" /> - <use xlink:href="#tabler-check" x="553" y="265" width="48" height="48" /> - <use xlink:href="#tabler-chevron-down" x="625" y="265" width="48" height="48" /> - <use xlink:href="#tabler-chevron-left" x="697" y="265" width="48" height="48" /> - <use xlink:href="#tabler-chevron-right" x="49" y="337" width="48" height="48" /> - <use xlink:href="#tabler-chevron-up" x="121" y="337" width="48" height="48" /> - <use xlink:href="#tabler-chevrons-down" x="193" y="337" width="48" height="48" /> - <use xlink:href="#tabler-chevrons-left" x="265" y="337" width="48" height="48" /> - <use xlink:href="#tabler-chevrons-right" x="337" y="337" width="48" height="48" /> - <use xlink:href="#tabler-chevrons-up" x="409" y="337" width="48" height="48" /> - <use xlink:href="#tabler-circle" x="481" y="337" width="48" height="48" /> - <use xlink:href="#tabler-clipboard" x="553" y="337" width="48" height="48" /> - <use xlink:href="#tabler-clock" x="625" y="337" width="48" height="48" /> - <use xlink:href="#tabler-code" x="697" y="337" width="48" height="48" /> - <use xlink:href="#tabler-cog" x="49" y="409" width="48" height="48" /> - <use xlink:href="#tabler-file-check" x="121" y="409" width="48" height="48" /> - <use xlink:href="#tabler-file-download" x="193" y="409" width="48" height="48" /> - <use xlink:href="#tabler-file-minus" x="265" y="409" width="48" height="48" /> - <use xlink:href="#tabler-file-plus" x="337" y="409" width="48" height="48" /> - <use xlink:href="#tabler-file-text" x="409" y="409" width="48" height="48" /> - <use xlink:href="#tabler-file-x" x="481" y="409" width="48" height="48" /> - <use xlink:href="#tabler-file" x="553" y="409" width="48" height="48" /> - <use xlink:href="#tabler-grid" x="625" y="409" width="48" height="48" /> - <use xlink:href="#tabler-heart" x="697" y="409" width="48" height="48" /> - <use xlink:href="#tabler-layout" x="49" y="481" width="48" height="48" /> - <use xlink:href="#tabler-map-pin" x="121" y="481" width="48" height="48" /> - <use xlink:href="#tabler-menu" x="193" y="481" width="48" height="48" /> - <use xlink:href="#tabler-minus-circle" x="265" y="481" width="48" height="48" /> - <use xlink:href="#tabler-minus-square" x="337" y="481" width="48" height="48" /> - <use xlink:href="#tabler-minus" x="409" y="481" width="48" height="48" /> - <use xlink:href="#tabler-mood-confuzed" x="481" y="481" width="48" height="48" /> - <use xlink:href="#tabler-mood-happy" x="553" y="481" width="48" height="48" /> - <use xlink:href="#tabler-mood-neutral" x="625" y="481" width="48" height="48" /> - <use xlink:href="#tabler-mood-sad" x="697" y="481" width="48" height="48" /> - <use xlink:href="#tabler-mood-smile" x="49" y="553" width="48" height="48" /> - <use xlink:href="#tabler-more-vertical" x="121" y="553" width="48" height="48" /> - <use xlink:href="#tabler-more" x="193" y="553" width="48" height="48" /> - <use xlink:href="#tabler-plus-circle" x="265" y="553" width="48" height="48" /> - <use xlink:href="#tabler-plus-square" x="337" y="553" width="48" height="48" /> - <use xlink:href="#tabler-plus" x="409" y="553" width="48" height="48" /> - <use xlink:href="#tabler-qrcode" x="481" y="553" width="48" height="48" /> - <use xlink:href="#tabler-search" x="553" y="553" width="48" height="48" /> - <use xlink:href="#tabler-square" x="625" y="553" width="48" height="48" /> - <use xlink:href="#tabler-star" x="697" y="553" width="48" height="48" /> - <use xlink:href="#tabler-swich-horizontal" x="49" y="625" width="48" height="48" /> - <use xlink:href="#tabler-switch-vertical" x="121" y="625" width="48" height="48" /> - <use xlink:href="#tabler-trending-down" x="193" y="625" width="48" height="48" /> - <use xlink:href="#tabler-trending-up" x="265" y="625" width="48" height="48" /> - <use xlink:href="#tabler-user-check" x="337" y="625" width="48" height="48" /> - <use xlink:href="#tabler-user-minus" x="409" y="625" width="48" height="48" /> - <use xlink:href="#tabler-user-plus" x="481" y="625" width="48" height="48" /> - <use xlink:href="#tabler-user-x" x="553" y="625" width="48" height="48" /> - <use xlink:href="#tabler-user" x="625" y="625" width="48" height="48" /> - <use xlink:href="#tabler-x" x="697" y="625" width="48" height="48" /> - <use xlink:href="#tabler-zoom-in" x="49" y="697" width="48" height="48" /> - <use xlink:href="#tabler-zoom-out" x="121" y="697" width="48" height="48" /> + <use xlink:href="#tabler-activity" x="49" y="49" width="24" height="24" /> + <use xlink:href="#tabler-ajdustments" x="89" y="49" width="24" height="24" /> + <use xlink:href="#tabler-alert-circle" x="129" y="49" width="24" height="24" /> + <use xlink:href="#tabler-align-center" x="169" y="49" width="24" height="24" /> + <use xlink:href="#tabler-align-justified" x="209" y="49" width="24" height="24" /> + <use xlink:href="#tabler-align-left" x="249" y="49" width="24" height="24" /> + <use xlink:href="#tabler-align-right" x="289" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-down-circle" x="329" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-down-left-circle" x="369" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-down-left" x="409" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-down-right-circle" x="449" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-down-right" x="489" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-down" x="529" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-left-circle" x="569" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-left" x="609" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-narrow-down" x="649" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-narrow-left" x="689" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-narrow-right" x="729" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-narrow-up" x="769" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-right-circle" x="809" y="49" width="24" height="24" /> + <use xlink:href="#tabler-arrow-right" x="49" y="89" width="24" height="24" /> + <use xlink:href="#tabler-arrow-up-circle" x="89" y="89" width="24" height="24" /> + <use xlink:href="#tabler-arrow-up-left-circle" x="129" y="89" width="24" height="24" /> + <use xlink:href="#tabler-arrow-up-left" x="169" y="89" width="24" height="24" /> + <use xlink:href="#tabler-arrow-up-right-circle" x="209" y="89" width="24" height="24" /> + <use xlink:href="#tabler-arrow-up-right" x="249" y="89" width="24" height="24" /> + <use xlink:href="#tabler-arrow-up" x="289" y="89" width="24" height="24" /> + <use xlink:href="#tabler-border-all" x="329" y="89" width="24" height="24" /> + <use xlink:href="#tabler-border-bottom" x="369" y="89" width="24" height="24" /> + <use xlink:href="#tabler-border-horizontal" x="409" y="89" width="24" height="24" /> + <use xlink:href="#tabler-border-inner" x="449" y="89" width="24" height="24" /> + <use xlink:href="#tabler-border-left" x="489" y="89" width="24" height="24" /> + <use xlink:href="#tabler-border-none" x="529" y="89" width="24" height="24" /> + <use xlink:href="#tabler-border-outer" x="569" y="89" width="24" height="24" /> + <use xlink:href="#tabler-border-right" x="609" y="89" width="24" height="24" /> + <use xlink:href="#tabler-border-top" x="649" y="89" width="24" height="24" /> + <use xlink:href="#tabler-border-vertical" x="689" y="89" width="24" height="24" /> + <use xlink:href="#tabler-check" x="729" y="89" width="24" height="24" /> + <use xlink:href="#tabler-chevron-down" x="769" y="89" width="24" height="24" /> + <use xlink:href="#tabler-chevron-left" x="809" y="89" width="24" height="24" /> + <use xlink:href="#tabler-chevron-right" x="49" y="129" width="24" height="24" /> + <use xlink:href="#tabler-chevron-up" x="89" y="129" width="24" height="24" /> + <use xlink:href="#tabler-chevrons-down" x="129" y="129" width="24" height="24" /> + <use xlink:href="#tabler-chevrons-left" x="169" y="129" width="24" height="24" /> + <use xlink:href="#tabler-chevrons-right" x="209" y="129" width="24" height="24" /> + <use xlink:href="#tabler-chevrons-up" x="249" y="129" width="24" height="24" /> + <use xlink:href="#tabler-circle" x="289" y="129" width="24" height="24" /> + <use xlink:href="#tabler-clipboard" x="329" y="129" width="24" height="24" /> + <use xlink:href="#tabler-clock" x="369" y="129" width="24" height="24" /> + <use xlink:href="#tabler-code" x="409" y="129" width="24" height="24" /> + <use xlink:href="#tabler-cog" x="449" y="129" width="24" height="24" /> + <use xlink:href="#tabler-file-check" x="489" y="129" width="24" height="24" /> + <use xlink:href="#tabler-file-download" x="529" y="129" width="24" height="24" /> + <use xlink:href="#tabler-file-minus" x="569" y="129" width="24" height="24" /> + <use xlink:href="#tabler-file-plus" x="609" y="129" width="24" height="24" /> + <use xlink:href="#tabler-file-text" x="649" y="129" width="24" height="24" /> + <use xlink:href="#tabler-file-x" x="689" y="129" width="24" height="24" /> + <use xlink:href="#tabler-file" x="729" y="129" width="24" height="24" /> + <use xlink:href="#tabler-grid" x="769" y="129" width="24" height="24" /> + <use xlink:href="#tabler-heart" x="809" y="129" width="24" height="24" /> + <use xlink:href="#tabler-home" x="49" y="169" width="24" height="24" /> + <use xlink:href="#tabler-layout" x="89" y="169" width="24" height="24" /> + <use xlink:href="#tabler-map-pin" x="129" y="169" width="24" height="24" /> + <use xlink:href="#tabler-menu" x="169" y="169" width="24" height="24" /> + <use xlink:href="#tabler-minus-circle" x="209" y="169" width="24" height="24" /> + <use xlink:href="#tabler-minus-square" x="249" y="169" width="24" height="24" /> + <use xlink:href="#tabler-minus" x="289" y="169" width="24" height="24" /> + <use xlink:href="#tabler-mood-confuzed" x="329" y="169" width="24" height="24" /> + <use xlink:href="#tabler-mood-happy" x="369" y="169" width="24" height="24" /> + <use xlink:href="#tabler-mood-neutral" x="409" y="169" width="24" height="24" /> + <use xlink:href="#tabler-mood-sad" x="449" y="169" width="24" height="24" /> + <use xlink:href="#tabler-mood-smile" x="489" y="169" width="24" height="24" /> + <use xlink:href="#tabler-more-vertical" x="529" y="169" width="24" height="24" /> + <use xlink:href="#tabler-more" x="569" y="169" width="24" height="24" /> + <use xlink:href="#tabler-plus-circle" x="609" y="169" width="24" height="24" /> + <use xlink:href="#tabler-plus-square" x="649" y="169" width="24" height="24" /> + <use xlink:href="#tabler-plus" x="689" y="169" width="24" height="24" /> + <use xlink:href="#tabler-qrcode" x="729" y="169" width="24" height="24" /> + <use xlink:href="#tabler-search" x="769" y="169" width="24" height="24" /> + <use xlink:href="#tabler-square" x="809" y="169" width="24" height="24" /> + <use xlink:href="#tabler-star" x="49" y="209" width="24" height="24" /> + <use xlink:href="#tabler-swich-horizontal" x="89" y="209" width="24" height="24" /> + <use xlink:href="#tabler-switch-vertical" x="129" y="209" width="24" height="24" /> + <use xlink:href="#tabler-trending-down" x="169" y="209" width="24" height="24" /> + <use xlink:href="#tabler-trending-up" x="209" y="209" width="24" height="24" /> + <use xlink:href="#tabler-user-check" x="249" y="209" width="24" height="24" /> + <use xlink:href="#tabler-user-minus" x="289" y="209" width="24" height="24" /> + <use xlink:href="#tabler-user-plus" x="329" y="209" width="24" height="24" /> + <use xlink:href="#tabler-user-x" x="369" y="209" width="24" height="24" /> + <use xlink:href="#tabler-user" x="409" y="209" width="24" height="24" /> + <use xlink:href="#tabler-x" x="449" y="209" width="24" height="24" /> + <use xlink:href="#tabler-zoom-in" x="489" y="209" width="24" height="24" /> + <use xlink:href="#tabler-zoom-out" x="529" y="209" width="24" height="24" /> </svg>
\ No newline at end of file |
