@patternfly/patternfly 6.5.0-prerelease.52 → 6.5.0-prerelease.53

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 (12) hide show
  1. package/components/Card/card.css +20 -8
  2. package/components/Card/card.scss +26 -7
  3. package/components/_index.css +20 -8
  4. package/docs/demos/Card/examples/Card.md +564 -86
  5. package/docs/demos/CardView/examples/CardView.md +15 -1
  6. package/docs/demos/Compass/examples/Compass.md +393 -82
  7. package/docs/demos/Dashboard/examples/Dashboard.md +434 -100
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +20 -8
  10. package/patternfly.css +20 -8
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -794,7 +794,21 @@ This demo populates the main Compass section with a card view, which is one of t
794
794
  <div class="pf-v6-l-bullseye">
795
795
  <div class="pf-v6-c-empty-state pf-m-xs">
796
796
  <div class="pf-v6-c-empty-state__content">
797
- <i class="fas fa-plus-circle pf-v6-c-empty-state__icon"></i>
797
+ <div class="pf-v6-c-empty-state__icon">
798
+ <svg
799
+ class="pf-v6-svg"
800
+ viewBox="0 0 32 32"
801
+ fill="currentColor"
802
+ aria-hidden="true"
803
+ role="img"
804
+ width="1em"
805
+ height="1em"
806
+ >
807
+ <path
808
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
809
+ />
810
+ </svg>
811
+ </div>
798
812
  <div class="pf-v6-c-card__title">
799
813
  <h2
800
814
  class="pf-v6-c-card__title-text pf-m-md"
@@ -2022,10 +2036,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2022
2036
  >
2023
2037
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2024
2038
  <div class="pf-v6-l-flex__item">
2025
- <i
2026
- class="fas fa-check-circle pf-v6-u-success-color-100"
2027
- aria-hidden="true"
2028
- ></i>
2039
+ <span class="pf-v6-c-icon">
2040
+ <span class="pf-v6-c-icon__content pf-m-success">
2041
+ <svg
2042
+ class="pf-v6-svg"
2043
+ viewBox="0 0 32 32"
2044
+ fill="currentColor"
2045
+ aria-hidden="true"
2046
+ role="img"
2047
+ width="1em"
2048
+ height="1em"
2049
+ >
2050
+ <path
2051
+ 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"
2052
+ />
2053
+ </svg>
2054
+ </span>
2055
+ </span>
2029
2056
  </div>
2030
2057
  <div class="pf-v6-l-flex__item">
2031
2058
  <span>Cluster</span>
@@ -2033,10 +2060,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2033
2060
  </div>
2034
2061
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2035
2062
  <div class="pf-v6-l-flex__item">
2036
- <i
2037
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2038
- aria-hidden="true"
2039
- ></i>
2063
+ <span class="pf-v6-c-icon">
2064
+ <span class="pf-v6-c-icon__content pf-m-danger">
2065
+ <svg
2066
+ class="pf-v6-svg"
2067
+ viewBox="0 0 32 32"
2068
+ fill="currentColor"
2069
+ aria-hidden="true"
2070
+ role="img"
2071
+ width="1em"
2072
+ height="1em"
2073
+ >
2074
+ <path
2075
+ 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"
2076
+ />
2077
+ </svg>
2078
+ </span>
2079
+ </span>
2040
2080
  </div>
2041
2081
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
2042
2082
  <span class="popover-parent">
@@ -2046,10 +2086,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2046
2086
  </div>
2047
2087
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2048
2088
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
2049
- <i
2050
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2051
- aria-hidden="true"
2052
- ></i>
2089
+ <span class="pf-v6-c-icon">
2090
+ <span class="pf-v6-c-icon__content pf-m-danger">
2091
+ <svg
2092
+ class="pf-v6-svg"
2093
+ viewBox="0 0 32 32"
2094
+ fill="currentColor"
2095
+ aria-hidden="true"
2096
+ role="img"
2097
+ width="1em"
2098
+ height="1em"
2099
+ >
2100
+ <path
2101
+ 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"
2102
+ />
2103
+ </svg>
2104
+ </span>
2105
+ </span>
2053
2106
  </div>
2054
2107
  <div
2055
2108
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -2064,10 +2117,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2064
2117
  </div>
2065
2118
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2066
2119
  <div class="pf-v6-l-flex__item">
2067
- <i
2068
- class="fas fa-check-circle pf-v6-u-success-color-100"
2069
- aria-hidden="true"
2070
- ></i>
2120
+ <span class="pf-v6-c-icon">
2121
+ <span class="pf-v6-c-icon__content pf-m-success">
2122
+ <svg
2123
+ class="pf-v6-svg"
2124
+ viewBox="0 0 32 32"
2125
+ fill="currentColor"
2126
+ aria-hidden="true"
2127
+ role="img"
2128
+ width="1em"
2129
+ height="1em"
2130
+ >
2131
+ <path
2132
+ 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"
2133
+ />
2134
+ </svg>
2135
+ </span>
2136
+ </span>
2071
2137
  </div>
2072
2138
  <div
2073
2139
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -2082,10 +2148,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2082
2148
  </div>
2083
2149
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2084
2150
  <div class="pf-v6-l-flex__item">
2085
- <i
2086
- class="fas fa-check-circle pf-v6-u-success-color-100"
2087
- aria-hidden="true"
2088
- ></i>
2151
+ <span class="pf-v6-c-icon">
2152
+ <span class="pf-v6-c-icon__content pf-m-success">
2153
+ <svg
2154
+ class="pf-v6-svg"
2155
+ viewBox="0 0 32 32"
2156
+ fill="currentColor"
2157
+ aria-hidden="true"
2158
+ role="img"
2159
+ width="1em"
2160
+ height="1em"
2161
+ >
2162
+ <path
2163
+ 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"
2164
+ />
2165
+ </svg>
2166
+ </span>
2167
+ </span>
2089
2168
  </div>
2090
2169
  <div
2091
2170
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -2100,10 +2179,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2100
2179
  </div>
2101
2180
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2102
2181
  <div class="pf-v6-l-flex__item">
2103
- <i
2104
- class="fas fa-check-circle pf-v6-u-success-color-100"
2105
- aria-hidden="true"
2106
- ></i>
2182
+ <span class="pf-v6-c-icon">
2183
+ <span class="pf-v6-c-icon__content pf-m-success">
2184
+ <svg
2185
+ class="pf-v6-svg"
2186
+ viewBox="0 0 32 32"
2187
+ fill="currentColor"
2188
+ aria-hidden="true"
2189
+ role="img"
2190
+ width="1em"
2191
+ height="1em"
2192
+ >
2193
+ <path
2194
+ 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"
2195
+ />
2196
+ </svg>
2197
+ </span>
2198
+ </span>
2107
2199
  </div>
2108
2200
  <div
2109
2201
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -2115,10 +2207,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2115
2207
  </div>
2116
2208
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2117
2209
  <div class="pf-v6-l-flex__item">
2118
- <i
2119
- class="fas fa-check-circle pf-v6-u-success-color-100"
2120
- aria-hidden="true"
2121
- ></i>
2210
+ <span class="pf-v6-c-icon">
2211
+ <span class="pf-v6-c-icon__content pf-m-success">
2212
+ <svg
2213
+ class="pf-v6-svg"
2214
+ viewBox="0 0 32 32"
2215
+ fill="currentColor"
2216
+ aria-hidden="true"
2217
+ role="img"
2218
+ width="1em"
2219
+ height="1em"
2220
+ >
2221
+ <path
2222
+ 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"
2223
+ />
2224
+ </svg>
2225
+ </span>
2226
+ </span>
2122
2227
  </div>
2123
2228
  <div
2124
2229
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -2530,10 +2635,25 @@ This demo populates the main Compass section with a dashboard, which is often us
2530
2635
  <a href="#">
2531
2636
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2532
2637
  <span>3</span>
2533
- <i
2534
- class="fas fa-check-circle pf-v6-u-success-color-100"
2535
- aria-hidden="true"
2536
- ></i>
2638
+ <span class="pf-v6-c-icon">
2639
+ <span
2640
+ class="pf-v6-c-icon__content pf-m-success"
2641
+ >
2642
+ <svg
2643
+ class="pf-v6-svg"
2644
+ viewBox="0 0 32 32"
2645
+ fill="currentColor"
2646
+ aria-hidden="true"
2647
+ role="img"
2648
+ width="1em"
2649
+ height="1em"
2650
+ >
2651
+ <path
2652
+ 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"
2653
+ />
2654
+ </svg>
2655
+ </span>
2656
+ </span>
2537
2657
  </div>
2538
2658
  </a>
2539
2659
  </div>
@@ -2553,10 +2673,25 @@ This demo populates the main Compass section with a dashboard, which is often us
2553
2673
  <a href="#">
2554
2674
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2555
2675
  <span>8</span>
2556
- <i
2557
- class="fas fa-check-circle pf-v6-u-success-color-100"
2558
- aria-hidden="true"
2559
- ></i>
2676
+ <span class="pf-v6-c-icon">
2677
+ <span
2678
+ class="pf-v6-c-icon__content pf-m-success"
2679
+ >
2680
+ <svg
2681
+ class="pf-v6-svg"
2682
+ viewBox="0 0 32 32"
2683
+ fill="currentColor"
2684
+ aria-hidden="true"
2685
+ role="img"
2686
+ width="1em"
2687
+ height="1em"
2688
+ >
2689
+ <path
2690
+ 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"
2691
+ />
2692
+ </svg>
2693
+ </span>
2694
+ </span>
2560
2695
  </div>
2561
2696
  </a>
2562
2697
  </div>
@@ -2576,10 +2711,25 @@ This demo populates the main Compass section with a dashboard, which is often us
2576
2711
  <a href="#">
2577
2712
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2578
2713
  <span>20</span>
2579
- <i
2580
- class="fas fa-check-circle pf-v6-u-success-color-100"
2581
- aria-hidden="true"
2582
- ></i>
2714
+ <span class="pf-v6-c-icon">
2715
+ <span
2716
+ class="pf-v6-c-icon__content pf-m-success"
2717
+ >
2718
+ <svg
2719
+ class="pf-v6-svg"
2720
+ viewBox="0 0 32 32"
2721
+ fill="currentColor"
2722
+ aria-hidden="true"
2723
+ role="img"
2724
+ width="1em"
2725
+ height="1em"
2726
+ >
2727
+ <path
2728
+ 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"
2729
+ />
2730
+ </svg>
2731
+ </span>
2732
+ </span>
2583
2733
  </div>
2584
2734
  </a>
2585
2735
  </div>
@@ -2599,10 +2749,25 @@ This demo populates the main Compass section with a dashboard, which is often us
2599
2749
  <a href="#">
2600
2750
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2601
2751
  <span>12</span>
2602
- <i
2603
- class="fas fa-check-circle pf-v6-u-success-color-100"
2604
- aria-hidden="true"
2605
- ></i>
2752
+ <span class="pf-v6-c-icon">
2753
+ <span
2754
+ class="pf-v6-c-icon__content pf-m-success"
2755
+ >
2756
+ <svg
2757
+ class="pf-v6-svg"
2758
+ viewBox="0 0 32 32"
2759
+ fill="currentColor"
2760
+ aria-hidden="true"
2761
+ role="img"
2762
+ width="1em"
2763
+ height="1em"
2764
+ >
2765
+ <path
2766
+ 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"
2767
+ />
2768
+ </svg>
2769
+ </span>
2770
+ </span>
2606
2771
  </div>
2607
2772
  </a>
2608
2773
  </div>
@@ -2622,10 +2787,25 @@ This demo populates the main Compass section with a dashboard, which is often us
2622
2787
  <a href="#">
2623
2788
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2624
2789
  <span>18</span>
2625
- <i
2626
- class="fas fa-check-circle pf-v6-u-success-color-100"
2627
- aria-hidden="true"
2628
- ></i>
2790
+ <span class="pf-v6-c-icon">
2791
+ <span
2792
+ class="pf-v6-c-icon__content pf-m-success"
2793
+ >
2794
+ <svg
2795
+ class="pf-v6-svg"
2796
+ viewBox="0 0 32 32"
2797
+ fill="currentColor"
2798
+ aria-hidden="true"
2799
+ role="img"
2800
+ width="1em"
2801
+ height="1em"
2802
+ >
2803
+ <path
2804
+ 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"
2805
+ />
2806
+ </svg>
2807
+ </span>
2808
+ </span>
2629
2809
  </div>
2630
2810
  </a>
2631
2811
  </div>
@@ -2681,10 +2861,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2681
2861
  <dt class="pf-v6-c-description-list__term">
2682
2862
  <div class="pf-v6-l-flex pf-m-nowrap">
2683
2863
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2684
- <i
2685
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2686
- aria-hidden="true"
2687
- ></i>
2864
+ <span class="pf-v6-c-icon">
2865
+ <span class="pf-v6-c-icon__content pf-m-danger">
2866
+ <svg
2867
+ class="pf-v6-svg"
2868
+ viewBox="0 0 32 32"
2869
+ fill="currentColor"
2870
+ aria-hidden="true"
2871
+ role="img"
2872
+ width="1em"
2873
+ height="1em"
2874
+ >
2875
+ <path
2876
+ 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"
2877
+ />
2878
+ </svg>
2879
+ </span>
2880
+ </span>
2688
2881
  </div>
2689
2882
  <div class="pf-v6-l-flex__item">Readiness probe failed</div>
2690
2883
  </div>
@@ -2706,10 +2899,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2706
2899
  <dt class="pf-v6-c-description-list__term">
2707
2900
  <div class="pf-v6-l-flex pf-m-nowrap">
2708
2901
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2709
- <i
2710
- class="fas fa-check-circle pf-v6-u-success-color-100"
2711
- aria-hidden="true"
2712
- ></i>
2902
+ <span class="pf-v6-c-icon">
2903
+ <span class="pf-v6-c-icon__content pf-m-success">
2904
+ <svg
2905
+ class="pf-v6-svg"
2906
+ viewBox="0 0 32 32"
2907
+ fill="currentColor"
2908
+ aria-hidden="true"
2909
+ role="img"
2910
+ width="1em"
2911
+ height="1em"
2912
+ >
2913
+ <path
2914
+ 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"
2915
+ />
2916
+ </svg>
2917
+ </span>
2918
+ </span>
2713
2919
  </div>
2714
2920
  <div class="pf-v6-l-flex__item">Successful assignment</div>
2715
2921
  </div>
@@ -2766,10 +2972,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2766
2972
  <dt class="pf-v6-c-description-list__term">
2767
2973
  <div class="pf-v6-l-flex pf-m-nowrap">
2768
2974
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2769
- <i
2770
- class="fas fa-check-circle pf-v6-u-success-color-100"
2771
- aria-hidden="true"
2772
- ></i>
2975
+ <span class="pf-v6-c-icon">
2976
+ <span class="pf-v6-c-icon__content pf-m-success">
2977
+ <svg
2978
+ class="pf-v6-svg"
2979
+ viewBox="0 0 32 32"
2980
+ fill="currentColor"
2981
+ aria-hidden="true"
2982
+ role="img"
2983
+ width="1em"
2984
+ height="1em"
2985
+ >
2986
+ <path
2987
+ 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"
2988
+ />
2989
+ </svg>
2990
+ </span>
2991
+ </span>
2773
2992
  </div>
2774
2993
  <div class="pf-v6-l-flex__item">Created container</div>
2775
2994
  </div>
@@ -2792,10 +3011,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2792
3011
  <dt class="pf-v6-c-description-list__term">
2793
3012
  <div class="pf-v6-l-flex pf-m-nowrap">
2794
3013
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2795
- <i
2796
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
2797
- aria-hidden="true"
2798
- ></i>
3014
+ <span class="pf-v6-c-icon">
3015
+ <span class="pf-v6-c-icon__content pf-m-warning">
3016
+ <svg
3017
+ class="pf-v6-svg"
3018
+ viewBox="0 0 32 32"
3019
+ fill="currentColor"
3020
+ aria-hidden="true"
3021
+ role="img"
3022
+ width="1em"
3023
+ height="1em"
3024
+ >
3025
+ <path
3026
+ 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"
3027
+ />
3028
+ </svg>
3029
+ </span>
3030
+ </span>
2799
3031
  </div>
2800
3032
  <div
2801
3033
  class="pf-v6-l-flex__item"
@@ -2820,10 +3052,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2820
3052
  <dt class="pf-v6-c-description-list__term">
2821
3053
  <div class="pf-v6-l-flex pf-m-nowrap">
2822
3054
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2823
- <i
2824
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2825
- aria-hidden="true"
2826
- ></i>
3055
+ <span class="pf-v6-c-icon">
3056
+ <span class="pf-v6-c-icon__content pf-m-danger">
3057
+ <svg
3058
+ class="pf-v6-svg"
3059
+ viewBox="0 0 32 32"
3060
+ fill="currentColor"
3061
+ aria-hidden="true"
3062
+ role="img"
3063
+ width="1em"
3064
+ height="1em"
3065
+ >
3066
+ <path
3067
+ 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"
3068
+ />
3069
+ </svg>
3070
+ </span>
3071
+ </span>
2827
3072
  </div>
2828
3073
  <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
2829
3074
  </div>
@@ -2846,10 +3091,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2846
3091
  <dt class="pf-v6-c-description-list__term">
2847
3092
  <div class="pf-v6-l-flex pf-m-nowrap">
2848
3093
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2849
- <i
2850
- class="fas fa-check-circle pf-v6-u-success-color-100"
2851
- aria-hidden="true"
2852
- ></i>
3094
+ <span class="pf-v6-c-icon">
3095
+ <span class="pf-v6-c-icon__content pf-m-success">
3096
+ <svg
3097
+ class="pf-v6-svg"
3098
+ viewBox="0 0 32 32"
3099
+ fill="currentColor"
3100
+ aria-hidden="true"
3101
+ role="img"
3102
+ width="1em"
3103
+ height="1em"
3104
+ >
3105
+ <path
3106
+ 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"
3107
+ />
3108
+ </svg>
3109
+ </span>
3110
+ </span>
2853
3111
  </div>
2854
3112
  <div class="pf-v6-l-flex__item">Created container</div>
2855
3113
  </div>
@@ -2872,10 +3130,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2872
3130
  <dt class="pf-v6-c-description-list__term">
2873
3131
  <div class="pf-v6-l-flex pf-m-nowrap">
2874
3132
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2875
- <i
2876
- class="fas fa-check-circle pf-v6-u-success-color-100"
2877
- aria-hidden="true"
2878
- ></i>
3133
+ <span class="pf-v6-c-icon">
3134
+ <span class="pf-v6-c-icon__content pf-m-success">
3135
+ <svg
3136
+ class="pf-v6-svg"
3137
+ viewBox="0 0 32 32"
3138
+ fill="currentColor"
3139
+ aria-hidden="true"
3140
+ role="img"
3141
+ width="1em"
3142
+ height="1em"
3143
+ >
3144
+ <path
3145
+ 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"
3146
+ />
3147
+ </svg>
3148
+ </span>
3149
+ </span>
2879
3150
  </div>
2880
3151
  <div class="pf-v6-l-flex__item">Created container</div>
2881
3152
  </div>
@@ -3835,7 +4106,21 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3835
4106
  <div class="pf-v6-l-bullseye">
3836
4107
  <div class="pf-v6-c-empty-state pf-m-xs">
3837
4108
  <div class="pf-v6-c-empty-state__content">
3838
- <i class="fas fa-plus-circle pf-v6-c-empty-state__icon"></i>
4109
+ <div class="pf-v6-c-empty-state__icon">
4110
+ <svg
4111
+ class="pf-v6-svg"
4112
+ viewBox="0 0 32 32"
4113
+ fill="currentColor"
4114
+ aria-hidden="true"
4115
+ role="img"
4116
+ width="1em"
4117
+ height="1em"
4118
+ >
4119
+ <path
4120
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
4121
+ />
4122
+ </svg>
4123
+ </div>
3839
4124
  <div class="pf-v6-c-card__title">
3840
4125
  <h2
3841
4126
  class="pf-v6-c-card__title-text pf-m-md"
@@ -4518,7 +4803,21 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4518
4803
  <div class="pf-v6-l-bullseye">
4519
4804
  <div class="pf-v6-c-empty-state pf-m-xs">
4520
4805
  <div class="pf-v6-c-empty-state__content">
4521
- <i class="fas fa-plus-circle pf-v6-c-empty-state__icon"></i>
4806
+ <div class="pf-v6-c-empty-state__icon">
4807
+ <svg
4808
+ class="pf-v6-svg"
4809
+ viewBox="0 0 32 32"
4810
+ fill="currentColor"
4811
+ aria-hidden="true"
4812
+ role="img"
4813
+ width="1em"
4814
+ height="1em"
4815
+ >
4816
+ <path
4817
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
4818
+ />
4819
+ </svg>
4820
+ </div>
4522
4821
  <div class="pf-v6-c-card__title">
4523
4822
  <h2
4524
4823
  class="pf-v6-c-card__title-text pf-m-md"
@@ -5965,9 +6264,21 @@ This demo showcases how you can position a side-panel drawer on top of the other
5965
6264
  <div class="pf-v6-l-bullseye">
5966
6265
  <div class="pf-v6-c-empty-state pf-m-xs">
5967
6266
  <div class="pf-v6-c-empty-state__content">
5968
- <i
5969
- class="fas fa-plus-circle pf-v6-c-empty-state__icon"
5970
- ></i>
6267
+ <div class="pf-v6-c-empty-state__icon">
6268
+ <svg
6269
+ class="pf-v6-svg"
6270
+ viewBox="0 0 32 32"
6271
+ fill="currentColor"
6272
+ aria-hidden="true"
6273
+ role="img"
6274
+ width="1em"
6275
+ height="1em"
6276
+ >
6277
+ <path
6278
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
6279
+ />
6280
+ </svg>
6281
+ </div>
5971
6282
  <div class="pf-v6-c-card__title">
5972
6283
  <h2
5973
6284
  class="pf-v6-c-card__title-text pf-m-md"