Components - Icons

[emmabostian]

Assets

All icons & color codes can be found on the Sketch cloud: https://sketch.cloud/s/xVR5A/paKjK7A

Details

Given that we are going to use our own custom svg icons, we need to remove @fortawesome from our dependencies: https://github.com/Coding-Coach/coding-coach/blob/develop/package.json#L28-L31

We already have an Icon component to render svg icons, let's use this approach for all new icons.

This task also includes migrating the current icons in the home page from fortawesome to the new Icon component that we have.

Edit: The design contains two states for the icons (active, inactive), that should be handled by the navigation component (We don't have it yet), this task doesn't include that. Only adding the icons to our icons catalog, we might want to create a storybook for all the available icons we already have.

[steoneill]

I can take this if that’s ok? :)

[crysfel]

All yours! Just ask @emmawedekind to add you to the organization so I can officially assign it to you.

As mentioned in the details section, this tasks also includes removing fortawesome, we already have icons for facebook, twitter and isntagram inside src/components/icon, let's use that in the landing page as well.

Let me know if you have additional questions.

[steoneill]

@emmawedekind could you add me to the organisation please? :)

[steoneill]

@crysfel i believe i've been added now :)

[emmabostian]

Added! Sorry about the delay :)

[emmabostian]

Hi, what's the status @steoneill

[devictoribero]

@steoneill

[steoneill]

Hi guys!

Sorry for the delay, had a very sick 6 month old so haven't progressed as quick as I thought!

Will get this pushed ASAP!

(Feel free to move it to someone else, i'd 10000% understand)

[trent-boyd]

@emmawedekind I don't mind taking this over so @steoneill can focus on taking care of his sick kiddo. 👶 😷

I think though, that I might need the actual SVG assets exported from Sketch. I don't see a way to access them on the link you posted. Or maybe I need to sign up for Sketch cloud?

@crysfel, do you think we could use this cool new feature of react-scripts 2.0 to automagically import SVG icons as React components? Looks like it could be pretty simple to add new icons in the future.

[devictoribero]

@emmawedekind I don't mind taking this over so @steoneill can focus on taking care of his sick kiddo.

I think though, that I might need the actual SVG assets exported from Sketch. I don't see a way to access them on the link you posted. Or maybe I need to sign up for Sketch cloud?

@crysfel, do you think we could use this cool new feature of react-scripts 2.0 to automagically import SVG icons as React components? Looks like it could be pretty simple to add new icons in the future.

ow... I did not know about its existence! It's cool

[crysfel]

@crysfel, do you think we could use this cool new feature of react-scripts 2.0 to automagically import SVG icons as React components? Looks like it could be pretty simple to add new icons in the future.

We are using it in some parts of our application, however... for the icons we do have react components for that where we just define the vectors in a variable or if there are several elements we can define as many nodes as needed.

https://github.com/Coding-Coach/coding-coach/blob/develop/src/components/icon/Twitter.js

[trent-boyd]

@crysfel: I saw that, but I don't think the approach in Icon.js will work for multicolored icons, which will have more multiple paths than won't fit into the vectors prop.

I don't have any of these SVG assets yet, but here's an example from an old project I worked on. Note that there's multiple<path> nodes, and a <mask>.

[emmabostian]

Can you grab the assets from Sketch Cloud? That's the easiest way @trent-boyd

[crysfel]

The Icon component also accepts any number of children, specifically for this scenario:

<Icon {...props}>
   <g path="abc....." />
   <g path="abc....." />
   <g path="abc....." />
</Icons>

[trent-boyd]

Hmm. Sketch Cloud requires me to have Sketch to get these SVGs out of the document. Hopefully I can resolve this before the demo is up. I've exported these each on an 80x80 artboard. If there's some standard for this, let me know.

[trent-boyd]

@crysfel: Let me know what you think about this. It's probably easier to focus on this commit since the raw SVGs make a lot of green in the diff view.

[emmabostian]

I put all the SVG icons up on the Invision board! Let me know if you can't download them for whatever reason: https://projects.invisionapp.com/boards/UF3Q7E6QEZM/

[emmabostian]

Hi... any update on this @trent-boyd ? :) We need this to move forward with other tasks!

[emmabostian]

Linked with PR #291

[trent-boyd]

@emmawedekind: Sorry about that. I've been prepping for some upcoming interviews lately, and haven't had as much time as I'd like to contribute. Hoping to find some time in the next couple of days. 🤞

[emmabostian]

Great thanks! :) Just please update the issue when you're ready!

[trent-boyd]

Hey @emmawedekind, I'm not adding a specific Notifications icon since the red numbered indicator should be dynamic and can be created pretty easily with plain HTML & CSS.

[devictoribero]

How is this going @trent-boyd? Too much to do? Need help?

[trent-boyd]

@tureey: I'm done with the PR, just waiting for feedback from @emmawedekind and @crysfel.

https://github.com/Coding-Coach/coding-coach/pull/291

[emmabostian]

Super thanks!