Icon With Badge Component

A simple and reusable component for displaying an icon with a badge using Styled Components in React. The badge is ideal for showing counts, notifications, or other small bits of information.

[Demo]

Features

• Built with styled-components for dynamic styling.
• Easy to customize for different use cases.
• Minimal and responsive design.

Prerequisites

• Node.js installed on your system.
• React and styled-components in your project.

Install styled-components if not already available:

npm install styled-components

Usage

1. Import Components

Use the provided styled components to build your IconWithBadge:

import {
  IconWithBadgeContainer,
  BadgeContainer,
  BadgeText,
} from "./IconWithBadgeSample";

2. Create the Icon With Badge Here's an example of how to use the components:

const IconWithBadge = () => (
  <IconWithBadgeContainer>
    <img src="icon.png" alt="icon" style={{ width: 24, height: 24 }} />
    <BadgeContainer>
      <BadgeText>5</BadgeText>
    </BadgeContainer>
  </IconWithBadgeContainer>
);

export default IconWithBadge;

3. Render in Your App Use the IconWithBadge component in your app:

import React from "react";
import IconWithBadge from "./IconWithBadge";

function App() {
  return (
    <div>
      <h1>Welcome to Icon With Badge Example</h1>
      <IconWithBadge />
    </div>
  );
}

export default App;

Styling Overview

The styling is defined using Styled Components. Below is a quick overview of each styled component:

IconWithBadgeContainer:

• Wraps the entire component.
• Ensures correct relative positioning for the badge.

BadgeContainer:

• Positions the badge on the top-right of the icon.
• Fixed size to maintain layout.

BadgeText:

• Displays text or count in the badge.
• Centered content with responsive design.