chore(icons): Renamed *-warning and *-alert to *-exclamation-point (#5143)

* Rename icons

* Update other file

* Remove deprecation booleans
This commit is contained in:
Eric Fennis
2026-11-03 15:49:26 +01:00
committed by GitHub
parent aa0b77386c
commit 1980e3d59b
33 changed files with 87 additions and 19 deletions
@@ -56,7 +56,7 @@ When checking or adding a `$group:` marker:
- A marker must be exactly `"$group:"` followed by the name of an existing file in `groups/`, without the `.json` extension, in lowercase kebab-case.
- `$group:` is allowed **only** inside `tags`. It is not valid in `categories` or `contributors`.
- Groups are named after the variant suffix: `file-plus` uses `$group:plus`, `file-question-mark` uses `$group:question-mark`. Suffixes with the same meaning share a group: `mail-warning` uses `$group:exclamation-mark`, and every currency suffix uses `$group:currency`.
- Groups are named after the variant suffix: `file-plus` uses `$group:plus`, `file-question-mark` uses `$group:question-mark`. Suffixes with the same meaning share a group: `mail-exclamation-point` uses `$group:exclamation-mark`, and every currency suffix uses `$group:currency`.
- The same suffix can mean different things in different contexts — `-off` means "disabled" on `wifi-off` but "allergy free" on `wheat-off` — so only use the group when the icon carries the group's meaning, and keep context-specific tags as literals.
- Do not repeat a tag a group already provides, and do not use the same group twice in one array.
- Conventional order: the `$extends:` base icon first, then `$group:` markers, then the icon's own literal tags.
+1 -1
View File
@@ -2,5 +2,5 @@
"$schema": "../category.schema.json",
"title": "Notifications",
"description": "Icons for alerts, status updates, reminders, approvals, and attention states.",
"icon": "triangle-alert"
"icon": "triangle-exclamation-point"
}
@@ -6,7 +6,7 @@ import Calendar from '../../../data/iconDetails/calendar.ts';
import Clock from '../../../data/iconDetails/clock.ts';
import Bug from '../../../data/iconDetails/bug.ts';
import Rocket from '../../../data/iconDetails/rocket.ts';
import TriangleAlert from '../../../data/iconDetails/triangle-alert.ts';
import TriangleExclamationPoint from '../../../data/iconDetails/triangle-exclamation-point.ts';
import PartyPopper from '../../../data/iconDetails/party-popper.ts';
import Scissors from '../../../data/iconDetails/scissors.ts';
import Copy from '../../../data/iconDetails/copy.ts';
@@ -41,7 +41,7 @@ const CalendarIcon = createLucideIcon('calendar', Calendar.iconNode);
const ClockIcon = createLucideIcon('clock', Clock.iconNode);
const BugIcon = createLucideIcon('bug', Bug.iconNode);
const RocketIcon = createLucideIcon('rocket', Rocket.iconNode);
const AlertTriangleIcon = createLucideIcon('alert-triangle', TriangleAlert.iconNode);
const TriangleExclamationPointIcon = createLucideIcon('triangle-exclamation-point', TriangleExclamationPoint.iconNode);
const ScissorsIcon = createLucideIcon('scissors', Scissors.iconNode);
const CopyIcon = createLucideIcon('copy', Copy.iconNode);
const SaveIcon = createLucideIcon('save', Save.iconNode);
@@ -128,7 +128,7 @@ const prettyName = props.name
>
<div class="placeholder"></div>
<div class="badge badge-red">
<AlertTriangleIcon :size="20" />
<TriangleExclamationPointIcon :size="20" />
Alert
</div>
</div>
@@ -3,7 +3,7 @@ description: Learn the best practices for writing use cases for Lucide icons.
---
<script setup>
import { batteryLow, creditCard, crop, handshake, heading2, microchip, search, squareLetterP, triangleAlert, wifiOff } from '~/.vitepress/data/iconNodes';
import { batteryLow, creditCard, crop, handshake, heading2, microchip, search, squareLetterP, triangleExclamationPoint, wifiOff } from '~/.vitepress/data/iconNodes';
import LucideIcon from '~/.vitepress/theme/components/base/LucideIcon.vue';
</script>
@@ -120,10 +120,10 @@ The period adds **unnecessary punctuation** and makes entries inconsistent.
Use plain text only. Formatting belongs in documentation, not metadata values.
:::: example
::: do <LucideIcon name="triangle-alert" :iconNode="triangleAlert" /> Warning users about a destructive action
::: do <LucideIcon name="triangle-exclamation-point" :iconNode="triangleExclamationPoint" /> Warning users about a destructive action
This works in search, generated pages, and other places that use metadata.
:::
::: dont <LucideIcon name="triangle-alert" :iconNode="triangleAlert" /> <span>**Warning** users about a destructive action ⚠️</span>
::: dont <LucideIcon name="triangle-exclamation-point" :iconNode="triangleExclamationPoint" /> <span>**Warning** users about a destructive action ⚠️</span>
Markdown and emoji can **show up in generated UI** and make metadata **harder to reuse**.
:::
::::
+1 -1
View File
@@ -31,7 +31,7 @@ You can then reference the registered icons by name:
```html [app.html]
<svg lucideIcon="square-check"></svg>
<svg lucideIcon="circle-alert"></svg>
<svg lucideIcon="circle-exclamation-point"></svg>
```
## How names are resolved
@@ -15,5 +15,10 @@
"categories": [
"account",
"social"
],
"aliases": [
{
"name": "badge-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 471 B

After

Width:  |  Height:  |  Size: 471 B

@@ -12,5 +12,10 @@
],
"categories": [
"$extends:battery"
],
"aliases": [
{
"name": "battery-warning"
}
]
}

Before

Width:  |  Height:  |  Size: 393 B

After

Width:  |  Height:  |  Size: 393 B

@@ -15,5 +15,10 @@
],
"categories": [
"$extends:book"
],
"aliases": [
{
"name": "book-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 359 B

@@ -16,6 +16,9 @@
"name": "alert-circle",
"deprecationReason": "alias.name",
"deprecated": true
},
{
"name": "circle-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 332 B

@@ -13,5 +13,10 @@
],
"categories": [
"$extends:clock"
],
"aliases": [
{
"name": "clock-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 332 B

@@ -19,5 +19,10 @@
"development",
"notifications",
"weather"
],
"aliases": [
{
"name": "cloud-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 331 B

After

Width:  |  Height:  |  Size: 331 B

@@ -13,5 +13,13 @@
"categories": [
"mail",
"notifications"
],
"aliases": [
{
"name": "mail-warning"
},
{
"name": "mail-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 393 B

After

Width:  |  Height:  |  Size: 393 B

@@ -17,5 +17,13 @@
"categories": [
"$extends:message-circle",
"notifications"
],
"aliases": [
{
"name": "message-circle-warning"
},
{
"name": "message-circle-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 396 B

After

Width:  |  Height:  |  Size: 396 B

@@ -16,5 +16,13 @@
"categories": [
"$extends:message-square",
"notifications"
],
"aliases": [
{
"name": "message-square-warning"
},
{
"name": "message-square-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 388 B

After

Width:  |  Height:  |  Size: 388 B

@@ -18,6 +18,9 @@
"name": "alert-octagon",
"deprecationReason": "alias.name",
"deprecated": true
},
{
"name": "octagon-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 510 B

After

Width:  |  Height:  |  Size: 510 B

@@ -15,5 +15,10 @@
],
"categories": [
"$extends:search"
],
"aliases": [
{
"name": "search-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 322 B

After

Width:  |  Height:  |  Size: 322 B

@@ -59,5 +59,10 @@
"development",
"notifications",
"gaming"
],
"aliases": [
{
"name": "shield-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 435 B

After

Width:  |  Height:  |  Size: 435 B

@@ -21,6 +21,9 @@
"name": "alert-triangle",
"deprecationReason": "alias.name",
"deprecated": true
},
{
"name": "triangle-alert"
}
]
}

Before

Width:  |  Height:  |  Size: 345 B

After

Width:  |  Height:  |  Size: 345 B

@@ -3,20 +3,20 @@ import { bootstrapApplication, provideClientHydration } from '@angular/platform-
import { provideServerRendering, renderApplication } from '@angular/platform-server';
import { LucideDynamicIcon } from './lucide-dynamic-icon';
import { provideLucideIcons } from './lucide-icons';
import { LucideBadgeAlert } from './icons/badge-alert';
import { LucideBadgeExclamationPoint } from './icons/badge-exclamation-point';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'lucide-static-hydration-root',
template: `<svg lucideBadgeAlert [nonScalingStroke]="true"></svg>`,
imports: [LucideBadgeAlert],
template: `<svg lucideBadgeExclamationPoint [nonScalingStroke]="true"></svg>`,
imports: [LucideBadgeExclamationPoint],
})
class StaticHydrationRootComponent {}
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'lucide-dynamic-hydration-root',
template: `<svg [lucideIcon]="'badge-alert'"></svg>`,
template: `<svg [lucideIcon]="'badge-exclamation-point'"></svg>`,
imports: [LucideDynamicIcon],
})
class DynamicHydrationRootComponent {}
@@ -60,7 +60,7 @@ describe('Lucide hydration', () => {
);
(globalThis as { ngServerMode?: boolean }).ngServerMode = false;
const serverDocument = new DOMParser().parseFromString(html, 'text/html');
expectBadgeAlertShapeNodes(serverDocument.querySelector('svg') as SVGSVGElement);
expectBadgeExclamationPointShapeNodes(serverDocument.querySelector('svg') as SVGSVGElement);
document.head.innerHTML = serverDocument.head.innerHTML;
document.body.innerHTML = serverDocument.body.innerHTML;
@@ -75,7 +75,7 @@ describe('Lucide hydration', () => {
return document.querySelector('svg') as SVGSVGElement;
}
function expectBadgeAlertShapeNodes(svg: SVGSVGElement) {
function expectBadgeExclamationPointShapeNodes(svg: SVGSVGElement) {
expect(Array.from(svg.children).map((child) => child.tagName.toLowerCase())).toEqual([
'path',
'line',
@@ -89,7 +89,7 @@ describe('Lucide hydration', () => {
'lucide-static-hydration-root',
);
expectBadgeAlertShapeNodes(svg);
expectBadgeExclamationPointShapeNodes(svg);
for (const child of Array.from(svg.children)) {
expect(child.getAttribute('vector-effect')).toBe('non-scaling-stroke');
}
@@ -99,9 +99,9 @@ describe('Lucide hydration', () => {
const svg = await renderAndHydrate(
DynamicHydrationRootComponent,
'lucide-dynamic-hydration-root',
[provideLucideIcons(LucideBadgeAlert)],
[provideLucideIcons(LucideBadgeExclamationPoint)],
);
expectBadgeAlertShapeNodes(svg);
expectBadgeExclamationPointShapeNodes(svg);
});
});
+1 -1
View File
@@ -1,7 +1,7 @@
import path from 'path';
import fs from 'fs';
import { promisify } from 'util';
import simpleGit from 'simple-git';
import { simpleGit } from 'simple-git';
import { type IconMetadata } from '../../tools/build-icons/types.ts';
/**