RFC: Feather SVG Icon System

This is a place to discuss how to best implement an SVG Icon System for Feather. This is a continuation of the discussions in #47 and #41. The goal of this thread is to define a usage spec for Feather.

Here’s the consensus so far:

• The icons directory should remain the single source of truth.
• An SVG sprite sheet should be generated from the icons directory.
• Feather should expose an icons object to make the NPM package more useful.
• Feather should provide a way to inject SVGs into the DOM with JavaScript. This would allow for the use of a CDN making it easier to prototype with Feather icons.
• Feather should provide integration with popular JS frameworks like React and Vue through separate packages (react-feather, vue-feather, etc.).

Related reading:

• https://cloudfour.com/thinks/our-svg-icon-process/
• https://egghead.io/courses/create-an-svg-icon-system
• https://nucleoapp.com/how-to-create-an-icon-system-using-svg-symbols/
• https://css-tricks.com/svg-sprites-use-better-icon-fonts/
• http://varun.ca/icon-component/
• https://css-tricks.com/mega-list-svg-information/
• https://abookapart.com/products/practical-svg

Other SVG icon systems:

• https://github.com/jxnblk/geomicons-open
• https://github.com/primer/octicons
• http://evil-icons.io/

[carmelopullara]

Just published react-feather.

[colebemis]

I was actually thinking that the individual SVGs in the icons directory should be the single source of truth. Everything else can be generated from that directory. That way all we have to do to add an icon is put an SVG into the icons directory and everything else updates.

In terms of DOM injection, I’m doing some research on that right now. I’ll post a write-up of my findings soon.