Collecticons revamp 🛠️

[danielfdsilva]

This PR brings a total revamp of collecticons. 🙀
There were too many repositories related to collecticons and it was difficult to keep track of everything.

This is the current landscape:

• developmentseed/collecticons - This repo. Originally the source code for http://collecticons.io
• developmentseed/collecticons-lib - The collection icons in SVG format
• developmentseed/collecticons-processor - The script that generates the font files from the SVG's.
• developmentseed/collecticons-chakra - The SVG icons as react components for Chakra UI.

Changes

The collecticons-processor is pretty outdated and we're not really using icon fonts anymore. This repo is going to be deprecated and archived.

It doesn't make a lot of sense to keep a repo (collecticons-lib) specifically for the SVG icons. The icons will be moved, and the repo deprecated and archived.

We now have a component library for Chakra UI, but nothing for React alone which is lacking.

The proposed new structure is to centralize the different packages under a monorepo managed by lerna and improve the build process. The SVG icons are stored under the icons folder and then using yarn icons we generate the react components for Chakra UI and React alone.

These packages will then be published to npm as @devseed-ui/collecticons-chakra and @devseed-ui/collecticons-react. See the Versioning section of the README for a more detailed flow.

This repo also contains the showcase website for http://collecticons.io.

In this way we minimize the number of steps needed to create and contribute to the collecticons project. 🎉

---

Before going ahead with these changes I would like to hear your thoughts about the new structure and if you have any suggestions or concerns.
@ricardoduplos @LanesGood as icons contributors
@oliverroick as another pair of developer eyes (given your contribution to the Chakra UI collecticons repo)

🦆

[oliverroick]

This is great!

What's the difference between collecticons-chakra and collecticons-react? I'm wondering because other icon libraries like React Icons don't ship different versions for React and Chakra.

[danielfdsilva]

collecticons-react would work with Chakra no problem, but the Chakra specific version uses their Icon wrapper which means you can use their style system including the responsive props.

For example:

<CollecticonArea size={{ base: '1rem', md: '1.5rem', lg: '2rem' }} />

This gets very handy. But I think I can make some improvements to the react version to support some of the other props we have like the meaningful which is handy for a11y purposes.

@ricardoduplos Btw, there are some icons like calendar-minus, or magnifying-glass-minus, that are not rendering correctly. I'd appreciate if you could have a look

[LanesGood]

@danielfdsilva wow, nice! This looks like a lot of great cleanup work.

To confirm, new icons are added directly as svg's to the /icon path, correct? Should we make this more clear in the README?

I also see there are multiple readmes for the different packages. More of a question for @oliverroick or anyone who is using collecticons in frontend dev work; should all the readmes be combined into one? Also along the lines of Oliver's questions above; the readme for collecticons-react explicitly discusses using collecticons in chakra; this is confusing if we should instead be pushing developers to use collecticons-chakra for that purpose.

[danielfdsilva]

@LanesGood Added a line about the icons location and fixed the READMEs.

I think we need different readme files for the different packages. You want to be able to see the docs for what you're using (even though right now they're very similar.)
The high level docs are about icon creation which will only be relevant to a limited number of people.

[danielfdsilva]

@ricardoduplos @LanesGood @oliverroick Anything else to look into, or is this good to move forward?

[LanesGood]

This looks good to me as an icon contributor. Thanks for the read me changes - really nice to see this all consolidated!