perf-FontAwesomeIcon 字体优化

src/components/FontAwesomeIcon/scss/_core.scss

@@ -1,5 +1,6 @@
 // base icon class definition
 // -------------------------
+@import 'variables';
 
 .#{$fa-css-prefix} {
   font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
@@ -38,30 +39,43 @@
 
 .fas,
 .#{$fa-css-prefix}-classic,
-.#{$fa-css-prefix}-solid,
+.#{$fa-css-prefix}-solid {
+  font-family: $fa-style-family-solid;
+}
 .far,
-.#{$fa-css-prefix}-regular,
+.#{$fa-css-prefix}-classic,
+.#{$fa-css-prefix}-regular{
+  font-family: $fa-style-family-regular;
+}
+
 .fal,
-.#{$fa-css-prefix}-light,
+.#{$fa-css-prefix}-classic,
+.#{$fa-css-prefix}-light{
+  font-family: $fa-style-family-light;
+}
+
+.fad,
+.#{$fa-css-prefix}-classic,
+.#{$fa-css-prefix}-duotone {
+  font-family: $fa-style-family-duotone;
+}
+
 .fat,
+.#{$fa-css-prefix}-classic,
 .#{$fa-css-prefix}-thin
 {
-  font-family: 'Font Awesome 6';
+  font-family: $fa-style-family-thin;
 }
 
 .fab,
 .#{$fa-css-prefix}-brands {
-  font-family: 'Font Awesome 6 Brands';
+  font-family: $fa-style-family-brands;
 }
 
-.fad,
-.#{$fa-css-prefix}-duotone {
-  font-family: 'Font Awesome 6 Duotone';
-}
 
 .fass,
 .#{$fa-css-prefix}-harp-solid.#{$fa-css-prefix}-solid {
-  font-family: 'Font Awesome 6 Sharp';
+  font-family: $fa-style-family-sharp-solid;
 }
 
 

src/components/FontAwesomeIcon/scss/_mixins.scss

@@ -64,6 +64,42 @@
   }
 }
 
+@mixin fa-icon-light($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-light;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-thin($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-thin;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-sharp-solid($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-sharp-solid;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-duotone($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-duotone;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
 @mixin fa-icon-brands($fa-var) {
   @extend %fa-icon;
   @extend .fa-brands;

src/components/FontAwesomeIcon/scss/_variables.scss

@@ -5,6 +5,15 @@ $fa-css-prefix          : fa !default;
 $fa-style               : 900 !default;
 $fa-style-family        : "Font Awesome 6" !default;
 
+$fa-style-family-solid : '#{ $fa-style-family } Solid';
+$fa-style-family-regular : '#{ $fa-style-family } Regular';
+$fa-style-family-light  : '#{ $fa-style-family } Light';
+$fa-style-family-thin: '#{ $fa-style-family } Thin';
+$fa-style-family-sharp-solid : '#{ $fa-style-family } Sharp Solid';
+$fa-style-family-brands : '#{ $fa-style-family } Brands Regular';
+$fa-style-family-duotone : '#{ $fa-style-family } Duotone Solid';
+
+
 $fa-display             : inline-block !default;
 
 $fa-fw-width            : fa-divide(20em, 16) !default;