7 ms·

Seems like a good time to mention an absolutely awesome - https://icomoon.io/app https://icomoon.io/app It allows cherry-picking icons from dozens of different

Seems like a good time to mention an absolutely awesome - https://icomoon.io/app https://icomoon.io/app It allows cherry-picking icons from dozens of different SVG icon packs (including Feather) and packaging them into a custom (web)font. It can also be used to package your own SVG assets into a single font file and then use resulting .woff as an SVG sprite sheet.

onli 9y ago
I use http://fontello.com/ http://fontello.com/ for that.
- mappu 9y ago
  I use https://www.npmjs.com/package/fontmin#svgs2ttf https://www.npmjs.com/package/fontmin#svgs2ttf for that (as part of my build script).
sb8244 9y ago
Icomoon is amazing but so frustratingly slow with large sets
- usaphp 9y ago
  I don't know how large your set is but I have about 50 projects loaded into icomoon and each has at least 100 icons in it and i have not had any issues with speed. I love the app and it's one of the apps that I can't do any work without. Also I had once accidentally deleted a project, contacted them and they were able to recover it within a few hours after my request. They are superb
  - sb8244 9y ago
    I loaded streamline font set into it and it's actually close to unusable on my machine. I'm glad to hear it works for others though.
amelius 9y ago
Why not use separate SVG files? You could reference them as data-url from the CSS to save round-trips. Perhaps it's just me but using a font to store icons seems arcane.
- noir_lord 9y ago
  Always trade offs, that said I favour the font approach since the download is still relatively tiny and font-face is better supported in the wild.
- seanwilson 9y ago
  I prefer SVGs as well now. You can style + animate them with CSS, it's easier to see what changed in your Git diffs and you can quickly edit them in an SVG editor if you need to.
  - CrystalGamma 9y ago
    Do you know any way to style them using CSS without using JS? (and while keeping them cacheable)
    - shakna 9y ago
      Plain CSS works doesn't it? [0] [0] https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SV...
      - seanwilson 9y ago
        That works because the SVG element is inline with the document. It doesn't work if you use an external link to the SVG document. The standard workaround is to use JS or server-side processing to inline the SVG elements directly into your HTML document.
        shakna 9y ago
        Okay, here's a better example. [0] That's a linked svg, styled with CSS, though the CSS gets linked into the SVG header, rather than inherited from the page it is on. <?xml-stylesheet href="sp-styles.css" type="text/css"?> However, still possible to use CSS, rather than JS, without inlining. [0] http://blogs.sitepointstatic.com/examples/tech/svg-basics/svg-logo.html http://blogs.sitepointstatic.com/examples/tech/svg-basics/sv...
component 9y ago
Should be noted the _bundled_ SVG set of Feather on icomoon is out of date.
whipoodle 9y ago
I favor using image formats for images, and fonts for text :)
- danielharrison 9y ago
  And what about icons?

onli 9y ago

I use http://fontello.com/ http://fontello.com/ for that.

mappu 9y ago
I use https://www.npmjs.com/package/fontmin#svgs2ttf https://www.npmjs.com/package/fontmin#svgs2ttf for that (as part of my build script).

sb8244 9y ago

Icomoon is amazing but so frustratingly slow with large sets

usaphp 9y ago
I don't know how large your set is but I have about 50 projects loaded into icomoon and each has at least 100 icons in it and i have not had any issues with speed. I love the app and it's one of the apps that I can't do any work without. Also I had once accidentally deleted a project, contacted them and they were able to recover it within a few hours after my request. They are superb
- sb8244 9y ago
  I loaded streamline font set into it and it's actually close to unusable on my machine. I'm glad to hear it works for others though.

amelius 9y ago

Why not use separate SVG files? You could reference them as data-url from the CSS to save round-trips. Perhaps it's just me but using a font to store icons seems arcane.

noir_lord 9y ago
Always trade offs, that said I favour the font approach since the download is still relatively tiny and font-face is better supported in the wild.
seanwilson 9y ago
I prefer SVGs as well now. You can style + animate them with CSS, it's easier to see what changed in your Git diffs and you can quickly edit them in an SVG editor if you need to.
- CrystalGamma 9y ago
  Do you know any way to style them using CSS without using JS? (and while keeping them cacheable)
  - shakna 9y ago
    Plain CSS works doesn't it? [0] [0] https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SV...
    - seanwilson 9y ago
      That works because the SVG element is inline with the document. It doesn't work if you use an external link to the SVG document. The standard workaround is to use JS or server-side processing to inline the SVG elements directly into your HTML document.
      - shakna 9y ago
        Okay, here's a better example. [0] That's a linked svg, styled with CSS, though the CSS gets linked into the SVG header, rather than inherited from the page it is on. <?xml-stylesheet href="sp-styles.css" type="text/css"?> However, still possible to use CSS, rather than JS, without inlining. [0] http://blogs.sitepointstatic.com/examples/tech/svg-basics/svg-logo.html http://blogs.sitepointstatic.com/examples/tech/svg-basics/sv...

component 9y ago

Should be noted the _bundled_ SVG set of Feather on icomoon is out of date.

whipoodle 9y ago

I favor using image formats for images, and fonts for text :)

danielharrison 9y ago
And what about icons?