Skip to content

Latest commit

 

History

History
51 lines (36 loc) · 2.41 KB

icons.md

File metadata and controls

51 lines (36 loc) · 2.41 KB

Icons

Consuming icons

All icons are prepared for platform specific needs

Web

Exposes a tintable SVG that can be loaded directly or used via a CSS custom property

Android

Transforms the icon to a vector drawable asset

iOS

Transforms the icon to an Xcode Image Set

Synchronising icons

  • Create the icon and add it to the Figma icon library. Refer to the guidelines for icon preparation.
  • Export the icons from Figma
    • We currently export the 24x24 icon variants only (optical scaling is yet to be adopted). The process is manual but fast to do.
    • First select all of the 24pt variants from the document above. This easiest way to do this is to search for 24 and select all the results except for the placeholder ones.
    • Copy & paste these (or Option/Alt drag) to a safe working area, leaving the originals alone.
    • Using the SVG Export plugin on Figma, apply the Monochrome preset to the selected icons. This preset exports using currentColor so the icon can be tintable.
    • Download the icons zip file and extract it locally.
  • Tidy up the file names: lower case and replace spaces with hyphens bash/zsh
    for file in *; do mv -v -- "$file" "$(echo "$file" | tr ' ' '-' | tr '[:upper:]' '[:lower:]')"; done
    fish
    for file in *; mv -v -- "$file" (echo "$file" | tr ' ' '-' | tr '[:upper:]' '[:lower:]'); end
    
  • Copy the icons to the icons/ folder
  • Run yarn build at the root of the project or ask a maintainer to do this for you
  • Open a pull request against the develop branch

Requesting an icon

Removing or changing icons

Removing an icon is a breaking change, and should be reflected in the changelog and a major change in package version.

Renaming an icon is functionally the same as deleting an icon and adding another. This should be marked as a breaking change. The changelog should include migration instructions.

Visual changes to icons are considered a backwards compatible change (semver patch).