Icons and Images

Overview

There are a lot of places in views where images or icons can be displayed

Icons

Icons can be used in all places where regular images are accepted

src/icon.tsx

import { ReactElement } from "react";
import { Detail, Icons } from "@project-gauntlet/api/components";

export default function Example(): ReactElement {
    return (
        <Detail>
            <Detail.Content>
                <Detail.Content.Image source={Icons.Eject}/>
            </Detail.Content>
        </Detail>
    )
}

gauntlet.toml

[[entrypoint]]
id = 'icon'
name = 'Icon'
path = 'src/icon.tsx'
type = 'view'
description = ''

Image from URL

src/url.tsx

import { ReactElement } from "react";
import { Detail } from "@project-gauntlet/api/components";

export default function Example(): ReactElement {
    return (
        <Detail>
            <Detail.Content>
                <Detail.Content.Image source={{ url: "https://github.com/project-gauntlet/gauntlet/blob/main/docs/logo.png?raw=true" }}/>
            </Detail.Content>
        </Detail>
    )
}

gauntlet.toml

[[entrypoint]]
id = 'url'
name = 'Url'
path = 'src/url.tsx'
type = 'view'
description = ''

[permissions]
network = ["github.com"]

Image from Assets

src/asset.tsx

import { ReactElement } from "react";
import { Detail } from "@project-gauntlet/api/components";

export default function Example(): ReactElement {
    return (
        <Detail>
            <Detail.Content>
                <Detail.Content.Image source={{ asset: "logo.png" }}/>
            </Detail.Content>
        </Detail>
    )
}

gauntlet.toml

[[entrypoint]]
id = 'asset'
name = 'Asset'
path = 'src/asset.tsx'
type = 'view'
description = ''