@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

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