Icon library

[ssbittle]

Consolidated our icon library to one single source. This will be what design references moving forward.

Figma file - https://www.figma.com/file/uE7s7oQ1eE714jQFdS8Z3m/Spark-Design-System---Icons?node-id=410%3A50&viewport=-293%2C-185%2C0.8291666507720947

[WilliamKelley]

Thanks for filing the change 👍🏼 Some questions:

1. Are the old, custom icons being removed from use in Spark?

a. If so, we'll remove them from our code.

2. Has Prenda purchased any license for using these icons in a commercial product?

a. Does it allow multiple projects?

b. Does it allow multiple users?

c. Are there explicit rules about exporting and reproducing SVGs in code?

3. Is there bulk export or bulk download option for SVG outputs of the icons?

a. If not, we'll have to figure some sort of add-as-used process. There a a lot of icons, which we'll have to export manually, one-by-one; it's pretty infeasible outright.

4. I see that a select few icons have been adjusted to 32px, does Spark Design have specifications for a set of icon sizes?

a. For example, large: 32px, medium: 24px, small: 16px ?

Technical notes:

• Because of the large amount of icons and thus large size of a resulting package, we'll probably want to follow Material-UI's lead of creating a separate package just for our icons.

  • I see this as a motivator for migrating to NX (@seigler @haase1020)

[ssbittle]

Fantastic questions, I'll do my best to provide the best answers I have:

1. The old set will no longer be used in Spark, so we can work to remove those from the code.
2. License has been secured and can be used on unlimited projects. No restrictions.
3. Looking into this as I realize that would be a heavy workload. My initial suggestion is as stated - _ add as used basis_ -
4. Sizes are as stated as well. Large - 32px, Medium - 24px, Small -16px

[WilliamKelley]

Gotcha, thanks Spencer.

Dev notes

• make sure the entire icon component is selected in Figma before exporting
  • Typically this appears as a 24x24 box outline selected around the icon.
• Ensure that the viewbox in the resulting svg file reads "0 0 24 24".
• Only the inner path tags should be copied and pasted as children on MUI's SvgIcon component

For Duotone icons, i'm not sure if SvgIcon will give us everything we need to control it so we might have to do some extension if custom coloring is required. See FontAwesome's notes on this.

[WilliamKelley]

Tool for bulk export: SVG Export Figma Plugin

Care will have to be given to audit its optimization capability. We don't want it to compromise design integrity for resolution scalability and coloring. The icon library source / creators has already say they've done optimizing and such. The presets can be disabled and bulk export still taken advantage of.

[WilliamKelley]

This can be closed by #68. Ongoing implementation issues and changes are tracked in issue #131, #138, #140 and linked PRs