From 5561cd86b51a8471ebf742166062c0009150347e Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 8 Dec 2022 06:08:26 +0800
Subject: [PATCH] refactor(icons): upgrade font-awesome syntax to version 6

---
 .stylelintrc.json        | 8 +-------
 _sass/addon/commons.scss | 7 +++++--
 _sass/addon/module.scss  | 6 +++---
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 0dfc8b2..66c0ffb 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -11,12 +11,6 @@
     "alpha-value-notation": "number",
     "selector-not-notation": "simple",
     "color-hex-length": "long",
-    "declaration-block-single-line-max-declarations": 3,
-    "font-family-no-missing-generic-family-keyword": [
-      true,
-      {
-        "ignoreFontFamilies": ["Font Awesome 5 Free"]
-      }
-    ]
+    "declaration-block-single-line-max-declarations": 3
   }
 }
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 1b9b4f1..4e55dfb 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -98,10 +98,13 @@ blockquote {
     color: var(--prompt-text-color);
 
     &::before {
-      font-family: "Font Awesome 5 Free";
       text-align: center;
       width: 1.25rem;
       margin-right: 0.75rem;
+      position: relative;
+      top: 0.4rem;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
     }
 
     > div {
@@ -113,7 +116,7 @@ blockquote {
     }
   }
 
-  @include prompt("tip", "\f0eb", 400);
+  @include prompt("tip", "\f0eb", "regular");
   @include prompt("info", "\f06a");
   @include prompt("warning", "\f06a");
   @include prompt("danger", "\f071");
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 9f1c986..1f98002 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -141,14 +141,14 @@
   transform: translateX(-50%);
 }
 
-@mixin prompt($type, $fw-icon, $icon-weight: 900) {
+@mixin prompt($type, $fa-content, $fa-style: "solid") {
   &.prompt-#{$type} {
     background-color: var(--prompt-#{$type}-bg);
 
     &::before {
-      content: $fw-icon;
+      content: $fa-content;
       color: var(--prompt-#{$type}-icon-color);
-      font-weight: $icon-weight;
+      font: var(--fa-font-#{$fa-style});
     }
   }
 }