@litforge/logo-img

A simple logo image component with optional styling options, built with Lit.

Overview

The LogoImg component provides a consistent way to display logos with support for rounded corners, elevation, and customizable sizing.

Installation

npm install @litforge/logo-img
# or
pnpm add @litforge/logo-img
# or
yarn add @litforge/logo-img

Basic Usage

<script type="module">
  import '@litforge/logo-img';
</script>

<logo-img
  src="/logo.png"
  alt="Company Logo"
  size="48px"
></logo-img>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | src | string | undefined | Image source URL | | alt | string | undefined | Image alt text | | size | string | undefined | Image size (width and height) | | rounded | boolean | false | Applies rounded corners | | elevated | boolean | false | Applies box shadow | | background | string | undefined | Background color | | borderColor | string | undefined | Border color |

Examples

Basic Logo

<logo-img src="/logo.png" alt="Logo"></logo-img>

Rounded with Size

<logo-img
  src="/logo.png"
  alt="Logo"
  size="64px"
  rounded
></logo-img>

With Styling

<logo-img
  src="/logo.png"
  alt="Logo"
  size="48px"
  rounded
  elevated
  background="#ffffff"
  border-color="#e2e8f0"
></logo-img>

Styling

The component uses CSS variables for theming:

logo-img {
  --lf-logo-img-radius: 8px;
  --lf-logo-img-shadow: 0 1px 3px rgba(0,0,0,0.08);
  /* ... more variables */
}

TypeScript

import { LogoImg } from '@litforge/logo-img';

License

Part of the LitForge component library.