From 3b647d29f74741b903616e48f7e6d3988ed5bec8 Mon Sep 17 00:00:00 2001 From: Ruben Barilani Date: Fri, 13 Nov 2015 15:00:14 +0100 Subject: [PATCH] feat(icon-font): #10 add the first icon font implementation * add generated dc-icons-* cleasses * use the new dc namespace * add DressCodeIcons font * add _generated/_icons.scss * add icons folder with 10 sample icons * add entry into the demo- documentation --- .../materials/atoms/icons/04-font-icons.html | 24 ++++ gulpfile.js | 45 +++++++- package.json | 1 + src/fonts/DressCodeIcons.eot | Bin 0 -> 2904 bytes src/fonts/DressCodeIcons.svg | 45 ++++++++ src/fonts/DressCodeIcons.ttf | Bin 0 -> 2712 bytes src/fonts/DressCodeIcons.woff | Bin 0 -> 1720 bytes src/icons/add.svg | 1 + src/icons/cog.svg | 1 + src/icons/eye.svg | 1 + src/icons/history.svg | 1 + src/icons/lock.svg | 1 + src/icons/more.svg | 1 + src/icons/ok.svg | 1 + src/icons/pencil.svg | 1 + src/icons/redo.svg | 1 + src/icons/trash.svg | 1 + src/icons/undo.svg | 1 + src/styles/_generated/_icons.scss | 109 ++++++++++++++++++ src/styles/modules/_icons.scss | 10 ++ src/styles/toolkit.scss | 3 + 21 files changed, 243 insertions(+), 5 deletions(-) create mode 100644 docs/demo/materials/atoms/icons/04-font-icons.html create mode 100644 src/fonts/DressCodeIcons.eot create mode 100644 src/fonts/DressCodeIcons.svg create mode 100644 src/fonts/DressCodeIcons.ttf create mode 100644 src/fonts/DressCodeIcons.woff create mode 100644 src/icons/add.svg create mode 100644 src/icons/cog.svg create mode 100644 src/icons/eye.svg create mode 100644 src/icons/history.svg create mode 100644 src/icons/lock.svg create mode 100644 src/icons/more.svg create mode 100644 src/icons/ok.svg create mode 100644 src/icons/pencil.svg create mode 100644 src/icons/redo.svg create mode 100644 src/icons/trash.svg create mode 100644 src/icons/undo.svg create mode 100644 src/styles/_generated/_icons.scss create mode 100644 src/styles/modules/_icons.scss diff --git a/docs/demo/materials/atoms/icons/04-font-icons.html b/docs/demo/materials/atoms/icons/04-font-icons.html new file mode 100644 index 00000000..c950d3cb --- /dev/null +++ b/docs/demo/materials/atoms/icons/04-font-icons.html @@ -0,0 +1,24 @@ + + + +
+ + + + + + + + + + + + +
+ + diff --git a/gulpfile.js b/gulpfile.js index 5ae573c6..4b31ebec 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -21,6 +21,8 @@ var gulp = require('gulp'); var ghPages = require('gulp-gh-pages'); var gulpFilter = require('gulp-filter'); var gulpDebug = require('gulp-debug'); +var iconfont = require('gulp-iconfont'); +var iconfontCss = require('gulp-iconfont-css'); var pkg = require('./package.json'); // configuration @@ -39,14 +41,18 @@ var config = { fabricator: './docs/demo/assets/fabricator/styles/fabricator.scss', toolkit: './src/styles/toolkit.scss' }, - images: './src/img/**/*' + images: './src/img/**/*', + icons: './src/icons/*.svg' + }, dist: 'dist', tmp: { + tmp: '.tmp', demo: '.tmp/.demo', deployDemo: '.tmp/.deploy-demo', distBower: '.tmp/.dist-bower', - deployBower: '.tmp/.deploy-bower' + deployBower: '.tmp/.deploy-bower', + iconfont: '.tmp/.iconfont' } }; @@ -55,7 +61,7 @@ var config = { * * * - * DEMO TASKS + * DEMO/DEVELOPMENT TASKS * * * @@ -65,8 +71,8 @@ var config = { var demoWebpackConfig = require('./webpack.demo.config')(config); var demoWebpackCompiler = webpack(demoWebpackConfig); -gulp.task('demo', function (cb) { - runSequence('demo:clean', ['demo:styles', 'demo:scripts', 'demo:images', 'demo:assemble'], cb) +gulp.task('demo', function(cb) { + runSequence('demo:clean',['demo:styles', 'demo:scripts', 'demo:images', 'demo:icons', 'demo:assemble'], cb) }); // clean @@ -123,6 +129,32 @@ gulp.task('demo:images', ['demo:favicon'], function () { .pipe(gulp.dest(path.join(config.tmp.demo, '/assets/toolkit/img'))); }); +// Generate the font by using what is found in the src/icons folder +// Generate the scss _generated/icons.scss to use icons as classes +gulp.task('demo:icons', function () { + var runTimestamp = Math.round(Date.now()/1000); + var fontName = 'DressCodeIcons'; + + return gulp.src(config.src.icons) + .pipe(gulp.dest(path.join(config.tmp.iconfont, '/svg-icons'))) + .pipe(iconfontCss({ + fontName: fontName, + path: 'scss', + targetPath: '../styles/_generated/_icons.scss', + fontPath: '../fonts/', + cssClass: 'dc-icons' + })) + .pipe(iconfont({ + fontName: fontName, // required + formats: ['ttf', 'eot', 'woff','svg','woof2'], + timestamp: runTimestamp, // recommended to get consistent builds when watching files, + normalize: true, + centerHorizontally: true + })) + .pipe(gulp.dest(path.join('src' , '/fonts'))) + .pipe(gulp.dest(path.join(config.tmp.demo, '/assets/toolkit/fonts'))) +}); + gulp.task('demo:favicon', function () { return gulp.src('./docs/demo/favicon.ico') .pipe(gulp.dest(config.tmp.demo)); @@ -190,6 +222,9 @@ gulp.task('demo:serve', function () { gulp.task('demo:images:watch', ['demo:images'], reload); gulp.watch(config.src.images, ['demo:images:watch']); + gulp.task('demo:icons:watch', ['demo:icons'], reload); + gulp.watch(config.src.icons, ['demo:fonts:watch']); + }); gulp.task('demo:deploy', ['demo'], function () { diff --git a/package.json b/package.json index 136159ed..70bdeb5e 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "gulp-filter": "^3.0.1", "gulp-gh-pages": "^0.5.2", "gulp-iconfont": "^5.0.0", + "gulp-iconfont-css": "^2.0.0", "gulp-if": "^1.2.5", "gulp-imagemin": "^2.2.1", "gulp-modernizr": "0.0.0", diff --git a/src/fonts/DressCodeIcons.eot b/src/fonts/DressCodeIcons.eot new file mode 100644 index 0000000000000000000000000000000000000000..6da5a1163d54680f25a5c9fec8b4fe13434e3927 GIT binary patch literal 2904 zcmd^BO>7%g5T5bh+8bx>kl351w(G<+j!JMGJNB0T5tY_a5QVBhg(?)ZvDa}@+iTfQ zX`}{H2?-=F2vw+ngoK1Rfy7TwltaY<36Ky%T;LFyD+q}La6lFCz1=l5`~>c-J@aP1 znfKnjdGmJPBLhTNWg;dQiN{4=wrZe0f%c^souD=u)WPo_ zGN}T2k;;&oK!_AN17wBPsZKgPiK28CNE_Bw%PUEPo*0q)wVI(< zyc^Y1@a=($H305cTw;dzLATc$-HQ=167d&c*}7TQeKqe(=r6#rhJLZdF**wSDD-4g zZy0ah^=*krx`8>DT4tyF>L*)o6Uj-~*G2671Ef1GE}|53-TDMA1nBnD*S8-F9r=+4 zY~Rn#=YJB8{gy9r3##AQMhpxsh(!8?mxaoNeWqV6-L}h=plRY0rTZR2Piqmdik@6w zUD1I#8f?PKK-e15j+6OgevZ84=cBv?d&z0Pr%}3mYc0XH<2hYDS)utJ_w3a;>$hfh z{KP8%E1`=QBuRCx{7qUGZecyHiWg{)Eox~^u!1(3mePWy z(mqL*1dB*;QMHN5xneFl;=2(Vl9TdKD5S<^Pdx6C<7&u;!l9@Ic?0q2v^qYX86ST+ z;El(j_g(tEZiSSnEL=0={n#$?JYI-*Vnqp76`q((A7f47$VfC-EX<`9PEAY}=G0;# z!xJLNe1daDEziEmg8_N|%)IO`+^!78r{Zo`&@U^O*}u5F=x64@;?iP(Iqe!7R`=~w zZyR%a_k>2`@exV#`4w52Vos#f2^Yur?~jXIiJi6c8l(tfA}x1}=P<3pBMH`W#kt7| z-$+zD%1C(O=R`h{$R80bk;-OE+3alW;Ij?_I3}P{R*xwq3}uf!&-ar=A=*bYoG*ys zBC69$bH&4)i^h4xcL$PC_@IRxDG%+L*t6H~ZF&6`W51#%ld7T&jgAh*e15<0q+q|t z{y0ZbUqdt|V(*7*N1ZE5edNV~p&>OK{wA!7b~6|bkA}nBf{lh_wq`-2;eM?x@hMT; zcQeXG`tqryKDqD8D|{iEZ717io|t;1XL^3<@L7AL^2>x*0#XJJ_3IHM9GTKebW!tn8_%}qWK zI9-s(r#*#p=ft#P-Na>_gAfgqN_&yl6nbKJ)V!82q;MoGxsXy*YCfHhq%?;<(n5n* z2SeK6rlOQe%@=}CEGtUP`tvE}+BL;`Vy{1Inyr@j0_}_~f!H#fj-<7Jij62tAKJaZ zmHr6Gk_62f4K<;l&TQEOIpxS+oa*Y!Vv zJ6+Bi?ar#%OwMMqI}Hm)(`f5mqmo?SNOmr)QP3wZEQx|Q8lC(@4;2pYvi(n3D zm#WaKxCENifK;+Bg2KCwp9!R8+17xR;hmwH)vHB^Xa>LPpZqh{g|mTbvahxF4FT$3 zo*=u}%^vo$k0thV0AG;-4)P$m^-9HEHdoxnh9T8fJ6*HA;lZ8nyr*Hd4VQV|*D{*r W)w-u`R7`KTt#@jk^=8GiruYpcB!!y* literal 0 HcmV?d00001 diff --git a/src/fonts/DressCodeIcons.svg b/src/fonts/DressCodeIcons.svg new file mode 100644 index 00000000..193b1bcf --- /dev/null +++ b/src/fonts/DressCodeIcons.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/DressCodeIcons.ttf b/src/fonts/DressCodeIcons.ttf new file mode 100644 index 0000000000000000000000000000000000000000..195510a387c716ea672ed5c80849551b3f68001f GIT binary patch literal 2712 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 \ No newline at end of file diff --git a/src/icons/cog.svg b/src/icons/cog.svg new file mode 100644 index 00000000..eb0335ce --- /dev/null +++ b/src/icons/cog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/eye.svg b/src/icons/eye.svg new file mode 100644 index 00000000..423a4fa3 --- /dev/null +++ b/src/icons/eye.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/history.svg b/src/icons/history.svg new file mode 100644 index 00000000..488427ed --- /dev/null +++ b/src/icons/history.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/lock.svg b/src/icons/lock.svg new file mode 100644 index 00000000..a64e1736 --- /dev/null +++ b/src/icons/lock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/more.svg b/src/icons/more.svg new file mode 100644 index 00000000..9b756b8a --- /dev/null +++ b/src/icons/more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/ok.svg b/src/icons/ok.svg new file mode 100644 index 00000000..803104d7 --- /dev/null +++ b/src/icons/ok.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/pencil.svg b/src/icons/pencil.svg new file mode 100644 index 00000000..59e4e34b --- /dev/null +++ b/src/icons/pencil.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/redo.svg b/src/icons/redo.svg new file mode 100644 index 00000000..b2279ca7 --- /dev/null +++ b/src/icons/redo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/trash.svg b/src/icons/trash.svg new file mode 100644 index 00000000..92fc7606 --- /dev/null +++ b/src/icons/trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/undo.svg b/src/icons/undo.svg new file mode 100644 index 00000000..2e05a52c --- /dev/null +++ b/src/icons/undo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/styles/_generated/_icons.scss b/src/styles/_generated/_icons.scss new file mode 100644 index 00000000..305103aa --- /dev/null +++ b/src/styles/_generated/_icons.scss @@ -0,0 +1,109 @@ +@font-face { + font-family: "DressCodeIcons"; + src: url('../fonts/DressCodeIcons.eot'); + src: url('../fonts/DressCodeIcons.eot?#iefix') format('eot'), + url('../fonts/DressCodeIcons.woff') format('woff'), + url('../fonts/DressCodeIcons.ttf') format('truetype'), + url('../fonts/DressCodeIcons.svg#DressCodeIcons') format('svg'); +} + +@mixin dc-icons-styles { + font-family: "DressCodeIcons"; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-style: normal; + font-variant: normal; + font-weight: normal; + // speak: none; // only necessary if not using the private unicode range (firstGlyph option) + text-decoration: none; + text-transform: none; +} + +%dc-icons { + @include dc-icons-styles; +} + +@function dc-icons-char($filename) { + $char: ""; + + @if $filename == add { + $char: "\E001"; + } + @if $filename == cog { + $char: "\E002"; + } + @if $filename == eye { + $char: "\E003"; + } + @if $filename == history { + $char: "\E004"; + } + @if $filename == lock { + $char: "\E005"; + } + @if $filename == more { + $char: "\E006"; + } + @if $filename == ok { + $char: "\E007"; + } + @if $filename == pencil { + $char: "\E008"; + } + @if $filename == redo { + $char: "\E009"; + } + @if $filename == trash { + $char: "\E00A"; + } + @if $filename == undo { + $char: "\E00B"; + } + + @return $char; +} + +@mixin dc-icons($filename, $insert: before, $extend: true) { + &:#{$insert} { + @if $extend { + @extend %dc-icons; + } @else { + @include dc-icons-styles; + } + content: dc-icons-char($filename); + } +} + +.dc-icons-add { + @include dc-icons(add); +} +.dc-icons-cog { + @include dc-icons(cog); +} +.dc-icons-eye { + @include dc-icons(eye); +} +.dc-icons-history { + @include dc-icons(history); +} +.dc-icons-lock { + @include dc-icons(lock); +} +.dc-icons-more { + @include dc-icons(more); +} +.dc-icons-ok { + @include dc-icons(ok); +} +.dc-icons-pencil { + @include dc-icons(pencil); +} +.dc-icons-redo { + @include dc-icons(redo); +} +.dc-icons-trash { + @include dc-icons(trash); +} +.dc-icons-undo { + @include dc-icons(undo); +} diff --git a/src/styles/modules/_icons.scss b/src/styles/modules/_icons.scss new file mode 100644 index 00000000..f34b45eb --- /dev/null +++ b/src/styles/modules/_icons.scss @@ -0,0 +1,10 @@ +i[class^="dc-icons-"] { + color: $blue40; + + &.dc-icons--interactive { + cursor: pointer; + &:hover { + color: $blue20; + } + } +} diff --git a/src/styles/toolkit.scss b/src/styles/toolkit.scss index e2326691..594fdc9f 100644 --- a/src/styles/toolkit.scss +++ b/src/styles/toolkit.scss @@ -9,6 +9,9 @@ // Common base @import "base"; + @import "_generated/icons"; + + @import "modules/icons"; @import "modules/btn"; @import "modules/header"; @import "modules/table";