From dc9edb53db3d2df0a7c03d29cb83d4f78c3aa915 Mon Sep 17 00:00:00 2001 From: prasanthchaduvula Date: Tue, 3 Oct 2023 10:09:17 +0530 Subject: [PATCH 1/3] added miru icons docs --- docs/contributing-guide/icons/_category_.json | 9 ++ docs/contributing-guide/icons/list.md | 104 ++++++++++++++++++ docs/contributing-guide/icons/miruicons.md | 60 ++++++++++ 3 files changed, 173 insertions(+) create mode 100644 docs/contributing-guide/icons/_category_.json create mode 100644 docs/contributing-guide/icons/list.md create mode 100644 docs/contributing-guide/icons/miruicons.md diff --git a/docs/contributing-guide/icons/_category_.json b/docs/contributing-guide/icons/_category_.json new file mode 100644 index 0000000..1d625d3 --- /dev/null +++ b/docs/contributing-guide/icons/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "Miru Icons", + "position": 4, + "collapsed": true, + "link": { + "type": "generated-index", + "description": "How to use and update Miru Icons" + } +} \ No newline at end of file diff --git a/docs/contributing-guide/icons/list.md b/docs/contributing-guide/icons/list.md new file mode 100644 index 0000000..62bf279 --- /dev/null +++ b/docs/contributing-guide/icons/list.md @@ -0,0 +1,104 @@ +--- +id: iconslist +title: List of Icons +--- + +## Guide contains the list of all availbale Miru icons + +``` +WarningTriangleSVG +WarningCloseIconSVG +UserAvatarSVG +VisaSVG +SuccessSVG +ClickSuccessSVG +StripeLogoSVG +ShieldSVG +Setting_iconSVG +SaveButtonSVG +SearchIconSVG +SaelounLogoSVG +SConnectInvoiceSVG +PlusIconSVG +PasswordIconTextSVG +PasswordIconSVG +NotificationSVG +MiruLogoWithTextSVG +MobileSVG +PConnectInvoiceSVG +MasterCardSVG +LogoutIconSVG +LogoSVG +CloseInfoSVG +HelpIconSVG +CircleInfoSVG +GoogleSVG +ErrorOctagonSVG +EditImageButtonSVG +EditSVG +DownArrowSVG +DownSVG +DeleteImageButtonSVG +CloseButtonSVG +CompanySVG +ConnectedCheckSVG +CheckedCheckboxSVG +CancelButtonSVG +UncheckedCheckboxSVG +AvatarPaymentsSVG +AvatarSVG +ApplePaySVG +AppleSVG +PaypalDropdownSVG +PaypalLogoSVG +PurpleMiruLogoWithTextSVG +StripeDropdownSVG +TwitterSVG +AlertSVG +AmexSVG +NavAvatarSVG +InstagramSVG +WaiveSVG +MiruWhiteLogoWithTextSVG +ConnectPaypalSVG +ConnectSVG +ConnectMobileSVG +disconnectAccountSVG +MiruLogoSVG +MiruLogoWatermarkSVG +DeleteIconSVG +ReportcalendarIcon +CalendarHoverIcon +HoursIcon +HoursHoverIcon +OverdueOutstandingIcon +OverdueOutstandingHoverIcon +RevenueIcon +RevenueHoverIcon +AccountsAgingIcon +AccountsAgingHoverIcon +Switcher +EmptyState +NoSearchResultsState +BlurredMiruLogo +TransparentMiruLogo +MiruTimeTrackingScreen +MiruReportAndAnalysisScreen +MiruPaymentAndInvoicesScreen +MiruManagingProjectsScreen +MiruManagingClientsScreen +MiruManagingEmployeesScreen +MoreOptionIcon +GreenCheckCirleIcon +deleteImageIcon +Animation_404 +GoogleCalendarIcon +VacationIconSVG +BabyIconSVG +CakeIconSVG +FlowerIconSVG +CarIconSVG +UserIconSVG +CalendarBlackIconSVG +MedicineIconSVG +``` \ No newline at end of file diff --git a/docs/contributing-guide/icons/miruicons.md b/docs/contributing-guide/icons/miruicons.md new file mode 100644 index 0000000..dcf9891 --- /dev/null +++ b/docs/contributing-guide/icons/miruicons.md @@ -0,0 +1,60 @@ +--- +id: miruicons +title: Miru Icons +--- + +## A Guide to Using Icons in the App and Adding New Icons + +Icons play a crucial role in user interface (UI) design, offering visual cues that enhance user experience and navigation. However, managing a consistent set of icons across app can be challenging. + +MiruIcons, a solution designed to simplify icon management, promote UI consistency, and save development time. In this guide, we'll explore how to use MiruIcons and even how to add new icons when they are not yet available in the collection. + +#### What Are MiruIcons? +MiruIcons is a comprehensive collection of reusable icons tailored for your app's needs. This collection includes a mix of icons, ranging from popular third-party icons to custom-designed ones. By centralizing icons in one place, MiruIcons ensures that our app maintains a cohesive and consistent visual identity. + +#### Benefits of Using MiruIcons +- **UI Consistency:** MiruIcons enforces a unified style, preventing the use of disparate icons across our app. +- **Reuse and Efficiency:** Developers can easily import and reuse icons, reducing the need to create icons from scratch. +- **Scalability:** As our app grows, MiruIcons can expand to accommodate new icons seamlessly. + +### Using MiruIcons + +#### Importing MiruIcons +To get started with MiruIcons, you'll need to import the icons into components. The following examples demonstrate how to do this: + +``` +import { CaretCircleLeftIcon } from "miruIcons"; +import { SearchIcon } from "miruIcons"; +import { XIcon } from "miruIcons"; +``` + +#### Importing Multiple Icons + +``` +import { PencilIcon, DeleteIcon } from "miruIcons"; +import { SearchIcon, FilterIcon } from "miruIcons"; +``` + +### Adding New Icons to MiruIcons + +One of the strengths of MiruIcons is its flexibility. If you need an icon that isn't already in the collection, you can easily add it. Follow these steps: + +- **Step 1: Prepare the Icon File** +Before adding a new icon, you'll need the icon's SVG file or import it from `phosphor-react` package or you can even add gif file. Basically you can create your own or obtain one that suits your needs. Ensure the file adheres to any format or dimension requirements. + +- **Step 2: Add the Icon to the MiruIcons Folder** +Next, place the newly acquired icon file in the appropriate MiruIcons folder. It's essential to maintain a structured hierarchy for icons to keep things organized. +Export the newly added icon from the `index.tsx` file of MiruIcons. + +-- **Step 3: Import and Use the New Icon** +With the icon file in place, you can import and use it just like any other MiruIcon: + +``` +import { NewCustomIcon } from "miruIcons"; +``` + +Congratulations! You've successfully added a new icon to MiruIcons. + + +### Conclusion +MiruIcons simplifies the process of managing icons in our app, offering both existing icons for consistency and an easy way to add new ones. By following the steps outlined in this guide, you can enhance our app's UI while maintaining a cohesive design. \ No newline at end of file From 6bf33efadc1dfbf5c89b0d600e48ed824b61767c Mon Sep 17 00:00:00 2001 From: prasanthchaduvula Date: Tue, 3 Oct 2023 10:11:22 +0530 Subject: [PATCH 2/3] added miru icons docs --- docs/contributing-guide/icons/list.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/contributing-guide/icons/list.md b/docs/contributing-guide/icons/list.md index 62bf279..7cd490c 100644 --- a/docs/contributing-guide/icons/list.md +++ b/docs/contributing-guide/icons/list.md @@ -3,7 +3,7 @@ id: iconslist title: List of Icons --- -## Guide contains the list of all availbale Miru icons +## Guide contains the list of all available Miru icons ``` WarningTriangleSVG From 4f8b6db03a081b8b3685a78b5d19e1c64cddfce3 Mon Sep 17 00:00:00 2001 From: prasanthchaduvula Date: Tue, 3 Oct 2023 11:57:59 +0530 Subject: [PATCH 3/3] fixed the pointer typo on icons doc --- docs/contributing-guide/icons/miruicons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/contributing-guide/icons/miruicons.md b/docs/contributing-guide/icons/miruicons.md index dcf9891..c38fa94 100644 --- a/docs/contributing-guide/icons/miruicons.md +++ b/docs/contributing-guide/icons/miruicons.md @@ -46,7 +46,7 @@ Before adding a new icon, you'll need the icon's SVG file or import it from `pho Next, place the newly acquired icon file in the appropriate MiruIcons folder. It's essential to maintain a structured hierarchy for icons to keep things organized. Export the newly added icon from the `index.tsx` file of MiruIcons. --- **Step 3: Import and Use the New Icon** +- **Step 3: Import and Use the New Icon** With the icon file in place, you can import and use it just like any other MiruIcon: ```