inline-logo-react

React components for inline-logo — drop brand logos into text with full selectability.

Install

npm install inline-logo-react

import 'inline-logo/style.css';

Usage

Direct component

import { InlineLogo } from 'inline-logo-react';
import 'inline-logo/style.css';

function App() {
  return (
    <p>
      Works with any{' '}
      <InlineLogo logo="/logos/google.svg" offsetY={1}>
        Google
      </InlineLogo>{' '}
      product.
    </p>
  );
}

Provider + shorthand

Define logos once, use the <L> shorthand anywhere:

import { LogoProvider, L } from 'inline-logo-react';
import 'inline-logo/style.css';

const logos = {
  google: { logo: '/logos/google.svg', pad: 2, offsetY: 1 },
  github: { logo: '/logos/github.svg', scale: 0.35, offsetY: 1 },
};

function App() {
  return (
    <LogoProvider logos={logos}>
      <p>
        Push to <L name="github">GitHub</L> and search
        on <L name="google">Google</L>.
      </p>
    </LogoProvider>
  );
}

useLogo hook

For advanced cases where you need the style object directly:

import { useLogo } from 'inline-logo-react';

function CustomLogo({ name }: { name: string }) {
  const style = useLogo(name);
  if (!style) return null;

  return (
    <span className="inline-logo" style={style}>
      {name}
    </span>
  );
}

Components

<InlineLogo>

| Prop | Type | Required | Description | |------|------|----------|-------------| | logo | string | ✓ | URL or data URI to the logo image | | scale | number | | Text slot width multiplier (default: 1) | | pad | number | | Horizontal padding in px (default: 0) | | logoWidth | number | | Logo visual width % (default: 100) | | logoHeight | number | | Logo visual height % (default: 100) | | offsetX | number | | Horizontal nudge in px (default: 0) | | offsetY | number | | Vertical nudge in px (default: 0) | | children | ReactNode | ✓ | The selectable/copyable text | | className | string | | Additional CSS class |

<LogoProvider>

| Prop | Type | Required | Description | |------|------|----------|-------------| | logos | LogoRegistry | ✓ | Map of logo names to configs | | children | ReactNode | ✓ | Child components |

<L>

| Prop | Type | Required | Description | |------|------|----------|-------------| | name | string | ✓ | Logo name (must match a key in the nearest LogoProvider) | | children | ReactNode | | Override the display text (defaults to the logo name) | | className | string | | Additional CSS class |

useLogo(name): CSSProperties | null

Returns the inline style object for a logo, or null if not found.

Logo sources

This package does not ship logos. Bring your own, or use:

• Simple Icons — 3000+ brand SVGs, CDN: https://cdn.simpleicons.org/{name}
• Vector Logo Zone — consistent and clean SVG format logos, great for optical typography matching.
• Brandfetch — logo API

Dependencies

• Peer: react >= 17.0.0
• Core: inline-logo (installed automatically)

License

MIT