Skip to content

Latest commit

 

History

History
152 lines (92 loc) · 4.05 KB

SVG-icons-to-font:-automated.md

File metadata and controls

152 lines (92 loc) · 4.05 KB

◀️ Back

Choosen library:

https://github.com/sapegin/grunt-webfont

Decision made with the team

  • Icons will leave in a separate repository: https://gitlab.com/SUSE-UIUX/eos-icons
  • We will work merging into 1 branch per release. Once the icons are all ready, the branch will merge into master.
  • The building will happen in the eos-icons branch, and EOS will only consume the icons, just the same way any other SUSE product will.
  • In the EOS we will provide code spinnets showing how to use the icons library since the icons use ligatures, there is no need to provide stylesheets.
  • In the eos-icons repo, there will be a demo HTML for people to see the icons library. This demo is automatically generated by Grunt, we don't need to style it or improve anything in it.
  • The download link will not trigger any zip download from the eos website but it will merely be an external link to the Github repo https://gitlab.com/SUSE-UIUX/eos-icons

Investigations

1) gulp-iconfont URL: https://www.npmjs.com/package/gulp-iconfont

Problems:

  • It requires Gulp, which we don't use. To use it we would have to invest extra time configuring and maintaining a gulp builder.
  • No option for ligature

Good:

  • Has plenty of daily downloads which means: more chances it is well maintained.

Evaluation: 2/5

2) iconfont-maker URL: https://www.npmjs.com/package/iconfont-maker

Problems:

  • Doesn't export less (we don't need it)
  • Doesn't accept ligatures
  • Only a few downloads a week. Doesn't seem to be a popular library.

Good:

  • Npm package we can manipulate in nodejs or perhaps simply as a script in package.json
  • Exports scss

Evaluation: 1/5

3) svg-font-create URL: https://www.npmjs.com/package/svg-font-create

Problems:

  • The library is old and it was last updated 4 years ago.
  • Outdated dependencies.

Evaluation: 1/5

4) icon-font-generator URL: https://www.npmjs.com/package/icon-font-generator

Problems:

  • Cant process LESS/SCSS (we don't need it)
  • Cant create ligatures

Good:

  • Accepts multiple (single icon) svg files
  • Npm package we can manipulate in nodejs or perhaps simply as a script in package.json.
  • Popular and has many downloads. Last updated 5 months ago.

Evaluation: 2/5

5) svgicons2svgfont URL: https://www.npmjs.com/package/svgicons2svgfont

Problems:

  • Doesn't take care of CSS, at all

Good:

  • It seems to be the original module all others are integrating inside.
  • Popular library.
  • Last updated 1 month ago.
  • Handles multiple SVG files.
  • Extracts ligatures from the file name. (couldn't make it work)
  • If an icon has shapes not merged into 1 path, it will take care of merging them.
  • From this project come the following options:

a) https://www.npmjs.com/package/grunt-webfont

Problems:

  • We don't use Grunt in any project (no actual experience within the team) and it seems a bit pointless to have it only for 1 task.

Good:

  • Can export css, sass, scss or less.
  • Popular enough and well maintained.
  • Exports HTML demo page.
  • Supports ligatures with fontforge (default engine).

b) https://www.npmjs.com/package/gulp-webfont

Same as the one above, but made for Gulp. +1

Good:

  • Can export css, sass, scss or less.
  • Popular enough and well maintained.
  • Exports HTML demo page.
  • Supports ligatures with fontforge (default engine).

CHOSEN!

c) https://github.com/nfroidure/gulp-svgicons2svgfont

Problems:

  • It requires Gulp, which we don't use. To use it we would have to invest extra time configuring and maintaining a gulp builder.

Good:

  • Exports css/scss
  • CLI usage.
  • Generates CSS files and HTML preview, allows using custom templates.
  • Very popular library.
  • Last updated 1 month ago.

d) https://www.npmjs.com/package/webfonts-generator

Problems:

  • Only exports css.
  • Last updated 9 months ago.

Good:

  • CLI usage.
  • Generates CSS files and HTML preview, allows using custom templates.
  • Good popularity.

All

All libraries require a minimum height of 500px in the SVGs.