Discovery - Icon Library: Determine if/how we can import(?) VADS/USWDS icons into our library

[jessicawoodin]

VADS and the mobile app both currently use Font Awesome for icons. In the spring, VADS is updating their icons to USWDS. They've already identified the USWDS icons that will be available in their library. They've also agreed to add our mobile app specific icons to their library for our use.

UX work has already been done to determine which USWDS icons should replace our existing icons (see Google Sheet).

Some notes from a conversation with a VADS designer

• VADS imports USWDS icons here.
• That gets loaded from the "css-library" package where you'll see USWDS v3.5.0 as a dependency here.
• Hop over to the USWDS repo and it jumps through a few paths, but ends up using the SVGS from here.
• Not 100% certain, but it looks like there's a sprite with all of the icons in it.

Open questions

• Are we able to directly reference/import/sync(?) our icons with VADS icons?
• Are we able to automatically keep our icons up-to-date with VADS icons?
• Do we need to import all of the VADS icons? Or can we select which icons to import? Does it matter?
• Are there any reasons we don't want to directly reference VADS icons?
• Is there a reason we should reference USWDS instead of VADS?

AC:

• [x] answer questions above
• [ ] determine spacing strategy TBD with #245
• [x] create stub tickets for implementation

[narin]

@jessicawoodin Wrapping up my discovery. Can you expand on the spacing AC? Here are the answers to your questions above:

• Are we able to directly reference/import/sync(?) our icons with VADS icons?
  • Yes. VADS has made their sprite.svg accessible. One method is to add @department-of-veterans-affairs/component-library as a dependency in our code. There are some downsides to this answered below.
• Are we able to automatically keep our icons up-to-date with VADS icons?
  • Yes, as long as they publish to NPM, which they seem to do frequently, we can always update to their latest version
• Do we need to import all of the VADS icons? Or can we select which icons to import? Does it matter?
  • We’d have access to all icons in sprite.svg. We can pick and choose which ones we want in our code
• Are there any reasons we don't want to directly reference VADS icons?
  • Adding the entire component-library package adds almost 30mb to our code, even though we only need a single file. We might want to figure out a way to only grab the latest sprite.svg as we’re adding a ton of files we don’t need.
• Is there a reason we should reference USWDS instead of VADS?
  • USWDS only has 24 icons at the moment. USWDS does package the icons by themselves here. If USWDS has all the icons we need, it’d be much more efficient to grab their package instead, but seems like VADS has way more icons. Edit: I was wrong about the number of USWDS icons. The full list of icons is here. We could reference USWDS directly if we don't need any of the additional VADS icons from here.

[narin]

Created implementation tickets:

• 244

• 245

• 255

Will discuss findings with @jessicawoodin after next stand up. Closing this ticket out.