PetalComponents.BrandIcon (petal_components v4.11.2)

Copy Markdown View Source

Brand glyphs for the providers apps sign in with - inline SVGs, no icon font, no asset pipeline, no JavaScript. Heroicons deliberately ships no logos, so these live here.

<.brand_icon name="github" class="w-5 h-5" />
<.brand_icon name="google" colored class="w-5 h-5" />

Monochrome by default: every path is currentColor, so the glyph tints like any icon. colored switches to the official brand treatment - Google's four colours, GitLab orange, Discord blurple. The black brands (GitHub, Apple, X) stay currentColor even when colored: their brand colour IS black, and currentColor is what keeps them legible in dark mode.

Logos are trademarks of their owners; each brand publishes usage guidelines that are the consuming app's responsibility.

Summary

Functions

brand_icon(assigns)

One brand glyph. Decorative by default (aria-hidden); pass role="img" and an aria-label when the icon stands alone.

names()

Functions

brand_icon(assigns)

One brand glyph. Decorative by default (aria-hidden); pass role="img" and an aria-label when the icon stands alone.

Attributes

  • name (:string) (required) - Must be one of "google", "github", "apple", "x", "facebook", "microsoft", "gitlab", "discord", or "linkedin".
  • colored (:boolean) - official brand colours instead of currentColor. Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["role", "aria-label", "aria-hidden"].

names()