AWS Icons Sample in React Project

This project demonstrates how to use AWS service icons in a React application. It includes various components for rendering individual icons, grouped icons, and categorized icons in an accordion layout. The sample also supports customizing icon sizes.

[Demo]

Table of Contents

• Overview
• Features
• Components
  • IconWithAWSSample
  • AWSIconGroup
  • AWSAllIconSingleLayout
  • AWSAllIconCategoryInAccordionLayout
• AWSIconTypes
• Icon Sizes
• generateAWSCategoryIcon

Features

• Dynamic Layouts: Display AWS icons in a flexible grid layout or categorized accordion.
• Icon Sizes: Choose from multiple sizes (Size16, Size32, Size64, Size128, Size256).
• Icon Interaction: Includes interactivity such as tooltips, badges, and clickable icons.

Components

IconWithAWSSample

A sample component that displays AWS icons with selectable sizes and a demo of all AWS icons.

import { IconWithAWSSample } from "./IconWithAWSSample";

<IconWithAWSSample />;

AWSIconGroup

Renders a group of AWS icons in a flexible, wrap-around layout.

import { AWSIconGroup } from "./AWSIconGroup";

<AWSIconGroup
  jSXIcons={[
    <AWSIcon key={1} icon={{ key: "EC2" }} />,
    <AWSIcon key={2} icon={{ key: "Lambda" }} />,
  ]}
/>;

AWSAllIconSingleLayout

Displays all AWS icons in a flat layout. This component renders all AWS icons with a specific size.

import { AWSAllIconSingleLayout } from "./AWSIconGroup";

<AWSAllIconSingleLayout size="Size32" />;

AWSAllIconCategoryInAccordionLayout

Displays AWS icons grouped by category in an accordion layout for easy navigation.

import { AWSAllIconCategoryInAccordionLayout } from "./AWSIconGroup";

<AWSAllIconCategoryInAccordionLayout size="Size32" />;

AWSIconTypes

AWSIconTypes contains the available AWS services, categorized by their functionality. Each AWS service is represented by a unique key and category.

Example:

export const AWSIconTypes = {
  "AWS-Data-Exchange": { key: "AWS-Data-Exchange", category: "Analytics" },
  "AWS-Data-Pipeline": { key: "AWS-Data-Pipeline", category: "Analytics" },
  // More services...
}

Each entry contains:

• key: The unique identifier for the AWS service.
• category: The category of the AWS service (e.g., "Analytics", "App-Integration").