@patternfly/patternfly 6.5.0-prerelease.46 → 6.5.0-prerelease.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/components/Accordion/accordion.css +1 -1
  2. package/components/Accordion/accordion.scss +1 -1
  3. package/components/Alert/alert.css +2 -1
  4. package/components/Alert/alert.scss +2 -1
  5. package/components/Card/card.css +1 -1
  6. package/components/Card/card.scss +1 -1
  7. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  8. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  9. package/components/DataList/data-list.css +1 -1
  10. package/components/DataList/data-list.scss +1 -1
  11. package/components/DualListSelector/dual-list-selector.css +1 -1
  12. package/components/DualListSelector/dual-list-selector.scss +1 -1
  13. package/components/ExpandableSection/expandable-section.css +2 -2
  14. package/components/ExpandableSection/expandable-section.scss +2 -2
  15. package/components/Form/form.css +1 -1
  16. package/components/Form/form.scss +1 -1
  17. package/components/JumpLinks/jump-links.css +1 -1
  18. package/components/JumpLinks/jump-links.scss +1 -1
  19. package/components/Nav/nav.css +1 -1
  20. package/components/Nav/nav.scss +1 -1
  21. package/components/NotificationDrawer/notification-drawer.css +1 -1
  22. package/components/NotificationDrawer/notification-drawer.scss +1 -1
  23. package/components/Table/table.css +2 -2
  24. package/components/Table/table.scss +2 -2
  25. package/components/Tabs/tabs.css +2 -2
  26. package/components/Tabs/tabs.scss +2 -2
  27. package/components/Toolbar/toolbar.css +1 -1
  28. package/components/Toolbar/toolbar.scss +1 -1
  29. package/components/TreeView/tree-view.css +1 -1
  30. package/components/TreeView/tree-view.scss +1 -1
  31. package/components/Wizard/wizard.css +1 -1
  32. package/components/Wizard/wizard.scss +1 -1
  33. package/components/_index.css +20 -19
  34. package/docs/components/Accordion/examples/Accordion.md +390 -30
  35. package/docs/components/Alert/examples/Alert.md +494 -38
  36. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  37. package/docs/components/CalendarMonth/examples/CalendarMonth.md +16 -16
  38. package/docs/components/Card/examples/Card.md +52 -4
  39. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +78 -6
  40. package/docs/components/CodeBlock/examples/CodeBlock.md +26 -2
  41. package/docs/components/DataList/examples/DataList.md +221 -17
  42. package/docs/components/DualListSelector/examples/DualListSelector.md +169 -13
  43. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  44. package/docs/components/Form/examples/Form.md +78 -6
  45. package/docs/components/Icon/examples/Icon.md +26 -2
  46. package/docs/components/JumpLinks/examples/JumpLinks.md +52 -4
  47. package/docs/components/Menu/examples/Menu.md +1456 -112
  48. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +39 -3
  49. package/docs/components/Nav/examples/Navigation.md +710 -62
  50. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +52 -4
  51. package/docs/components/Table/examples/Table.md +819 -63
  52. package/docs/components/Tabs/examples/Tabs.md +321 -213
  53. package/docs/components/TreeView/examples/TreeView.md +1300 -100
  54. package/docs/components/Wizard/examples/Wizard.md +323 -59
  55. package/docs/demos/AboutModal/examples/AboutModal.md +39 -3
  56. package/docs/demos/Alert/examples/Alert.md +182 -14
  57. package/docs/demos/BackToTop/examples/BackToTop.md +39 -3
  58. package/docs/demos/Banner/examples/Banner.md +78 -6
  59. package/docs/demos/Card/examples/Card.md +242 -29
  60. package/docs/demos/CardView/examples/CardView.md +78 -6
  61. package/docs/demos/Compass/examples/Compass.md +71 -35
  62. package/docs/demos/Dashboard/examples/Dashboard.md +104 -8
  63. package/docs/demos/DataList/examples/DataList.md +234 -18
  64. package/docs/demos/DescriptionList/examples/DescriptionList.md +117 -9
  65. package/docs/demos/Drawer/examples/Drawer.md +141 -15
  66. package/docs/demos/Form/examples/BasicForms.md +143 -11
  67. package/docs/demos/JumpLinks/examples/JumpLinks.md +216 -27
  68. package/docs/demos/Masthead/examples/Masthead.md +355 -31
  69. package/docs/demos/Modal/examples/Modal.md +234 -18
  70. package/docs/demos/Nav/examples/Nav.md +320 -32
  71. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +247 -19
  72. package/docs/demos/Page/examples/Page.md +546 -42
  73. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +281 -29
  74. package/docs/demos/Skeleton/examples/Skeleton.md +39 -3
  75. package/docs/demos/Table/examples/Table.md +702 -54
  76. package/docs/demos/Tabs/examples/Tabs.md +238 -22
  77. package/docs/demos/Toolbar/examples/Toolbar.md +78 -6
  78. package/docs/demos/Wizard/examples/Wizard.md +621 -72
  79. package/package.json +1 -1
  80. package/patternfly-no-globals.css +20 -19
  81. package/patternfly.css +20 -19
  82. package/patternfly.min.css +1 -1
  83. package/patternfly.min.css.map +1 -1
package/docs/components/Alert/examples/Alert.md CHANGED
@@ -9,7 +9,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
9
9
  ```html
10
10
  <div class="pf-v6-c-alert pf-m-custom" aria-label="Custom alert">
11
11
  <div class="pf-v6-c-alert__icon">
12
- <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
12
+ <svg
13
+ class="pf-v6-svg"
14
+ viewBox="0 0 32 32"
15
+ fill="currentColor"
16
+ aria-hidden="true"
17
+ role="img"
18
+ width="1em"
19
+ height="1em"
20
+ >
21
+ <path
22
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
23
+ />
24
+ </svg>
13
25
  </div>
14
26
  <p class="pf-v6-c-alert__title">
15
27
  <span class="pf-v6-screen-reader">Custom alert:</span>
@@ -19,7 +31,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
19
31
  <br />
20
32
  <div class="pf-v6-c-alert pf-m-info" aria-label="Information alert">
21
33
  <div class="pf-v6-c-alert__icon">
22
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
34
+ <svg
35
+ class="pf-v6-svg"
36
+ viewBox="0 0 32 32"
37
+ fill="currentColor"
38
+ aria-hidden="true"
39
+ role="img"
40
+ width="1em"
41
+ height="1em"
42
+ >
43
+ <path
44
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
45
+ />
46
+ </svg>
23
47
  </div>
24
48
  <p class="pf-v6-c-alert__title">
25
49
  <span class="pf-v6-screen-reader">Info alert:</span>
@@ -29,7 +53,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
29
53
  <br />
30
54
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
31
55
  <div class="pf-v6-c-alert__icon">
32
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
56
+ <svg
57
+ class="pf-v6-svg"
58
+ viewBox="0 0 32 32"
59
+ fill="currentColor"
60
+ aria-hidden="true"
61
+ role="img"
62
+ width="1em"
63
+ height="1em"
64
+ >
65
+ <path
66
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
67
+ />
68
+ </svg>
33
69
  </div>
34
70
  <p class="pf-v6-c-alert__title">
35
71
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -39,7 +75,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
39
75
  <br />
40
76
  <div class="pf-v6-c-alert pf-m-warning" aria-label="Warning alert">
41
77
  <div class="pf-v6-c-alert__icon">
42
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
78
+ <svg
79
+ class="pf-v6-svg"
80
+ viewBox="0 0 32 32"
81
+ fill="currentColor"
82
+ aria-hidden="true"
83
+ role="img"
84
+ width="1em"
85
+ height="1em"
86
+ >
87
+ <path
88
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
89
+ />
90
+ </svg>
43
91
  </div>
44
92
  <p class="pf-v6-c-alert__title">
45
93
  <span class="pf-v6-screen-reader">Warning alert:</span>
@@ -49,7 +97,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
49
97
  <br />
50
98
  <div class="pf-v6-c-alert pf-m-danger" aria-label="Danger alert">
51
99
  <div class="pf-v6-c-alert__icon">
52
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
100
+ <svg
101
+ class="pf-v6-svg"
102
+ viewBox="0 0 32 32"
103
+ fill="currentColor"
104
+ aria-hidden="true"
105
+ role="img"
106
+ width="1em"
107
+ height="1em"
108
+ >
109
+ <path
110
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
111
+ />
112
+ </svg>
53
113
  </div>
54
114
  <p class="pf-v6-c-alert__title">
55
115
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -64,7 +124,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
64
124
  ```html
65
125
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
66
126
  <div class="pf-v6-c-alert__icon">
67
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
127
+ <svg
128
+ class="pf-v6-svg"
129
+ viewBox="0 0 32 32"
130
+ fill="currentColor"
131
+ aria-hidden="true"
132
+ role="img"
133
+ width="1em"
134
+ height="1em"
135
+ >
136
+ <path
137
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
138
+ />
139
+ </svg>
68
140
  </div>
69
141
  <p class="pf-v6-c-alert__title">
70
142
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -108,7 +180,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
108
180
  <br />
109
181
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
110
182
  <div class="pf-v6-c-alert__icon">
111
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
183
+ <svg
184
+ class="pf-v6-svg"
185
+ viewBox="0 0 32 32"
186
+ fill="currentColor"
187
+ aria-hidden="true"
188
+ role="img"
189
+ width="1em"
190
+ height="1em"
191
+ >
192
+ <path
193
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
194
+ />
195
+ </svg>
112
196
  </div>
113
197
  <p class="pf-v6-c-alert__title">
114
198
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -147,7 +231,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
147
231
  <br />
148
232
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
149
233
  <div class="pf-v6-c-alert__icon">
150
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
234
+ <svg
235
+ class="pf-v6-svg"
236
+ viewBox="0 0 32 32"
237
+ fill="currentColor"
238
+ aria-hidden="true"
239
+ role="img"
240
+ width="1em"
241
+ height="1em"
242
+ >
243
+ <path
244
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
245
+ />
246
+ </svg>
151
247
  </div>
152
248
  <p class="pf-v6-c-alert__title">
153
249
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -188,7 +284,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
188
284
  <br />
189
285
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
190
286
  <div class="pf-v6-c-alert__icon">
191
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
287
+ <svg
288
+ class="pf-v6-svg"
289
+ viewBox="0 0 32 32"
290
+ fill="currentColor"
291
+ aria-hidden="true"
292
+ role="img"
293
+ width="1em"
294
+ height="1em"
295
+ >
296
+ <path
297
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
298
+ />
299
+ </svg>
192
300
  </div>
193
301
  <p class="pf-v6-c-alert__title">
194
302
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -221,7 +329,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
221
329
  <br />
222
330
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
223
331
  <div class="pf-v6-c-alert__icon">
224
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
332
+ <svg
333
+ class="pf-v6-svg"
334
+ viewBox="0 0 32 32"
335
+ fill="currentColor"
336
+ aria-hidden="true"
337
+ role="img"
338
+ width="1em"
339
+ height="1em"
340
+ >
341
+ <path
342
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
343
+ />
344
+ </svg>
225
345
  </div>
226
346
  <p class="pf-v6-c-alert__title">
227
347
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -234,7 +354,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
234
354
  aria-label="Success alert with title truncation"
235
355
  >
236
356
  <div class="pf-v6-c-alert__icon">
237
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
357
+ <svg
358
+ class="pf-v6-svg"
359
+ viewBox="0 0 32 32"
360
+ fill="currentColor"
361
+ aria-hidden="true"
362
+ role="img"
363
+ width="1em"
364
+ height="1em"
365
+ >
366
+ <path
367
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
368
+ />
369
+ </svg>
238
370
  </div>
239
371
  <p class="pf-v6-c-alert__title pf-m-truncate">
240
372
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -250,7 +382,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
250
382
  aria-label="Success alert with title truncation at 2 lines"
251
383
  >
252
384
  <div class="pf-v6-c-alert__icon">
253
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
385
+ <svg
386
+ class="pf-v6-svg"
387
+ viewBox="0 0 32 32"
388
+ fill="currentColor"
389
+ aria-hidden="true"
390
+ role="img"
391
+ width="1em"
392
+ height="1em"
393
+ >
394
+ <path
395
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
396
+ />
397
+ </svg>
254
398
  </div>
255
399
  <p
256
400
  class="pf-v6-c-alert__title pf-m-truncate"
@@ -274,7 +418,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
274
418
  aria-label="Inline custom alert"
275
419
  >
276
420
  <div class="pf-v6-c-alert__icon">
277
- <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
421
+ <svg
422
+ class="pf-v6-svg"
423
+ viewBox="0 0 32 32"
424
+ fill="currentColor"
425
+ aria-hidden="true"
426
+ role="img"
427
+ width="1em"
428
+ height="1em"
429
+ >
430
+ <path
431
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
432
+ />
433
+ </svg>
278
434
  </div>
279
435
  <p class="pf-v6-c-alert__title">
280
436
  <span class="pf-v6-screen-reader">Custom inline alert:</span>
@@ -287,7 +443,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
287
443
  aria-label="Inline information alert"
288
444
  >
289
445
  <div class="pf-v6-c-alert__icon">
290
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
446
+ <svg
447
+ class="pf-v6-svg"
448
+ viewBox="0 0 32 32"
449
+ fill="currentColor"
450
+ aria-hidden="true"
451
+ role="img"
452
+ width="1em"
453
+ height="1em"
454
+ >
455
+ <path
456
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
457
+ />
458
+ </svg>
291
459
  </div>
292
460
  <p class="pf-v6-c-alert__title">
293
461
  <span class="pf-v6-screen-reader">Info alert:</span>
@@ -300,7 +468,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
300
468
  aria-label="Inline success alert"
301
469
  >
302
470
  <div class="pf-v6-c-alert__icon">
303
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
471
+ <svg
472
+ class="pf-v6-svg"
473
+ viewBox="0 0 32 32"
474
+ fill="currentColor"
475
+ aria-hidden="true"
476
+ role="img"
477
+ width="1em"
478
+ height="1em"
479
+ >
480
+ <path
481
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
482
+ />
483
+ </svg>
304
484
  </div>
305
485
  <p class="pf-v6-c-alert__title">
306
486
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -313,7 +493,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
313
493
  aria-label="Inline warning alert"
314
494
  >
315
495
  <div class="pf-v6-c-alert__icon">
316
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
496
+ <svg
497
+ class="pf-v6-svg"
498
+ viewBox="0 0 32 32"
499
+ fill="currentColor"
500
+ aria-hidden="true"
501
+ role="img"
502
+ width="1em"
503
+ height="1em"
504
+ >
505
+ <path
506
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
507
+ />
508
+ </svg>
317
509
  </div>
318
510
  <p class="pf-v6-c-alert__title">
319
511
  <span class="pf-v6-screen-reader">Warning alert:</span>
@@ -326,7 +518,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
326
518
  aria-label="Inline danger alert"
327
519
  >
328
520
  <div class="pf-v6-c-alert__icon">
329
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
521
+ <svg
522
+ class="pf-v6-svg"
523
+ viewBox="0 0 32 32"
524
+ fill="currentColor"
525
+ aria-hidden="true"
526
+ role="img"
527
+ width="1em"
528
+ height="1em"
529
+ >
530
+ <path
531
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
532
+ />
533
+ </svg>
330
534
  </div>
331
535
  <p class="pf-v6-c-alert__title">
332
536
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -341,7 +545,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
341
545
  ```html
342
546
  <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
343
547
  <div class="pf-v6-c-alert__icon">
344
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
548
+ <svg
549
+ class="pf-v6-svg"
550
+ viewBox="0 0 32 32"
551
+ fill="currentColor"
552
+ aria-hidden="true"
553
+ role="img"
554
+ width="1em"
555
+ height="1em"
556
+ >
557
+ <path
558
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
559
+ />
560
+ </svg>
345
561
  </div>
346
562
  <p class="pf-v6-c-alert__title">
347
563
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -385,7 +601,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
385
601
  <br />
386
602
  <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
387
603
  <div class="pf-v6-c-alert__icon">
388
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
604
+ <svg
605
+ class="pf-v6-svg"
606
+ viewBox="0 0 32 32"
607
+ fill="currentColor"
608
+ aria-hidden="true"
609
+ role="img"
610
+ width="1em"
611
+ height="1em"
612
+ >
613
+ <path
614
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
615
+ />
616
+ </svg>
389
617
  </div>
390
618
  <p class="pf-v6-c-alert__title">
391
619
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -424,7 +652,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
424
652
  <br />
425
653
  <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
426
654
  <div class="pf-v6-c-alert__icon">
427
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
655
+ <svg
656
+ class="pf-v6-svg"
657
+ viewBox="0 0 32 32"
658
+ fill="currentColor"
659
+ aria-hidden="true"
660
+ role="img"
661
+ width="1em"
662
+ height="1em"
663
+ >
664
+ <path
665
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
666
+ />
667
+ </svg>
428
668
  </div>
429
669
  <p class="pf-v6-c-alert__title">
430
670
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -465,7 +705,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
465
705
  <br />
466
706
  <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
467
707
  <div class="pf-v6-c-alert__icon">
468
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
708
+ <svg
709
+ class="pf-v6-svg"
710
+ viewBox="0 0 32 32"
711
+ fill="currentColor"
712
+ aria-hidden="true"
713
+ role="img"
714
+ width="1em"
715
+ height="1em"
716
+ >
717
+ <path
718
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
719
+ />
720
+ </svg>
469
721
  </div>
470
722
  <p class="pf-v6-c-alert__title">
471
723
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -480,7 +732,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
480
732
  ```html
481
733
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
482
734
  <div class="pf-v6-c-alert__icon">
483
- <i class="fas fa-fw fa-cog" aria-hidden="true"></i>
735
+ <svg
736
+ class="pf-v6-svg"
737
+ viewBox="0 0 512 512"
738
+ fill="currentColor"
739
+ aria-hidden="true"
740
+ role="img"
741
+ width="1em"
742
+ height="1em"
743
+ >
744
+ <path
745
+ d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
746
+ />
747
+ </svg>
484
748
  </div>
485
749
  <p class="pf-v6-c-alert__title">
486
750
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -490,7 +754,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
490
754
  <br />
491
755
  <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
492
756
  <div class="pf-v6-c-alert__icon">
493
- <i class="fas fa-fw fa-cog" aria-hidden="true"></i>
757
+ <svg
758
+ class="pf-v6-svg"
759
+ viewBox="0 0 512 512"
760
+ fill="currentColor"
761
+ aria-hidden="true"
762
+ role="img"
763
+ width="1em"
764
+ height="1em"
765
+ >
766
+ <path
767
+ d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
768
+ />
769
+ </svg>
494
770
  </div>
495
771
  <p class="pf-v6-c-alert__title">
496
772
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -508,7 +784,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
508
784
  aria-label="Success alert"
509
785
  >
510
786
  <div class="pf-v6-c-alert__icon">
511
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
787
+ <svg
788
+ class="pf-v6-svg"
789
+ viewBox="0 0 32 32"
790
+ fill="currentColor"
791
+ aria-hidden="true"
792
+ role="img"
793
+ width="1em"
794
+ height="1em"
795
+ >
796
+ <path
797
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
798
+ />
799
+ </svg>
512
800
  </div>
513
801
  <p class="pf-v6-c-alert__title">
514
802
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -536,13 +824,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
536
824
  >
537
825
  <span class="pf-v6-c-button__icon">
538
826
  <span class="pf-v6-c-alert__toggle-icon">
539
- <i class="fas fa-angle-right" aria-hidden="true"></i>
827
+ <svg
828
+ class="pf-v6-svg"
829
+ viewBox="0 0 20 20"
830
+ fill="currentColor"
831
+ aria-hidden="true"
832
+ role="img"
833
+ width="1em"
834
+ height="1em"
835
+ >
836
+ <path
837
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
838
+ />
839
+ </svg>
540
840
  </span>
541
841
  </span>
542
842
  </button>
543
843
  </div>
544
844
  <div class="pf-v6-c-alert__icon">
545
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
845
+ <svg
846
+ class="pf-v6-svg"
847
+ viewBox="0 0 32 32"
848
+ fill="currentColor"
849
+ aria-hidden="true"
850
+ role="img"
851
+ width="1em"
852
+ height="1em"
853
+ >
854
+ <path
855
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
856
+ />
857
+ </svg>
546
858
  </div>
547
859
  <p class="pf-v6-c-alert__title" id="alert-expandable-example-1-title">
548
860
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -599,13 +911,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
599
911
  >
600
912
  <span class="pf-v6-c-button__icon">
601
913
  <span class="pf-v6-c-alert__toggle-icon">
602
- <i class="fas fa-angle-right" aria-hidden="true"></i>
914
+ <svg
915
+ class="pf-v6-svg"
916
+ viewBox="0 0 20 20"
917
+ fill="currentColor"
918
+ aria-hidden="true"
919
+ role="img"
920
+ width="1em"
921
+ height="1em"
922
+ >
923
+ <path
924
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
925
+ />
926
+ </svg>
603
927
  </span>
604
928
  </span>
605
929
  </button>
606
930
  </div>
607
931
  <div class="pf-v6-c-alert__icon">
608
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
932
+ <svg
933
+ class="pf-v6-svg"
934
+ viewBox="0 0 32 32"
935
+ fill="currentColor"
936
+ aria-hidden="true"
937
+ role="img"
938
+ width="1em"
939
+ height="1em"
940
+ >
941
+ <path
942
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
943
+ />
944
+ </svg>
609
945
  </div>
610
946
  <p class="pf-v6-c-alert__title" id="alert-expandable-example-2-title">
611
947
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -662,13 +998,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
662
998
  >
663
999
  <span class="pf-v6-c-button__icon">
664
1000
  <span class="pf-v6-c-alert__toggle-icon">
665
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1001
+ <svg
1002
+ class="pf-v6-svg"
1003
+ viewBox="0 0 20 20"
1004
+ fill="currentColor"
1005
+ aria-hidden="true"
1006
+ role="img"
1007
+ width="1em"
1008
+ height="1em"
1009
+ >
1010
+ <path
1011
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1012
+ />
1013
+ </svg>
666
1014
  </span>
667
1015
  </span>
668
1016
  </button>
669
1017
  </div>
670
1018
  <div class="pf-v6-c-alert__icon">
671
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1019
+ <svg
1020
+ class="pf-v6-svg"
1021
+ viewBox="0 0 32 32"
1022
+ fill="currentColor"
1023
+ aria-hidden="true"
1024
+ role="img"
1025
+ width="1em"
1026
+ height="1em"
1027
+ >
1028
+ <path
1029
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1030
+ />
1031
+ </svg>
672
1032
  </div>
673
1033
  <p class="pf-v6-c-alert__title" id="alert-expandable-example-3-title">
674
1034
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -725,13 +1085,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
725
1085
  >
726
1086
  <span class="pf-v6-c-button__icon">
727
1087
  <span class="pf-v6-c-alert__toggle-icon">
728
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1088
+ <svg
1089
+ class="pf-v6-svg"
1090
+ viewBox="0 0 20 20"
1091
+ fill="currentColor"
1092
+ aria-hidden="true"
1093
+ role="img"
1094
+ width="1em"
1095
+ height="1em"
1096
+ >
1097
+ <path
1098
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1099
+ />
1100
+ </svg>
729
1101
  </span>
730
1102
  </span>
731
1103
  </button>
732
1104
  </div>
733
1105
  <div class="pf-v6-c-alert__icon">
734
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1106
+ <svg
1107
+ class="pf-v6-svg"
1108
+ viewBox="0 0 32 32"
1109
+ fill="currentColor"
1110
+ aria-hidden="true"
1111
+ role="img"
1112
+ width="1em"
1113
+ height="1em"
1114
+ >
1115
+ <path
1116
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1117
+ />
1118
+ </svg>
735
1119
  </div>
736
1120
  <p class="pf-v6-c-alert__title" id="alert-expandable-example-4-title">
737
1121
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -789,7 +1173,19 @@ An alert group is optional when only one static alert is needed. It becomes requ
789
1173
  aria-label="Success alert"
790
1174
  >
791
1175
  <div class="pf-v6-c-alert__icon">
792
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1176
+ <svg
1177
+ class="pf-v6-svg"
1178
+ viewBox="0 0 32 32"
1179
+ fill="currentColor"
1180
+ aria-hidden="true"
1181
+ role="img"
1182
+ width="1em"
1183
+ height="1em"
1184
+ >
1185
+ <path
1186
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1187
+ />
1188
+ </svg>
793
1189
  </div>
794
1190
  <p class="pf-v6-c-alert__title">
795
1191
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -804,7 +1200,19 @@ An alert group is optional when only one static alert is needed. It becomes requ
804
1200
  aria-label="Danger alert"
805
1201
  >
806
1202
  <div class="pf-v6-c-alert__icon">
807
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1203
+ <svg
1204
+ class="pf-v6-svg"
1205
+ viewBox="0 0 32 32"
1206
+ fill="currentColor"
1207
+ aria-hidden="true"
1208
+ role="img"
1209
+ width="1em"
1210
+ height="1em"
1211
+ >
1212
+ <path
1213
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1214
+ />
1215
+ </svg>
808
1216
  </div>
809
1217
  <p class="pf-v6-c-alert__title">
810
1218
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -819,7 +1227,19 @@ An alert group is optional when only one static alert is needed. It becomes requ
819
1227
  aria-label="Information alert"
820
1228
  >
821
1229
  <div class="pf-v6-c-alert__icon">
822
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1230
+ <svg
1231
+ class="pf-v6-svg"
1232
+ viewBox="0 0 32 32"
1233
+ fill="currentColor"
1234
+ aria-hidden="true"
1235
+ role="img"
1236
+ width="1em"
1237
+ height="1em"
1238
+ >
1239
+ <path
1240
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
1241
+ />
1242
+ </svg>
823
1243
  </div>
824
1244
  <p class="pf-v6-c-alert__title">
825
1245
  <span class="pf-v6-screen-reader">Info alert:</span>
@@ -855,7 +1275,19 @@ For sighted users, interactive elements can be included in this message in one o
855
1275
  <li class="pf-v6-c-alert-group__item">
856
1276
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success toast alert">
857
1277
  <div class="pf-v6-c-alert__icon">
858
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1278
+ <svg
1279
+ class="pf-v6-svg"
1280
+ viewBox="0 0 32 32"
1281
+ fill="currentColor"
1282
+ aria-hidden="true"
1283
+ role="img"
1284
+ width="1em"
1285
+ height="1em"
1286
+ >
1287
+ <path
1288
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1289
+ />
1290
+ </svg>
859
1291
  </div>
860
1292
  <p class="pf-v6-c-alert__title" id="alert_one_title">
861
1293
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -896,7 +1328,19 @@ For sighted users, interactive elements can be included in this message in one o
896
1328
  <li class="pf-v6-c-alert-group__item">
897
1329
  <div class="pf-v6-c-alert pf-m-danger" aria-label="Danger toast alert">
898
1330
  <div class="pf-v6-c-alert__icon">
899
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1331
+ <svg
1332
+ class="pf-v6-svg"
1333
+ viewBox="0 0 32 32"
1334
+ fill="currentColor"
1335
+ aria-hidden="true"
1336
+ role="img"
1337
+ width="1em"
1338
+ height="1em"
1339
+ >
1340
+ <path
1341
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1342
+ />
1343
+ </svg>
900
1344
  </div>
901
1345
  <p class="pf-v6-c-alert__title" id="alert_two_title">
902
1346
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -931,7 +1375,19 @@ For sighted users, interactive elements can be included in this message in one o
931
1375
  <li class="pf-v6-c-alert-group__item">
932
1376
  <div class="pf-v6-c-alert pf-m-info" aria-label="Information toast alert">
933
1377
  <div class="pf-v6-c-alert__icon">
934
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1378
+ <svg
1379
+ class="pf-v6-svg"
1380
+ viewBox="0 0 32 32"
1381
+ fill="currentColor"
1382
+ aria-hidden="true"
1383
+ role="img"
1384
+ width="1em"
1385
+ height="1em"
1386
+ >
1387
+ <path
1388
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
1389
+ />
1390
+ </svg>
935
1391
  </div>
936
1392
  <p class="pf-v6-c-alert__title" id="alert_three_title">
937
1393
  <span class="pf-v6-screen-reader">Info alert:</span>