Newly added icon is not centered in tree view

[yudai-nkt]

I am trying to add BibTeX icon support as I did in #252, but the icon is placed more upward and left than it should be.

My SVG icon is properly displayed on Firefox, Safari and Inkscape. Gulp task seems to work well also.

$ gulp font
[11:07:09] Using gulpfile ~/work/seti-ui/gulpfile.js
[11:07:09] Starting 'font'...
[11:07:09] Finished 'font' after 24 ms
[11:07:10] gulp-svgicons2svgfont: Font created

Am I doing something wrong with this process?

Environment

OS: OS X El Capitan 10.11.4 Atom: Version 1.7.3 Seti UI: v1.0.3

[jesseweed]

I'd suggest make sure to start with a square image and center the icon within it however you want it to look in your editor.

For example, I created all of mine with a 32 x 32 px artboard in Illustrator.

Hope that helps!

[yudai-nkt]

After forking the repo and looking into how you make icons, I did use a square of 32x32 px in the beginning and center the logo.

tex.svg (this works well as seen in the PR above):

bibtex.svg:

I'm afraid I don't have Illustrator and that my Inkscape is Japanese localized...

[jesseweed]

@yudai-nkt if you want to attach a copy of the file you're working with I can take a look and see if I can figure out why it's not aligning properly.

[yudai-nkt]

@jesseweed I appreciate it. Please find this file.

[Alhadis]

@jesseweed / @yudai-nkt Just some advice: when designing icon fonts, it's always best to fit the icon to the canvas:

Having margins makes icons harder to size consistently. See this for an illustrated explanation.

I understand it's no big deal if an icon-font is created for a specific design (like Seti UI), but when other people begin using your icons (which they will if the font you've created kicks enough arse), well, these are the sort of things that can surface.

2 ¢