Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More detail instructions #76

Open
lokywin opened this issue Aug 12, 2015 · 8 comments
Open

More detail instructions #76

lokywin opened this issue Aug 12, 2015 · 8 comments

Comments

@lokywin
Copy link

lokywin commented Aug 12, 2015

First of all, thank you for doing this. It is awesome work.

When first started I quickly jumped down to the instructions section for Sketch: https://github.com/nfroidure/gulp-iconfont#sketch
Downloaded the zip file and 💥 it didn't work.

It took me awhile to realize that I need Sketch tool installed, which is not mentioned there. Would you mind if I open a PR for that? Thank you again.

@Neema
Copy link

Neema commented Aug 13, 2015

Not sure if this is necessary, that section is pretty clear - The first line mentions the need to download sketch tool

With help of [Sketch Tools](http://bohemiancoding.com/sketch/tool/) and
 [gulp-sketch](https://github.com/cognitom/gulp-sketch)

And right below the link to the repository showing the example implementation of gulp-iconfont alongside with Sketch.

@nfroidure
Copy link
Owner

You can explicitly add the need to download the sketch tool if you think it makes things clearer.

By downloading [Sketch Tools](http://bohemiancoding.com/sketch/tool/) and
 [gulp-sketch](https://github.com/cognitom/gulp-sketch)

?

Also, i'm wondering if the gulp-iconfont readme is the right place to explain how to use sketch with it. Maybe we should just link to the readme of those repos and keep a single source of truth.

@lokywin
Copy link
Author

lokywin commented Aug 17, 2015

@nfroidure, that is a good point. In my opinion, when someone comes to this repo and needs to see the example of the gulp task in action, they would only need Sketch tool, Sketch is optional. I am proposing something like the following for the instruction:

Run the Example

  1. Install Sketch tool. See detail instructions here
  2. Download the zipped repo and extract it.
  3. Go to the directory. $ cd path/to/dir
  4. Install some tools. $ npm install
  5. Create fonts and CSS $ gulp symbols

@Neema
Copy link

Neema commented Aug 17, 2015

Those instructions are incorrect. The other repository, maintained by cognitom, has other dependencies as well. Sketch Tools (on Bohemian Coding's website), gulp-sketch, and this repository (gulp-iconfont).
While @nfroidure does mention all the dependencies required for an implementation
( "With help of Sketch Tools and gulp-sketch ... 1. Download the zipped repo ")
maybe it is best to leave out instructions completely since it may lead to confusion and has more dependencies than gulp-iconfont. And just link to cognitom's symbols-for-sketch repo.

Edit: Perhaps calling it a "sample" repo is also adding to the confusion...hmm..

@nfroidure
Copy link
Owner

Since i'm not using Sketch, i think i cannot help. Maybe @cognitom is the best referrer to answer to those questions.

cc @victordarras any advice?

@cognitom
Copy link
Contributor

Hi, guys!
My English is awful, as you know 🙀
Feel free to rewrite the instruction. My recommendation is adding link after first paragraph and removing these lines.

Add last (bold one):

Sketch is a relatively new drawing tool on Mac. With help of Sketch Tools and gulp-sketch, you can directly create fonts from your Sketch file. No need to export intermediate SVGs. Check Symbols for Sketch.

Remove them:

Here is a sample repo "Symbols for Sketch".

  1. Download the zipped repo and extract it.
  2. Go to the directory. $ cd path/to/dir
  3. Install some tools. $ npm install
  4. Create fonts and CSS $ gulp symbols

@matthewferry
Copy link

Hm, yeah pointing to another repo as an example is a bit confusing. And since this READMe section is supposed to just be about SVG settings, maybe just be a bit more descriptive and show a snippet of code instead. Something like:


If you use [Sketch](https://www.sketchapp.com/) for drawing icons, you can create a simple gulp task to export SVGs — no need to export manually — using [Sketch's CLI tool](http://www.sketchapp.com/tool/) and [gulp-sketch](https://github.com/cognitom/gulp-sketch)
1. Install [Sketch tools](http://www.sketchapp.com/tool/) following instructions there.
2. Use [gulp-sketch](https://github.com/cognitom/gulp-sketch) to export icons
3. Create fonts and CSS [as described above](#usage)
```javascript
var sketch = require('gulp-sketch');
gulp.task('export', function() {
  gulp.src('path/to/file.sketch')
    .pipe(sketch({
      export: 'artboards',
      formats: 'svg'
    }))
    .pipe(gulp.dest('path/to/svgs'));
});
```

@nfroidure
Copy link
Owner

Is this still an issue for you? Would some of you build a PR on top of this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants