Logo Component

Official City of Philadelphia logo component for Vue 3 applications.

Features

• Multiple logo variants (City, Department, Interdepartmental)
• Single-line and stacked layouts
• Optional "City of Philadelphia" tagline
• Color scheme variants (default, on-primary, black, white)
• Bell-only option
• Built-in link support with hover effect
• Scalable via font-size (uses em units)
• TypeScript support with full type definitions

Installation

npm install @phila/phila-ui-logo
# or
yarn add @phila/phila-ui-logo
# or
pnpm add @phila/phila-ui-logo

Usage

<script setup lang="ts">
import { Logo } from "@phila/phila-ui-logo";
</script>

<template>
  <Logo />
</template>

Props

| Prop | Type | Default | Description | | ------------------ | ------------------------------------------------- | ----------- | ----------------------------------------------------------- | | variant | 'city' \| 'department' \| 'interdepartmental' | 'city' | The type of logo to display | | layout | 'single-line' \| 'stacked' | 'stacked' | Text layout arrangement | | showCityTagline | boolean | false | Show "CITY OF PHILADELPHIA" tagline below | | departmentName | string | undefined | Department name (for department/interdepartmental variants) | | parentDepartment | string | undefined | Parent department name (interdepartmental only) | | colorScheme | 'default' \| 'on-primary' \| 'black' \| 'white' | 'default' | Color scheme for the logo | | bellOnly | boolean | false | Show only the bell icon without text | | href | string | undefined | Link URL - wraps logo in an anchor tag when provided | | to | RouteLocationRaw | undefined | Vue Router route - wraps logo in a RouterLink when provided | | className | string | undefined | Additional CSS classes to apply |

Examples

City of Philadelphia (Stacked)

<Logo variant="city" layout="stacked" />

City of Philadelphia (Single Line)

<Logo variant="city" layout="single-line" />

Department Logo

<Logo variant="department" layout="stacked" department-name="Parks & Recreation" />

Department with City Tagline

<Logo variant="department" layout="stacked" department-name="Parks & Recreation" show-city-tagline />

Interdepartmental Logo

<Logo
  variant="interdepartmental"
  parent-department="Department of Public Health"
  department-name="Office of Emergency Management"
  show-city-tagline
/>

On Primary Background

<div style="background-color: var(--Schemes-Primary); padding: 1rem;">
  <Logo color-scheme="on-primary" />
</div>

As a Link

<Logo href="https://www.phila.gov" />

With Vue Router

<Logo :to="{ name: 'home' }" />

Bell Only

<Logo bell-only />

Scaling the Logo

The logo uses em units internally, so you can scale it by setting font-size:

<Logo style="font-size: 0.5rem" />
<!-- Smaller -->
<Logo style="font-size: 2rem" />
<!-- Larger -->

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

License

MIT