Icon Improvements

[Jacob-Griffin]

I was adding in the icons to fulfill the first round of user testing, but I noticed that a few of the things that would really fulfill my vision for these icons were pro features (Duotone to distinguish white fill and black fill, and the squiggle icon). I don't really want to use the mixed approach the way we have it now (fontawesome for some icons + pngs for the squiggles) or pay for pro, so I figure we should have a reusable icon library. Given our relatively small number of icons and their relative simplicity, this shouldn't be a monumental task. Keeping those in web components so we can reuse them wherever and add properties would be the best way to handle this.

I can set up the component library so its ready to use, but we're going to need our own SVGs to maintain this.

• [x] Proof of concept: Web Component for an icon exists and renders as expected

This concept is no longer the plan. The idea that a new and more consistent icon package is true though. Edit as of issue completion: That is the plan again. Icons within the webcomponent package and icons within the main app are two separate things. byfo-components will use the tsx file, and the app will use a new webcomponent byfo-icon

Icons.tsx (toolbar):

• [x] Draw
• [x] Erase
• [x] Undo
• [x] Redo
• [x] Fill (Prop: color) Trash/Sweep
• [x] Line (Prop: size)

byfo-icon (usable in main app):

• [x] Close modal
• [x] Home
• [x] Settings
• [x] Info

[Jacob-Griffin]

We now have a proprietary squiggle as a webcomponent to select line size. Since the line size is dynamic, if we wanted to switch to a popped over slider to change line size, we could

[Jacob-Griffin]

For the other icons, I don't see them being used in other places that the control bar. Since they're also going to have no further styling, there's really no benefit to using webcomponents over just raw svg elements. I made a tsx package with the svg icons in it, and left it at that. Swapping them would be a matter of just editing the svg/pasting a new one in.

Icons that are internal to the byfo-components package should be in this icons tsx file, and icons that get used in the "main" app have to be wrapped in an actual webcomponent.

At the moment, the icons are just Bootstrap icons, and the raw SVGs were available and free under the MIT license

[Jacob-Griffin]

Rolled that thought back. Icons that are used in the drawing tools are indeed in a tsx package so they can be easily used in that component. For more global icons, I made a native webcomponent that just drops in an icon based on an attribute. For example, the settings icon is a <byfo-icon icon='gear></byfo-icon>

Given the ease of just dropping in a new icon to byfo-icon and calling it, this is effectively mission complete for easily usable icons, potentially of our own creation.