A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
nekomimi.pet
1import React from "react";
2
3/**
4 * Configuration for the `BlueskyIcon` component.
5 */
6export interface BlueskyIconProps {
7 /**
8 * Pixel dimensions applied to both the width and height of the SVG element.
9 * Defaults to `16`.
10 */
11 size?: number;
12 /**
13 * Hex, RGB, or any valid CSS color string used to fill the icon path.
14 * Defaults to the standard Bluesky blue `#1185fe`.
15 */
16 color?: string;
17 /**
18 * Accessible title that will be exposed via `aria-label` for screen readers.
19 * Defaults to `'Bluesky'`.
20 */
21 title?: string;
22}
23
24/**
25 * Renders the Bluesky butterfly glyph as a scalable, accessible SVG.
26 *
27 * @param size - Pixel dimensions applied to both width and height of the SVG.
28 * @param color - CSS color string used to fill the icon path.
29 * @param title - Accessible label exposed via `aria-label`.
30 * @returns A JSX `<svg>` element suitable for inline usage.
31 */
32export const BlueskyIcon: React.FC<BlueskyIconProps> = ({
33 size = 16,
34 color = "#1185fe",
35 title = "Bluesky",
36}) => (
37 <svg
38 xmlns="http://www.w3.org/2000/svg"
39 width={size}
40 height={size}
41 viewBox="0 0 16 16"
42 role="img"
43 aria-label={title}
44 focusable="false"
45 style={{ display: "block" }}
46 >
47 <path
48 fill={color}
49 d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.698-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948"
50 />
51 </svg>
52);
53
54export default BlueskyIcon;