> ## Documentation Index
> Fetch the complete documentation index at: https://docs.swiftcn.lol/llms.txt
> Use this file to discover all available pages before exploring further.

# Avatar

# CustomAvatar Component in SwiftUI

## Overview

`CustomAvatar` is a SwiftUI component designed to display user avatars. It supports both URL-based images and fallback text-based avatars. Customize the fallback background and foreground colors, as well as the dimensions of the avatar.

## Preview

<div style={{ display: "flex", justifyContent: "center" }}>
  <div style={{ marginRight: "40px" }}>
    <img src="https://www.swiftcn.lol/avatar.png" width="80" />

    <p>Avatar</p>
  </div>

  <div>
    <img src="https://www.swiftcn.lol/avatarFallback.png" width="80" />

    <p>Avatar with fallback text</p>
  </div>
</div>

## Installation

Include the `CustomAvatar.swift` file in your SwiftUI project. [File Link](https://github.com/Swiftcn-UI/swiftcn-playground/blob/main/Swiftcn%20Playground.swiftpm/Components/CustomAvatar.swift)

## Properties

### Required Properties

* `imageURL: String` - The URL of the image to display.
* `fallbackText: String` - The text to display if the image loading fails.
* `width: CGFloat` - The width of the avatar view.
* `height: CGFloat` - The height of the avatar view.

### Optional Properties

* `fallbackBgColor: Color` - Background color for the fallback view. Default: `.black`.
* `fallbackFgColor: Color` - Foreground color for the fallback text. Default: `.white`.

## Usage

### Basic Usage

Here's how you can use the `CustomAvatar` component:

```swift theme={null}
CustomAvatar(
    imageURL: "https://example.com/image.jpg",
    fallbackText: "JD",
    fallbackBgColor: .blue,
    fallbackFgColor: .white,
    width: 100,
    height: 100
)
```