Skip to content

Commit 5dcc9be

Browse files
cody-dot-jscody-dot-js
authored
feat(icons): rename NgrokIcon to NgrokWordmarkIcon and add NgrokLettermarkIcon (#1072)
Rename the existing NgrokIcon to NgrokWordmarkIcon for clarity and add a new NgrokLettermarkIcon that renders the ngrok "n" lettermark. Update all usages in the docs site to use the new NgrokWordmarkIcon name.
1 parent 4958f75 commit 5dcc9be

File tree

6 files changed

+49
-12
lines changed

6 files changed

+49
-12
lines changed

‎.changeset/rename-ngrok-icon-add-lettermark.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ngrok/mantle": patch
3+
---
4+
5+
Rename `NgrokIcon` to `NgrokWordmarkIcon` and add new `NgrokLettermarkIcon`

‎apps/www/app/components/footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { ComponentProps } from "react";
22

33
import { cx } from "@ngrok/mantle/cx";
44
import { Icon } from "@ngrok/mantle/icon";
5-
import { NgrokIcon } from "@ngrok/mantle/icons";
5+
import { NgrokWordmarkIcon } from "@ngrok/mantle/icons";
66
import { Popover } from "@ngrok/mantle/popover";
77
import { CaretDownIcon, RssSimpleIcon, XLogoIcon, YoutubeLogoIcon } from "@phosphor-icons/react";
88
import { BlueskyIcon } from "./icons/bluesky";
@@ -413,7 +413,7 @@ export function PrimaryFooter({ className, ...props }: Props) {
413413
<ThemeSwitcher />
414414
</div>
415415
<div className="relative ml-auto max-w-full">
416-
<NgrokIcon
416+
<NgrokWordmarkIcon
417417
width="504"
418418
height="187"
419419
className="h-auto w-full max-w-126 text-neutral-200"

‎apps/www/app/components/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Command, MetaKey } from "@ngrok/mantle/command";
44
import { cx } from "@ngrok/mantle/cx";
55
import { DropdownMenu } from "@ngrok/mantle/dropdown-menu";
66
import type { SvgAttributes } from "@ngrok/mantle/icon";
7-
import { NgrokIcon } from "@ngrok/mantle/icons";
7+
import { NgrokWordmarkIcon } from "@ngrok/mantle/icons";
88
import { Kbd } from "@ngrok/mantle/kbd";
99
import { useTheme } from "@ngrok/mantle/theme";
1010
import type { WithStyleProps } from "@ngrok/mantle/types";
@@ -90,7 +90,7 @@ export function Layout({ children, className, currentVersion, style }: Props) {
9090
to={href("/")}
9191
className="px-1 flex focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent rounded"
9292
>
93-
<NgrokIcon className="xs:block hidden h-8.5 w-auto text-blue-600" />
93+
<NgrokWordmarkIcon className="xs:block hidden h-8.5 w-auto text-blue-600" />
9494
<MantleLogo />
9595
</Link>
9696

‎apps/www/app/features/icons/icon-data.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { Code } from "@ngrok/mantle/code";
22
import {
33
AutoThemeIcon,
4-
NgrokIcon,
4+
NgrokWordmarkIcon,
5+
NgrokLettermarkIcon,
56
SortIcon,
67
ThemeIcon,
78
TrafficPolicyFileIcon,
@@ -127,15 +128,29 @@ const iconData = [
127128
],
128129
},
129130
{
130-
id: "NgrokIcon",
131-
name: "NgrokIcon",
132-
description: <p className="text-muted">The ngrok logo icon</p>,
133-
Icon: <NgrokIcon />,
131+
id: "NgrokLettermarkIcon",
132+
name: "NgrokLettermarkIcon",
133+
description: <p className="text-muted">The ngrok logo lettermark "n" icon</p>,
134+
Icon: <NgrokLettermarkIcon />,
134135
tags: [
135136
//,
136137
"brand",
137138
"logo",
138139
"ngrok",
140+
"lettermark",
141+
],
142+
},
143+
{
144+
id: "NgrokWordmarkIcon",
145+
name: "NgrokWordmarkIcon",
146+
description: <p className="text-muted">The ngrok logo wordmark icon</p>,
147+
Icon: <NgrokWordmarkIcon />,
148+
tags: [
149+
//,
150+
"brand",
151+
"logo",
152+
"ngrok",
153+
"wordmark",
139154
],
140155
},
141156
{

‎packages/mantle/src/components/icons/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@ export {
55
AutoThemeIcon,
66
ThemeIcon,
77
} from "./theme.js";
8-
export { NgrokIcon } from "./ngrok.js";
8+
export { NgrokWordmarkIcon, NgrokLettermarkIcon } from "./ngrok.js";
99
export type { InlineIconProps } from "./types.js";

‎packages/mantle/src/components/icons/ngrok.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
11
import type { InlineIconProps } from "./types.js";
22

33
/**
4-
* An inline svg icon that renders the ngrok logo. Fill color is determined by the `color` CSS property.
4+
* An inline svg icon that renders the ngrok wordmark logo. Fill color is determined by the `color` CSS property.
55
*/
6-
export function NgrokIcon(props: Omit<InlineIconProps, "color">) {
6+
function NgrokWordmarkIcon(props: Omit<InlineIconProps, "color">) {
77
return (
88
<svg viewBox="0 0 94 36" fill="currentColor" {...props}>
99
<path d="M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47Zm-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877v-.003Zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26-.001-.232Zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617-.002.002Zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502Z" />
1010
</svg>
1111
);
1212
}
13+
14+
/**
15+
* An inline svg icon that renders the ngrok lettermark "n" logo. Fill color is determined by the `color` CSS property.
16+
*/
17+
function NgrokLettermarkIcon(props: Omit<InlineIconProps, "color">) {
18+
return (
19+
<svg viewBox="0 0 27 27" fill="currentColor" {...props}>
20+
<path d="M22.5447 5.5673c-.3698-.46161-.7872-.85998-1.2346-1.21409-.3996-.30985-.823-.581755-1.2823-.803074-.2206-.107498-.4532-.196027-.6978-.278231-.3519-.120144-.7336-.2023476-1.1272-.271905h-4.9622L9.96024 6.96477V3.0822036H3V24h6.96024V9.88618H16.497l.5428-.01265V23.9937H24V10.91057c0-1.11292-.1014-2.10569-.3042-2.97832-.2028-.86631-.5845-1.65041-1.1511-2.36495" />
21+
</svg>
22+
);
23+
}
24+
25+
export {
26+
//,
27+
NgrokWordmarkIcon,
28+
NgrokLettermarkIcon,
29+
};

0 commit comments

Comments
 (0)