From 8f0a7586034e00a118d3d0b6d96e99a3546f87e4 Mon Sep 17 00:00:00 2001 From: Gil Barbara Date: Thu, 23 Jul 2015 01:07:12 -0300 Subject: [PATCH] update icon sprites --- app/media/icons.svg | 2 +- app/media/icons/caret-down.svg | 5 ++--- app/media/icons/check.svg | 5 ++--- app/scripts/components/Icon.jsx | 17 +++++++++++++++++ app/styles/main.scss | 18 ++++++++++++++++++ gulpfile.js | 32 +++++++------------------------- package.json | 5 +++-- 7 files changed, 50 insertions(+), 34 deletions(-) create mode 100644 app/scripts/components/Icon.jsx diff --git a/app/media/icons.svg b/app/media/icons.svg index d208e33..66f9176 100644 --- a/app/media/icons.svg +++ b/app/media/icons.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/media/icons/caret-down.svg b/app/media/icons/caret-down.svg index 56db434..3ada8b9 100644 --- a/app/media/icons/caret-down.svg +++ b/app/media/icons/caret-down.svg @@ -1,7 +1,6 @@ - - + - \ No newline at end of file + diff --git a/app/media/icons/check.svg b/app/media/icons/check.svg index f2d1066..61135ed 100644 --- a/app/media/icons/check.svg +++ b/app/media/icons/check.svg @@ -1,7 +1,6 @@ - - + - \ No newline at end of file + diff --git a/app/scripts/components/Icon.jsx b/app/scripts/components/Icon.jsx new file mode 100644 index 0000000..82a4bba --- /dev/null +++ b/app/scripts/components/Icon.jsx @@ -0,0 +1,17 @@ +var React = require('react'); + +var Icon = React.createClass({ + + propTypes: { + id: React.PropTypes.string.isRequired + }, + + render () { + return ( + ' }} /> + ); + } + +}); + +module.exports = Icon; diff --git a/app/styles/main.scss b/app/styles/main.scss index d5afeb6..4a50273 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -50,3 +50,21 @@ footer { margin: -1.5rem; padding: 1.5rem; } + +.isvg { + display: none; + + path { + fill: $link-color; + } + + #check path { + fill: #fff; + } +} + +.icon { + fill: $link-color; + height: 16px; + width: 16px; +} diff --git a/gulpfile.js b/gulpfile.js index 8db7592..d5ba87a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -49,7 +49,7 @@ function watchifyTask (options) { } stream - .pipe(source($.if(options.watch, 'main.js', 'main.min.js'))) + .pipe(source($.if(options.watch, 'app.js', 'app.min.js'))) .pipe(buffer()) .pipe($.if(!options.watch, $.uglify())) .pipe(gulp.dest(target() + '/assets')) @@ -113,16 +113,14 @@ gulp.task('icons', function () { gulp.src('**/*.svg', { cwd: 'app/media/icons' }) .pipe($.svgSprite({ mode: { - view: { // Activate the «view» mode - bust: false, - render: { - scss: true // Activate Sass output (with default options) - } - }, - symbol: true + symbol: { + dest: '.', + prefix: '', + sprite: 'icons' + } } })) - .pipe(gulp.dest('.tmp/assets')); + .pipe(gulp.dest('app/media')); }); gulp.task('readme', function () { @@ -253,20 +251,4 @@ gulp.task('deploy', function (cb) { runSequence('build', ['gh-pages'], cb); }); -gulp.task('deploy-old', ['build'], function () { - return gulp.src([ - 'logos/*.svg', - '.tmp/*.html', - '.tmp/main.css', - '.tmp/main.js', - 'app/media/**/*', - 'app/CNAME', - '*.md' - ]) - .pipe($.ghPages({ - force: true - })); - -}); - gulp.task('default', ['serve']); diff --git a/package.json b/package.json index ad8a690..da51217 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "license": "CC0-1.0", "homepage": "http://gilbarbara.github.io/logos/", "dependencies": { - "react": "^0.13" + "react": "^0.13", + "react-inlinesvg": "^0.4.2" }, "devDependencies": { "babelify": "^6.1", @@ -19,7 +20,7 @@ "connect-history-api-fallback": "^1.1", "del": "^1.2", "eslint": "^0.24", - "eslint-plugin-react": "^2.7", + "eslint-plugin-react": "^3.0", "gulp": "^3.9", "gulp-autoprefixer": "^2.3", "gulp-cache": "^0.2",