RFC: Feather SVG Icon System

[colebemis]

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/

[Swizz]

Evil-icons looks very close to that you have in mind ; but the renderIcons function needs to be called each time the dom change, this is pretty messy against how easy the using of a font icon is.

Like you said, the SVG Symbol Sprite need to be the single source of truth, according to this, the CDN loader need to encore the use of <use> by doing only the in dom injection.

So, I discourage the use of class or data-icon.

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

[colebemis]

Here are my ideas on ways Feather could be used:

Option 1: Copy & Paste

If you only need one or two icons, copying and pasting the SVG code directly into your markup might be the best solution. This is by far the simplest way to use Feather.

Option 2: Node

For more advanced use cases, Feather could expose an icons object, making icon information easily accessible. Additionally, Feather could provide a toSVG method that accepts an icon name and an options object and returns a string of the <svg> tag.

Example:

const feather = require('feather-icons');

feather.icons.mail

/* {
    name: 'mail',
    contents: '<path d="..."/><polyline points="..."/>',
    options: {
        class: 'feather feather-mail',
        width: 24,
        height: 24,   
        viewBox: '0 0 24 24',
        fill: 'none',
        stroke: 'currentColor',
        'stroke-width': 2,
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
    },
} */


feather.toSVG('mail', {})

// '<svg ...><path d="..."/><polyline points="..."/></svg>'

This option would make Feather easier to use with front-end frameworks like React and Vue and would aid in the creation of packages like 'react-feather', 'vue-feather', etc.

I imagine that this feather object would be the core of the Feather icon library. All other usage implementations could reference this object for icon information.

Option 3: JavaScript Injection

The feather object could have an inject method that accepts a DOM NodeList and replaces those elements with the SVG icon that corresponds to the element's data-icon attribute.

Example:

<script src="/path/to/feather.min.js"></script>

<span class="feather" data-icon="mail"></span>

<script>
    const icons = document.querySelectorAll('feather');
    feather.inject(icons);
</script>

This option would be good for prototyping in the browser because it could utilize a CDN.

Option 4: Spritesheet

Feather could generate an SVG sprite by looping over every key in feather.icons object. To use the sprite, you could either paste the contents of feather.svg immediately below the opening body tag and use it like this:

<svg><use xlink:href="#mail"/></svg>

or just reference feather.svg like this:

<svg><use xlink:href="/path/to/feather.svg#mail"></svg>

I know IE has some problems referencing external SVGs in this way so we would probably have to provide a polyfill of some kind.

Final Thoughts

I'd like to keep the main feather repo as barebones as possible and keep it platform agnostic. We can create helper repos like react-feather for platform specific use cases.

I'd love to get feedback on these ideas. Let me know if you have any ideas about how to best deliver Feather. I want to design the best possible experience for Feather users before getting in the weeds with implementation details.

[tthallos]

https://github.com/mage3k/vue-feather-icon

[carmelopullara]

Just published react-feather.

[colebemis]

@mage3k @carmelopullara I just merged a pull request adding a Related Projects to the README. I'd love for you guys to add your projects to the list. Just submit a pull request 👍

[carmelopullara]

@colebemis just submitted. Thanks!

[tnguyen14]

With this issue closed, is there one tracking the progress of SVG sprite?