Brand

FAST mark

The wordmark and the bolt, inline, painted by the theme and the accent.

stablev0.1.0 Chromium 103 ui-scale safe

Install

Copies the file into components/ds/, with its registry dependencies and npm packages. See Installation for the one-time setup.
bunx shadcn@3 add @fastrp/fast-mark

Examples

Default

Open alone

API

<FastMark />Takes the props of what it wraps

The FAST wordmark with its bolt, inline so it takes the theme: the letters are `fill-foreground` and the bolt and the two leading bars `fill-primary` — the active city's accent. Size it with a height (`h-6`); the `aspect-ratio` derives the width, so no `width`/`height` attributes.

<FastBolt />Takes the props of what it wraps

The bolt on its own, in `currentColor` — for a mark that brings its own ground.

Dependencies

npm

  • None

Registry

  • None

Source

components/ds/fast-mark.tsxShow
import type { SVGProps } from 'react';

// @fast-ds [email protected]

type MarkProps = Omit<SVGProps<SVGSVGElement>, 'viewBox'>;

/**
 * The FAST wordmark with its bolt, inline so it takes the theme: the letters are `fill-foreground`
 * and the bolt and the two leading bars `fill-primary` — the active city's accent. Size it with a
 * height (`h-6`); the `aspect-ratio` derives the width, so no `width`/`height` attributes.
 */
export function FastMark({ style, ...props }: MarkProps) {
  return (
    <svg
      viewBox="0 0 555 222"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      style={{ aspectRatio: '555 / 222', ...style }}
      {...props}
    >
      <path
        className="fill-primary"
        d="M19.3984 51.9551H47.4179L23.7091 200.672H19.3984V51.9551Z"
      />
      <path className="fill-primary" d="M8.62136 51.9551H0V200.673H8.62136V51.9551Z" />
      <path
        className="fill-primary"
        d="M464.246 96.8477L386.1 96.0705C384.167 96.0512 382.936 93.985 383.837 92.2693L428.08 8.00346C429.41 5.46989 426.261 2.9592 424.104 4.83308L288.138 122.91C286.352 124.462 287.412 127.408 289.775 127.461L361.107 129.052C362.966 129.093 364.176 131.034 363.398 132.728L326.097 213.992C324.941 216.511 328.008 218.849 330.115 217.055L465.896 101.415C467.719 99.8632 466.638 96.8713 464.246 96.8477Z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        className="fill-foreground"
        d="M437.348 137.299C439.014 135.867 440.658 134.411 442.289 132.926C444.81 130.629 447.342 128.383 449.973 126.211C455.734 121.561 461.314 116.78 466.781 111.785L469.289 109.426C469.592 109.155 469.887 108.895 470.174 108.643C471.543 107.438 472.298 106.525 473.108 105.2C474.33 103.201 474.806 100.841 474.727 98.5C474.581 97.2139 474.448 96.3204 473.835 95.0423C472.97 93.2353 471.438 91.8199 469.639 90.9377C467.553 89.9148 465.558 89.3412 462.872 89.0276L459.09 88.9944C456.896 88.9612 454.701 88.9339 452.506 88.9241C450.942 88.9182 449.379 88.9065 447.815 88.8889C443.711 88.8401 439.607 88.7991 435.502 88.7737C431.252 88.7464 427.001 88.7073 422.75 88.6624C414.482 88.5745 406.213 88.5022 397.944 88.4436L395.289 88.4261L397.57 84.0628C401.069 77.3675 404.568 70.6721 408.223 64.0589C410.505 59.9528 412.759 55.832 414.992 51.6992H555L547.758 97.22H503.479L487.133 200.676H427.335L437.348 137.299ZM336.549 173.966C335.557 176.095 334.56 178.221 333.554 180.344C332.298 182.994 331.048 185.647 329.799 188.301L327.352 193.489L327.287 193.623C326.158 195.973 325.03 198.32 323.919 200.676H281.105L277.795 177.295H227.101L215.721 200.676H155.923L237.861 51.6992H309.039L317.163 87.8071C314.835 89.7975 312.543 91.8289 310.289 93.9261C308.489 95.6018 306.685 97.2561 304.847 98.8772C303.749 99.844 302.638 100.799 301.508 101.739C299.703 103.192 297.904 104.649 296.109 106.114L293.289 108.426C292.573 109.003 291.832 109.581 291.082 110.166C287.159 113.225 282.984 116.481 280.769 120.836C280.388 121.584 280.174 122.405 280.095 123.24C279.824 126.094 280.097 128.422 281.386 130.905C281.925 131.944 282.76 132.799 283.742 133.436C285.812 134.78 287.607 135.471 290.396 135.864L293.916 135.951L297.357 136.051C298.251 136.074 299.146 136.096 300.041 136.114C301.497 136.143 302.952 136.176 304.408 136.215C308.227 136.324 312.046 136.422 315.865 136.508C319.821 136.596 323.776 136.696 327.733 136.799C327.885 136.803 328.037 136.807 328.189 136.811L336.549 173.966ZM35.3125 200.676L58.9005 51.6992H215.534L190.747 97.22H111.456L108.353 116.256H178.773L157.478 154.742H102.352L95.1103 200.676H35.3125ZM241.378 142.741H274.691L266.828 91.8403H266.415L241.378 142.741Z"
      />
    </svg>
  );
}

/** The bolt on its own, in `currentColor` — for a mark that brings its own ground. */
export function FastBolt({ style, ...props }: MarkProps) {
  return (
    <svg
      viewBox="52 48 174 184"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      style={{ aspectRatio: '174 / 184', ...style }}
      {...props}
    >
      <path
        fill="currentColor"
        d="M221.157 140.699L149.341 127.488C147.565 127.162 146.766 125.08 147.872 123.659L202.208 53.8791C203.842 51.7811 201.348 48.9874 199.059 50.3513L54.8245 136.297C52.9297 137.426 53.4296 140.284 55.5968 140.71L121.007 153.572C122.713 153.907 123.513 155.871 122.523 157.292L75.0629 225.444C73.5917 227.557 76.0379 230.18 78.2672 228.881L221.939 145.129C223.867 144.005 223.355 141.103 221.157 140.699Z"
      />
    </svg>
  );
}