ouyang/logos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update icon sprites

Browse Source
This commit is contained in:
Gil Barbara
2015-07-23 01:07:12 -03:00
parent fc1822be3e
commit f173950d79
7 changed files with 50 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/media/icons.svg
+1 -1
View File
@@ -1 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="17" height="24" viewBox="0 0 17 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><view id="caret-down" viewBox="0 0 17 10"/><svg width="17" height="10" viewBox="0 0 17 10"><path d="M.402 2.134L7.408 9.11c.196.197.42.31.7.31.252 0 .504-.113.7-.31l7.005-6.976c.196-.196.28-.448.28-.7 0-.28-.084-.504-.28-.7-.196-.196-.448-.31-.7-.31H1.102c-.28 0-.505.114-.7.31-.197.196-.31.42-.31.7 0 .252.113.504.31.7" fill="#0A0B09" fill-rule="evenodd"/></svg><view id="check" viewBox="0 10 17 14"/><svg width="17" height="14" viewBox="0 0 17 14" y="10"><path d="M1.01 7.688l5.147 5.148c.185.185.426.277.704.277.28 0 .52-.092.705-.277l8.89-8.89c.184-.203.276-.425.276-.703 0-.278-.09-.52-.276-.704L15.046 1.13c-.185-.204-.426-.296-.704-.296-.278 0-.518.092-.703.296L6.86 7.91 3.825 4.873c-.186-.204-.426-.297-.704-.297-.278 0-.52.093-.703.297L1.01 6.28c-.186.185-.28.426-.28.704 0 .278.094.5.28.704" fill="#0A0B09" fill-rule="evenodd"/></svg></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 17 10" id="caret-down"><path d="M.402 2.134L7.408 9.11c.196.197.42.31.7.31.252 0 .504-.113.7-.31l7.005-6.976c.196-.196.28-.448.28-.7 0-.28-.084-.504-.28-.7-.196-.196-.448-.31-.7-.31H1.102c-.28 0-.505.114-.7.31-.197.196-.31.42-.31.7 0 .252.113.504.31.7" fill="#0A0B09"/></symbol><symbol viewBox="0 0 17 14" id="check"><path d="M1.01 7.688l5.147 5.148c.185.185.426.277.704.277.28 0 .52-.092.705-.277l8.89-8.89c.184-.203.276-.425.276-.703 0-.278-.09-.52-.276-.704L15.046 1.13c-.185-.204-.426-.296-.704-.296-.278 0-.518.092-.703.296L6.86 7.91 3.825 4.873c-.186-.204-.426-.297-.704-.297-.278 0-.52.093-.703.297L1.01 6.28c-.186.185-.28.426-.28.704 0 .278.094.5.28.704" fill="#0A0B09"/></symbol></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 852 B

app/media/icons/caret-down.svg
+2 -3
View File
@@ -1,7 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="10px" viewBox="0 0 17 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="caret-down">
<path d="M0.401878947,2.13421103 L7.40757451,9.11119472 C7.60356421,9.30718442 7.82701743,9.41953521 8.1078944,9.41953521 C8.36005949,9.41953521 8.61222458,9.30718442 8.80821428,9.11119472 L15.8126615,2.13421103 C16.0086512,1.93822133 16.0935385,1.68605624 16.0935385,1.43389114 C16.0935385,1.15426252 16.0086512,0.929560956 15.8126615,0.733571255 C15.6166718,0.537581553 15.3645067,0.425230769 15.1123416,0.425230769 L1.10219883,0.425230769 C0.822570216,0.425230769 0.597868648,0.537581553 0.401878947,0.733571255 C0.205889246,0.929560956 0.0935384615,1.15426252 0.0935384615,1.43389114 C0.0935384615,1.68605624 0.205889246,1.93822133 0.401878947,2.13421103" fill="#0A0B09"></path>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 995 B

After

Width:  |  Height:  |  Size: 931 B

app/media/icons/check.svg
+2 -3
View File
@@ -1,7 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="14px" viewBox="0 0 17 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="check">
<path d="M1.00898584,7.68769958 L6.1572352,12.835949 C6.34204416,13.0207579 6.58295583,13.1131624 6.86099429,13.1131624 C7.13903276,13.1131624 7.37911939,13.0207579 7.56475338,12.835949 L16.4537339,3.94696839 C16.6385429,3.74318352 16.7309474,3.52124777 16.7309474,3.2432093 C16.7309474,2.96517083 16.6385429,2.72425917 16.4537339,2.53945021 L15.0462158,1.13193204 C14.8605818,0.928147166 14.6204951,0.83574269 14.3424567,0.83574269 C14.0644182,0.83574269 13.8235065,0.928147166 13.6386976,1.13193204 L6.86099429,7.90963533 L3.82402219,4.87266323 C3.6383882,4.66887836 3.39830157,4.57647388 3.1202631,4.57647388 C2.84222463,4.57647388 2.60131296,4.66887836 2.41650401,4.87266323 L1.00898584,6.28018141 C0.824176884,6.46499036 0.730947368,6.70590203 0.730947368,6.98394049 C0.730947368,7.26197896 0.824176884,7.48391471 1.00898584,7.68769958" fill="#0A0B09"></path>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

app/scripts/components/Icon.jsx
+17
View File
@@ -0,0 +1,17 @@
var React = require('react');
var Icon = React.createClass({
propTypes: {
id: React.PropTypes.string.isRequired
},
render () {
return (
<svg className="icon" role="img" dangerouslySetInnerHTML={{ __html: '<use xlink:href="#' + this.props.id + '"></use>' }} />
);
}
});
module.exports = Icon;
app/styles/main.scss
+18
View File
@@ -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;
}
gulpfile.js
+7 -25
View File
@@ -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']);
package.json
+3 -2
View File
@@ -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",