[icon library] - add react icon names and download functionality to icon cards

Summary

Icon library page currently only shows the regular name for icons, but we don’t have anywhere that lists icons according to their icons-react name. i.e. Misuse24 CheckmarkFilled24, etc.

Desired outcome

overflow menu allowing “export of icons”

• raw svg
• download svg
• react component

cc: @joshblack

[jeanservaas]

Plot twist number two…

• Let’s move those guys to the bottom — same dimensions and hover functionality; even with wrapping names at 1056, the top of the card is going to get napalmed with activity on hover

• also, Anna’s spec doesn’t show it, but we’d need to move the names up to have only an 8px separation from the top, making the margin uneven

• the original IDL had them at the bottom on hover I believe and CPC is never wrong

• yes, after 48 hours of jibber jabber this is basically just Chris’s spec on hover

[designertyler]

I tried to summarize the requirements mentioned here so we can generate design specs. Let me know if we’re missing any or if some should be a phase 1 or phase 2, 3, 4, etc.

Requirement 1: Add react icon names to icon card As a product developer want to see the different sized React icon names so I can copy and paste the correct size into my project.

Requirement 1.2: Add angular icon names to icon card (?) As a product developer want to see the different sized Angular icon names so I can copy and paste the correct size into my project.

Requirement 2: Enable direct download for pictograms As a product designer I want to download the SVG asset of a specific pictogram so I can use it in my project.

Requirement 2.2: Enable bulk download for pictograms As a product designer I want to select multiple Pictogram SVG’s and download all at once so I don’t have to repeat the same action to get all the pictograms for my project.

Requirement 3: Inform the preferred method to get icon assets As a product designer I can learn how to get the icon asset in Sketch without directly downloading the SVG.

Requirement 4: Enable direct download for icons As a product designer I want to download the SVG asset of a specific icon so I can use it in my project.

Requirement 4.2: Enable bulk download for icons As a product designer I want to select multiple icon SVG’s and download all at once so I don’t have to repeat the same action to get all the pictograms for my project.

Requirement 5: Icon assets for non-Sketch users As a product designer I want to get the SVG assets for an icon so that I may use the icon in my XD or Axure project.