From a5f856da2a73ef912ddc86e15f84a4b8eda1b243 Mon Sep 17 00:00:00 2001
From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Date: Thu, 17 Oct 2024 10:47:08 -0400
Subject: [PATCH] Component Library - Add Icon documentation (#11571)
* Add Icon documentation
* Add 7th bullet
* Icon docs - add context on how to go from hex values to appropriate tailwind classes.
* 7th bullet needs bold to look right
* Add color icon per suggestion
---
libs/components/src/icon/icon.mdx | 99 +++++++++++++++++++++++++++++++
1 file changed, 99 insertions(+)
create mode 100644 libs/components/src/icon/icon.mdx
diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx
new file mode 100644
index 0000000000..d8b881b7e8
--- /dev/null
+++ b/libs/components/src/icon/icon.mdx
@@ -0,0 +1,99 @@
+import { Meta, Story, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./icon.stories";
+
+
+
+# Icon Use Instructions
+
+- Icons will generally be attached to the associated Jira task.
+ - Designers should minify any SVGs before attaching them to Jira using a tool like
+ [SVGOMG](https://jakearchibald.github.io/svgomg/).
+ - **Note:** Ensure the "Remove viewbox" option is toggled off if responsive resizing of the icon
+ is desired.
+
+## Developer Instructions
+
+1. **Download the SVG** and import it as an `.svg` initially into the IDE of your choice.
+
+ - The SVG should be formatted using either a built-in formatter or an external tool like
+ [SVG Formatter Beautifier](https://codebeautify.org/svg-formatter-beautifier) to make applying
+ classes easier.
+
+2. **Rename the file** as a `.icon.ts` TypeScript file.
+
+3. **Import** `svgIcon` from `@bitwarden/components`.
+
+4. **Define and export** a `const` to represent your `svgIcon`.
+
+ ```typescript
+ export const ExampleIcon = svgIcon`