chore(intenral-docs): add icons doc

internal-docs/engineering/icons.md

@@ -0,0 +1,21 @@
+# Icons
+
+- [Icons](#icons)
+  - [Adding Icons](#adding-icons)
+  - [Generating Icons](#generating-icons)
+
+Our icons are converted from SVG to React components at compile time using our own “svg-to-react” library: [https://github.com/twilio-labs/svg-to-react](https://github.com/twilio-labs/svg-to-react)
+
+## Adding Icons
+
+The process for adding icons is very simple thanks to our naming conventions and conversion library.
+
+Any new SVG assets must be copied into the [svg](../../packages/paste-icons/svg/) folder. We often see the `viewBox` attribute missing so be sure the top level element has the following:
+
+```html
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+```
+
+## Generating Icons
+
+To generate newly added icons you can use the command `yarn convert:icons:new` from the root of the repo. This will create the new React components and appends the "Icon" string to the component name.

package.json

@@ -51,6 +51,7 @@
     "generate:embeddings:refresh": "yarn nx run @twilio-paste/website:generate:embeddings:refresh",
     "generate:db-types": "yarn nx run @twilio-paste/backend:generate:db-types",
     "generate:website-data": "yarn workspace @twilio-paste/website fetch:data",
+    "convert:icons:new": "yarn workspace @twilio-paste/icons convert-new",
     "pre-push": "concurrently \"yarn:lint\" \"yarn:test\" \"yarn:format\" \"yarn:type-check\"",
     "prerelease": "yarn build && yarn generate:website-data && yarn lint && yarn test",
     "release": "yarn changeset publish",