From af0f8ff5dc74874b1a8fb837a9080f1c36f9bd7c Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 4 Oct 2024 15:00:56 -0400 Subject: [PATCH] Update Icons.mdx Updated copy for icons docs --- docs/Foundations/Icons.mdx | 73 ++++++++++++++++++++++++++++---------- 1 file changed, 55 insertions(+), 18 deletions(-) diff --git a/docs/Foundations/Icons.mdx b/docs/Foundations/Icons.mdx index 380e94c41..2172b7dcc 100644 --- a/docs/Foundations/Icons.mdx +++ b/docs/Foundations/Icons.mdx @@ -1,8 +1,41 @@ -## Icons Documentation +## Icons +### Table of Contents +1. [Introduction](#introduction) +2. [Naming Principles](#naming-principles) +3. [Adding and Updating Icons](#adding-and-updating-icons) +4. [The `IconTable` Component](#the-icontable-component) +5. [Using the `SVGPrettifier` Tool](#using-the-svgprettifier-tool) +6. [Starting the Server](#starting-the-server) +7. [Related Links](#related-links) +8. [FAQ](#faq) + +--- + + +### Introduction + +mParticle icon library is mP icons, a carefully curated collection based on [FontAwesome](https://fontawesome.com/search?o=r&s=light). Our design team has selected icons specifically for mParticle use cases, defined the semantic layer, and applied customizations as needed. + +### Naming Principles + +Names should be semantic, describing the pattern rather than the shape. For instance, "mp_act_lt_delete" describes an action icon in light style for deletion. Even though it may look like a "trash" icon, the name reflects the specific action (delete) rather than the object (trash). Multiple icons may have the same shape but different names based on semantic meaning. + +- Prefix: "mp" +- Category (abbreviated): + - act (UI Actions) + - info (Informational) + - pm (Product Model) + - [Other categories as needed] +- Style (abbreviated): + - lt (Light) + - dt (Duotone) + - Other styles as needed +- Semantic description + ### Adding and Updating Icons -The Design team provides SVG files with the final icon names. These SVG files must be minified and follow the project's styling guidelines. You can prettify them using the `SVGPrettifier` tool, which ensures the correct size and properties are applied to the SVG. +The Design team provides SVG files with the final icon names. These SVG files must be minified and follow the project's styling guidelines. You can prettify them using the SVGPrettifier tool, which ensures the correct size and properties are applied to the SVG. #### Steps to Add a New Icon: @@ -16,38 +49,42 @@ The Design team provides SVG files with the final icon names. These SVG files mu Add the icon components in the [src/components/icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/components/icons/index.ts) directory, where all icon components are stored. 4. **Update the Icons Object**: - Ensure the new icons are included in the `Icons` object located in [src/constants/Icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/constants/Icons.ts). This object is used across the project to reference all available icons. + Ensure the new icons are included in the Icons object located in [src/constants/Icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/constants/Icons.ts). This object is used across the project to reference all available icons. -### The `IconTable` Component +### The IconTable Component -The `IconTable` component is used to display a table of all available icons in the project. +The IconTable component is used to display a table of all available icons in the project. -### Using the `SVGPrettifier` Tool +### Using the SVGPrettifier Tool -The `SVGPrettifier` component is used to upload and prettify SVG files. Each SVG must follow the project's styling guidelines and have a unique name to avoid overwriting existing icons. +The [SVGPrettifier](https://mparticle.github.io/aquarium/?path=/docs/components-other-svgprettifier--documentation) component is used to upload and prettify SVG files. Each SVG must follow the project's styling guidelines and have a unique name to avoid overwriting existing icons. ### Starting the Server -To process the uploaded SVGs with the `SVGPrettifier`, a server must be running locally. Follow these steps to start the server: +To process the uploaded SVGs with the SVGPrettifier, a server must be running locally. Follow these steps to start the server: 1. Navigate to the root of the project directory. 2. Run the following command to start the server: - ```bash + +bash npm run icons-prettifier - ``` -### FAQ: -Q: What if an icon in Figma has a FontAwesome name or doesn't follow the standard naming format? Should I name it myself? -A: Please contact the design team. They'll provide the correct name and make sure the icon is properly reflected in the design library. +### Related Links +- **Eames:** [Figma Icon library] (https://www.figma.com/design/3j5Nb0oOSkF3DW3URS8yex/mParticle-Icons-1.0.0?node-id=2055-9952&t=K7xlZo0hE2tn2y54-0) +- **Eames:** [Icon Guidelines for designers](https://mparticle.atlassian.net/wiki/spaces/DMP/pages/3988914258/Icons) +- [Fontawesome LIbrary] (https://fontawesome.com/search?o=r&s=ligh) + +### FAQ + +**Q:** What if an icon in Figma has a FontAwesome name or doesn't follow the standard naming format? Should I name it myself? -Q: When do we use mParticle custom icons instead of default Ant Design (AntD) icons? -A: In our design system, Ant Design (AntD) icons are the primary choice across components. However, custom mParticle icons are used in the following scenarios: +**A:** Please contact the design team. They'll provide the correct name and make sure the icon is properly reflected in the design library. -Q: When do we use mParticle custom icons instead of default Ant Design (AntD) icons? -A: In our design system, Ant Design (AntD) icons are the primary choice across components. However, custom mParticle icons are used in the following scenarios: +**Q:** When do we use mParticle custom icons instead of default Ant Design (AntD) icons? -- When the design team explicitly requests a customized icon. +**A:** In our design system Eames, Ant Design (AntD) icons are the primary choice across components. However, custom mParticle icons are used in the following scenarios: +- When the design team explicitly requests a customized icon.- - When the AntD library does not offer a suitable icon for a specific use case. - When an existing AntD icon does not align with mParticle’s design or functional requirements.