@prideraiser/flags

Web components for displaying LGBTQ+ pride flags. Brought to you by Prideraiser.

About

A comprehensive library of pride flag web components built with vanilla TypeScript. Easily display any LGBTQ+ pride flag in your web applications with simple, accessible custom elements. No framework required!

Installation

Via npm

npm install @prideraiser/flags

Then import in your JavaScript/TypeScript:

import { PrideFlag } from '@prideraiser/flags';

Via CDN

Add this script tag to your HTML file:

<script type="module" src="https://unpkg.com/@prideraiser/flags@latest" async></script>

Then you can use the web components anywhere in your HTML:

<pride-flag flag-variant="trans" width="300" height="200"></pride-flag>

Usage Examples

Basic Example

<pride-flag flag-variant="trans" width="300" height="200"></pride-flag>

Current Awareness Period

<pride-flag flag-variant="current"></pride-flag>

Use flag-variant="current" to automatically display the flag for the current awareness period.

Attributes

Attribute Type Default Description
flag-variant string "progress-inclusive" The slug of the flag to display
width number 300 Width of the flag in pixels
height number 200 Height of the flag in pixels

Events

Event Description Detail
flag-loaded Fired when flag data is loaded successfully { flag: FlagData, awarenessPeriod: AwarenessPeriod | null }
flag-error Fired when flag fails to load (falls back to default flag) { error: string, awarenessPeriod: null }

The awarenessPeriod property is only present (non-null) when using flag-variant="current". It includes the awareness period name, dates, description, and related information.

Example: Listening for Events

const flag = document.querySelector('pride-flag');

flag.addEventListener('flag-loaded', (event) => {
  const { flag, awarenessPeriod } = event.detail;
  console.log('Loaded flag:', flag.name);
  if (awarenessPeriod) {
    console.log('Current period:', awarenessPeriod.name);
  }
});

flag.addEventListener('flag-error', (event) => {
  console.error('Failed to load flag:', event.detail.error);
});

Styling

Responsive Width

To make flags responsive to their container width, set the display to block: 

pride-flag {
  display: block;
}

The component maintains its aspect ratio automatically, so the height will scale proportionally with the width.

Custom Styling with CSS Parts

Use the ::part(flag) selector to style the SVG:

pride-flag::part(flag) {
  border: 2px solid #333;
  border-radius: 8px;
}

Available Flags

All flags are based on the community-maintained collection at prideraiser.org/brand.

Accessibility