feat(components): add fontawesome-with-brands keyword

docs-shared/src/theme-wrapper.ts

@@ -34,12 +34,7 @@ export const theme = (
 
     favicon: "/favicon.ico",
 
-    iconAssets: [
-      "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/brands.min.css",
-      "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/solid.min.css",
-      "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/fontawesome.min.css",
-    ],
-    iconPrefix: "fas fa-",
+    iconAssets: "fontawesome-with-brands ",
 
     repo: `vuepress-theme-hope/vuepress-theme-hope/tree/main/packages/${name}/`,
     docsRepo: "vuepress-theme-hope/vuepress-theme-hope",

docs/components/src/config.md

@@ -51,7 +51,19 @@ Global config for components.
 
 ### componentsOptions.fontIcon.assets
 
-- Type: `` "iconfont" | "fontawesome" | `//${string}` | `http://${string}` | `https://${string}`  ``
+- Type: `FontIconAssets`
+
+  ```ts
+  type Link = `//${string}` | `http://${string}` | `https://${string}`;
+
+  type FontIconAssets =
+    | "iconfont"
+    | "fontawesome"
+    | "fontawesome-with-brands "
+    | Link
+    | Link[];
+  ```
+
 - Required: No
 - Details:
   - [Guide → FontIcon](./guide/fonticon.md)

docs/components/src/guide/fonticon.md

@@ -57,7 +57,7 @@ You should set icon related assets to `componentsOptions.fontIcon.assets`, where
 
 For example, you may use [iconfont.cn](https://www.iconfont.cn/?lang=en-us) and [fontawesome](https://fontawesome.com) to generate your own assets.
 
-To keep it simple, we add built-in keywords `"iconfont"` and `"fontawesome"` support for you to get started easily.
+To keep it simple, we add built-in keywords `"iconfont"`, `"fontawesome"` and `"fontawesome-with-brand` support for you to get started easily.
 
 ::: tip
 

docs/components/src/zh/config.md

@@ -51,7 +51,19 @@ icon: gears
 
 ### componentsOptions.fontIcon.assets
 
-- 类型: `` "iconfont" | "fontawesome" | `//${string}` | `http://${string}` | `https://${string}`  ``
+- 类型: `FontIconAssets`
+
+  ```ts
+  type Link = `//${string}` | `http://${string}` | `https://${string}`;
+
+  export type FontIconAssets =
+    | "iconfont"
+    | "fontawesome"
+    | "fontawesome-with-brand"
+    | Link
+    | Link[];
+  ```
+
 - 必填: 否
 - 详情:
   - [指南 → FontIcon](./guide/fonticon.md)

docs/components/src/zh/guide/fonticon.md

@@ -57,7 +57,7 @@ Icon name
 
 例如，你可以使用 [iconfont.cn](https://www.iconfont.cn/?lang=zh-cn) 和 [fontawesome](https://fontawesome.com) 来生成你自己的资源
 
-为了便于上手，我们添加了内置关键字 `"iconfont"` 和 `"fontawesome"` 支持。
+为了便于上手，我们添加了内置关键字 `"iconfont"`、`"fontawesome"` 和 `"fontawesome-with-brand` 支持。
 
 ::: tip
 

docs/theme/package.json

@@ -22,7 +22,7 @@
     "@types/katex": "0.16.0",
     "@vuepress/client": "2.0.0-beta.60",
     "@vuepress/shared": "2.0.0-beta.60",
-    "@vueuse/core": "9.10.0",
+    "@vueuse/core": "9.11.0",
     "axios": "1.2.3",
     "docs-shared": "workspace:*",
     "katex": "0.16.4",

docs/theme/src/config/theme/appearance.md

@@ -21,7 +21,19 @@ These options are only valid when setting directly under the theme options, sett
 
 ## iconAssets <Badge text="Root only" type="warning" />
 
-- Type: `` "iconfont" | "fontawesome" | `//${string}` | `http://${string}` | `https://${string}`  ``
+- Type: `FontIconAssets`
+
+  ```ts
+  type Link = `//${string}` | `http://${string}` | `https://${string}`;
+
+  export type FontIconAssets =
+    | "iconfont"
+    | "fontawesome"
+    | "fontawesome-with-brand"
+    | Link
+    | Link[];
+  ```
+
 - Required: No
 - Details: [Interface → Icon](../../guide/interface/icon.md)
 

docs/theme/src/guide/interface/icon.md

@@ -48,7 +48,7 @@ You should set icon related assets to `iconAssets`, where you can set one url or
 
 For example, you may use [iconfont.cn](https://www.iconfont.cn/?lang=en-us) and [fontawesome](https://fontawesome.com) to generate your own assets.
 
-To keep it simple, we add built-in keywords `"iconfont"` and `"fontawesome"` support for you to get started easily.
+To keep it simple, we add built-in keywords `"iconfont"`, `"fontawesome"` and `"fontawesome-with-brand` support for you to get started easily.
 
 ::: tip
 
@@ -140,27 +140,31 @@ By default, we use jsdelivr CDN to load V6 version of fontawesome free icons. Th
 
 @tab TS
 
-```ts {7}
+@tab TS
+
+```ts {8}
 // .vuepress/config.ts
 import { defineUserConfig } from "vuepress";
 import { hopeTheme } from "vuepress-theme-hope";
 
 export default defineUserConfig({
   theme: hopeTheme({
+    // Or "fontawesome-with-brands"
     iconAssets: "fontawesome",
   }),
 });
 ```
 
 @tab JS
 
-```js {7}
+```js {8}
 // .vuepress/config.ts
 import { defineUserConfig } from "vuepress";
 import { hopeTheme } from "vuepress-theme-hope";
 
 export default defineUserConfig({
   theme: hopeTheme({
+    // OR "fontawesome-with-brands"
     iconAssets: "fontawesome",
   }),
 });

docs/theme/src/ru/config/theme/appearance.md

@@ -21,7 +21,19 @@ tag:
 
 ## iconAssets <Badge text="Только root" type="warning" />
 
-- Тип: `` "iconfont" | "fontawesome" | `//${string}` | `http://${string}` | `https://${string}`  ``
+- Тип: `FontIconAssets`
+
+  ```ts
+  type Link = `//${string}` | `http://${string}` | `https://${string}`;
+
+  export type FontIconAssets =
+    | "iconfont"
+    | "fontawesome"
+    | "fontawesome-with-brand"
+    | Link
+    | Link[];
+  ```
+
 - Обязательный: Нет
 - Детали: [Интерфейс → Иконка](../../guide/interface/icon.md)
 

docs/theme/src/ru/guide/interface/icon.md

@@ -48,7 +48,7 @@ You should set icon related assets to `iconAssets`, where you can set one url or
 
 For example, you may use [iconfont.cn](https://www.iconfont.cn/?lang=en-us) and [fontawesome](https://fontawesome.com) to generate your own assets.
 
-To keep it simple, we add built-in keywords `"iconfont"` and `"fontawesome"` support for you to get started easily.
+To keep it simple, we add built-in keywords `"iconfont"`, `"fontawesome"` and `"fontawesome-with-brand` support for you to get started easily.
 
 ::: tip
 
@@ -144,27 +144,29 @@ By default, we use jsdelivr CDN to load V6 version of fontawesome free icons. Th
 
 @tab TS
 
-```ts {7}
+```ts {8}
 // .vuepress/config.ts
 import { defineUserConfig } from "vuepress";
 import { hopeTheme } from "vuepress-theme-hope";
 
 export default defineUserConfig({
   theme: hopeTheme({
+    // Or "fontawesome-with-brands"
     iconAssets: "fontawesome",
   }),
 });
 ```
 
 @tab JS
 
-```js {7}
+```js {8}
 // .vuepress/config.ts
 import { defineUserConfig } from "vuepress";
 import { hopeTheme } from "vuepress-theme-hope";
 
 export default defineUserConfig({
   theme: hopeTheme({
+    // OR "fontawesome-with-brands"
     iconAssets: "fontawesome",
   }),
 });

docs/theme/src/zh/config/theme/appearance.md

@@ -21,7 +21,19 @@ tag:
 
 ## iconAssets <Badge text="仅限 Root" type="warning" />
 
-- 类型: `` "iconfont" | "fontawesome" | `//${string}` | `http://${string}` | `https://${string}`  ``
+- 类型: `FontIconAssets`
+
+  ```ts
+  type Link = `//${string}` | `http://${string}` | `https://${string}`;
+
+  export type FontIconAssets =
+    | "iconfont"
+    | "fontawesome"
+    | "fontawesome-with-brand"
+    | Link
+    | Link[];
+  ```
+
 - 必填: 否
 - 详情: [界面 → 图标](../../guide/interface/icon.md)
 

docs/theme/src/zh/guide/interface/icon.md

@@ -48,7 +48,7 @@ head:
 
 例如，你可以使用 [iconfont.cn](https://www.iconfont.cn/?lang=zh-cn) 和 [fontawesome](https://fontawesome.com) 来生成你自己的资源
 
-为了便于上手，我们添加了内置关键字 `"iconfont"` 和 `"fontawesome"` 支持。
+为了便于上手，我们添加了内置关键字 `"iconfont"`、`"fontawesome"` 和 `"fontawesome-with-brand` 支持。
 
 ::: tip
 
@@ -146,27 +146,29 @@ head:
 
 @tab TS
 
-```ts {7}
+```ts {8}
 // .vuepress/config.ts
 import { defineUserConfig } from "vuepress";
 import { hopeTheme } from "vuepress-theme-hope";
 
 export default defineUserConfig({
   theme: hopeTheme({
+    // 或 "fontawesome-with-brands"
     iconAssets: "fontawesome",
   }),
 });
 ```
 
 @tab JS
 
-```js {7}
+```js {8}
 // .vuepress/config.ts
 import { defineUserConfig } from "vuepress";
 import { hopeTheme } from "vuepress-theme-hope";
 
 export default defineUserConfig({
   theme: hopeTheme({
+    // 或 "fontawesome-with-brands"
     iconAssets: "fontawesome",
   }),
 });

package.json

@@ -47,9 +47,9 @@
     "@rollup/plugin-node-resolve": "15.0.1",
     "@types/inquirer": "9.0.3",
     "@types/node": "18.11.18",
-    "@typescript-eslint/eslint-plugin": "5.48.1",
-    "@typescript-eslint/parser": "5.48.1",
-    "@vitest/coverage-c8": "0.27.1",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/parser": "5.48.2",
+    "@vitest/coverage-c8": "0.27.2",
     "@vue/eslint-config-typescript": "11.0.2",
     "bumpp": "8.2.1",
     "commit-and-tag-version": "11.0.0",
@@ -58,7 +58,7 @@
     "cpx2": "4.2.0",
     "cross-env": "7.0.3",
     "cz-git": "1.4.1",
-    "esbuild": "0.17.2",
+    "esbuild": "0.17.3",
     "eslint": "8.32.0",
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-prettier": "4.2.1",
@@ -84,7 +84,7 @@
     "tslib": "2.4.1",
     "tsx": "3.12.2",
     "typescript": "4.9.4",
-    "vitest": "0.27.1"
+    "vitest": "0.27.2"
   },
   "packageManager": "pnpm@7.25.0",
   "engines": {

packages/components/package.json

@@ -51,7 +51,7 @@
     "@vuepress/client": "2.0.0-beta.60",
     "@vuepress/shared": "2.0.0-beta.60",
     "@vuepress/utils": "2.0.0-beta.60",
-    "@vueuse/core": "^9.10.0",
+    "@vueuse/core": "^9.11.0",
     "artplayer": "^4.6.1",
     "balloon-css": "^1.2.0",
     "dashjs": "^4.5.2",

packages/components/src/client/components/FontIcon.ts

@@ -53,6 +53,7 @@ export default defineComponent({
     return (): VNode | null =>
       props.icon
         ? h("span", {
+            key: props.icon,
             class: [
               "font-icon icon",
               props.icon.includes(" ")

packages/components/src/client/styles/font-icon.scss

@@ -1,21 +1,6 @@
 .font-icon {
   display: inline-block;
 
-  // ensure fontawesome icon is not too large comparing with text
-  &.svg-inline--fa {
-    width: 0.9em;
-    height: 0.9em;
-  }
-
-  &.fas,
-  &.fa-solid,
-  &.fab,
-  &.fa-brands {
-    &::before {
-      font-size: 0.9em;
-    }
-  }
-
   #{hope-config.$content-class} & {
     vertical-align: middle;
   }