gulp-iconfont icon indicating copy to clipboard operation
gulp-iconfont copied to clipboard

More detail instructions

Open lokywin opened this issue 9 years ago • 8 comments

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 :boom: 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.

lokywin avatar Aug 12 '15 19:08 lokywin

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.

Neema avatar Aug 13 '15 04:08 Neema

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.

nfroidure avatar Aug 14 '15 08:08 nfroidure

@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

lokywin avatar Aug 17 '15 20:08 lokywin

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..

Neema avatar Aug 17 '15 20:08 Neema

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?

nfroidure avatar Aug 18 '15 05:08 nfroidure

Hi, guys! My English is awful, as you know :scream_cat: 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

cognitom avatar Aug 18 '15 06:08 cognitom

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'));
});
```

matthewferry avatar Nov 09 '15 05:11 matthewferry

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

nfroidure avatar Jan 14 '16 11:01 nfroidure