inline-logo-vue

Vue 3 components, directive, and plugin for inline-logo — drop brand logos into text with full selectability.

Install

npm install inline-logo-vue

import 'inline-logo/style.css';

Usage

Plugin (recommended)

Register everything globally:

// main.ts
import { createApp } from 'vue';
import { InlineLogoPlugin } from 'inline-logo-vue';
import 'inline-logo/style.css';

createApp(App)
  .use(InlineLogoPlugin, {
    logos: {
      google: { logo: '/logos/google.svg', pad: 2, offsetY: 1 },
      github: { logo: '/logos/github.svg', scale: 0.35, offsetY: 1 },
    },
  })
  .mount('#app');

<template>
  <!-- Shorthand component -->
  <p>Push to <L name="github">GitHub</L>.</p>

  <!-- Directive -->
  <p>Search on <span v-inline-logo="'google'">Google</span>.</p>
</template>

Direct component

<script setup>
import { InlineLogo } from 'inline-logo-vue';
</script>

<template>
  <p>
    Works with any
    <InlineLogo logo="/logos/google.svg" :offset-y="1">
      Google
    </InlineLogo>
    product.
  </p>
</template>

Provider + shorthand

<script setup>
import { LogoProvider, L } from 'inline-logo-vue';

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

<template>
  <LogoProvider :logos="logos">
    <p>
      Push to <L name="github">GitHub</L> and search
      on <L name="google">Google</L>.
    </p>
  </LogoProvider>
</template>

Directive

Use v-inline-logo with either a logo name (string) or a config object:

<template>
  <!-- With LogoProvider (pass logo name) -->
  <span v-inline-logo="'google'">Google</span>

  <!-- Direct config (pass object) -->
  <span v-inline-logo="{ logo: '/logos/npm.svg', pad: 4 }">npm</span>
</template>

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) | | logo-width | number | | Logo visual width % (default: 100) | | logo-height | number | | Logo visual height % (default: 100) | | offset-x | number | | Horizontal nudge in px (default: 0) | | offset-y | number | | Vertical nudge in px (default: 0) |

<LogoProvider>

| Prop | Type | Required | Description | |------|------|----------|-------------| | logos | LogoRegistry | ✓ | Map of logo names to configs |

<L>

| Prop | Type | Required | Description | |------|------|----------|-------------| | name | string | ✓ | Logo name (must match a key in the nearest LogoProvider) |

v-inline-logo directive

Accepts either a string (logo name from provider) or an InlineLogoConfig object.

InlineLogoPlugin

Vue plugin that registers <InlineLogo>, <L>, and v-inline-logo globally. Accepts optional { logos } config.

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: vue >= 3.3.0
• Core: inline-logo (installed automatically)

License

MIT