HomePhabricator

Icon: Add Icon component and icon system

Description

Icon: Add Icon component and icon system

Based largely on WVUI's icon system, but with some differences.

Add a new package called icons, which contains:

  • Icons as .svg files
  • Icon types and utilities that support expressing icons as either path strings or full SVG strings
  • An index file that imports all the icons' SVG files and exports their icon definitions
  • A custom Vite plugin that imports .svg files as strings, after using SVGO to clean up the SVG and a custom SVGO plugin to strip away the outer <svg> tag. Also use SVGO to prefix IDs in each icon with the name of the icon, to avoid ID collisions when multiple icons are loaded on the same page.
  • A script that builds the icon definitions as a JSON file
  • Jest tests that verify that the type definitions are complete and not broken (TypeScript's type definition generation has trouble with the .svg file import thing)
  • Jest configuration so that it understands how to import .svg files

Add an Icon component that embeds the SVG it's given, and detects the
language and direction at mount time unless they're overridden in
props.

Bug: T293132
Change-Id: I4f7ec737bc86b42edbdd55d079a7b7f1e296b07b

Details

Provenance
CatropeAuthored on Oct 21 2021, 7:20 PM
jenkins-botCommitted on Nov 3 2021, 8:24 PM
Parents
rDCODbae5d5887744: build: Add npm package keywords array
Branches
Unknown
Tags
Unknown
References
refs/changes/75/732775/22
ChangeId
I4f7ec737bc86b42edbdd55d079a7b7f1e296b07b