From 4d761403a0ffdd11f5cc5ac74adc0429b799e40e Mon Sep 17 00:00:00 2001
From: Doug <6060466+pixlwave@users.noreply.github.com>
Date: Thu, 8 Feb 2024 08:33:07 +0000
Subject: [PATCH] Update the docs for exporting icons from Figma. (#69)

* Update the docs for exporting from Figma.

* Better docs by searching!
---
 docs/icons.md | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/docs/icons.md b/docs/icons.md
index 1c701bec..262a67bc 100644
--- a/docs/icons.md
+++ b/docs/icons.md
@@ -14,13 +14,26 @@ Transforms the icon to a vector drawable asset
 
 ### iOS
 
-Transforms the icon to an XCode Image Set
+Transforms the icon to an Xcode Image Set
 
 ## Synchronising icons
 
-- Create the icon and add it to the [Figma icon library](https://www.figma.com/file/gkNXqPoiJhEv2wt0EJpew4/Compound-Icons?type=design&mode=design&t=lYEYAWjnNUSGFhV4-11)
-  . Refer to [the guidelines for icon preparation](https://www.figma.com/file/gkNXqPoiJhEv2wt0EJpew4/Compound-Icons?type=design&node-id=280-6047&mode=design&t=wOCsc1FBoOz4YnJo-0).
-- Use [SVG Export](https://www.figma.com/community/plugin/814345141907543603) on Figma. Making sure to use `currentColor` so the icon can be tintable
+- Create the icon and add it to the [Figma icon library](https://www.figma.com/file/gkNXqPoiJhEv2wt0EJpew4/Compound-Icons?type=design&mode=design&t=lYEYAWjnNUSGFhV4-11). Refer to [the guidelines for icon preparation](https://www.figma.com/file/gkNXqPoiJhEv2wt0EJpew4/Compound-Icons?type=design&node-id=280-6047&mode=design&t=wOCsc1FBoOz4YnJo-0).
+- 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](https://www.figma.com/community/plugin/814345141907543603) 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**
+    ```bash
+    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