wip-font-awesome-icon

pnpm-lock.yaml

@@ -19,6 +19,7 @@ specifiers:
   '@dcloudio/uni-quickapp-webview': ^3.0.0-alpha-3060420220922004
   '@dcloudio/vite-plugin-uni': ^3.0.0-alpha-3060420220922004
   '@fortawesome/fontawesome-free': ^6.2.0
+  '@fortawesome/vue-fontawesome': ^2.0.8
   '@types/crypto-js': ^4.1.1
   '@types/lodash-es': ^4.17.6
   '@types/node': ^17.0.45
@@ -65,6 +66,7 @@ dependencies:
   '@dcloudio/uni-mp-weixin': 3.0.0-alpha-3060420220922004_postcss@8.4.16+vue@3.2.39
   '@dcloudio/uni-quickapp-webview': 3.0.0-alpha-3060420220922004_postcss@8.4.16+vue@3.2.39
   '@fortawesome/fontawesome-free': 6.2.0
+  '@fortawesome/vue-fontawesome': 2.0.8_4h6vf4pkzarhnju6fzmo7mfhke
   crypto-js: 4.1.1
   echarts: 5.4.0
   lodash-es: 4.17.21
@@ -951,12 +953,36 @@ packages:
       - supports-color
     dev: true
 
+  /@fortawesome/fontawesome-common-types/6.2.0:
+    resolution: {integrity: sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dev: false
+
   /@fortawesome/fontawesome-free/6.2.0:
     resolution: {integrity: sha512-CNR7qRIfCwWHNN7FnKUniva94edPdyQzil/zCwk3v6k4R6rR2Fr8i4s3PM7n/lyfPA6Zfko9z5WDzFxG9SW1uQ==}
     engines: {node: '>=6'}
     requiresBuild: true
     dev: false
 
+  /@fortawesome/fontawesome-svg-core/6.2.0:
+    resolution: {integrity: sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 6.2.0
+    dev: false
+
+  /@fortawesome/vue-fontawesome/2.0.8_4h6vf4pkzarhnju6fzmo7mfhke:
+    resolution: {integrity: sha512-SRmP0q9Ox4zq8ydDR/hrH+23TVU1bdwYVnugLVaAIwklOHbf56gx6JUGlwES7zjuNYqzKgl8e39iYf6ph8qSQw==}
+    peerDependencies:
+      '@fortawesome/fontawesome-svg-core': ~1 || ~6
+      vue: ~2
+    dependencies:
+      '@fortawesome/fontawesome-svg-core': 6.2.0
+      vue: 3.2.39
+    dev: false
+
   /@humanwhocodes/config-array/0.10.5:
     resolution: {integrity: sha512-XVVDtp+dVvRxMoxSiSfasYaG02VEe1qH5cKgMQJWhol6HwzbcqoCMJi8dAGoYAO57jhUyhI6cWuRiTcRaDaYug==}
     engines: {node: '>=10.10.0'}

src/assets/style/main.scss

@@ -1,6 +1,3 @@
 @import 'auxiliary';
 @import 'mixin';
-@import 'flex';
-
-/* import fontawesome icon */
-@import 'font_awesome/fontawesome';
+@import 'flex';

src/components/FontAwesomeIcon/index.scss

@@ -1,6 +1,8 @@
-/* import fontawesome icon */
-
 @import "scss/fontawesome";
-@import "scss/brands";
 @import "scss/solid";
+@import "scss/brands";
 @import "scss/regular";
+@import "scss/light";
+@import "scss/thin";
+@import "scss/duotone";
+@import "scss/sharp-solid";

src/components/FontAwesomeIcon/index.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+  /**
+   * 基于 Font Awesome Icon v6.2.0
+   * 不支持 pro (专业版)的相关功能 和 图标
+   * solid 支持
+   * regular 支持
+   * brands 支持
+   * light 不支持
+   * sharp 不支持
+   * thin 不支持
+   * duotone 不支持
+   */
+</script>
+<template>
+  <view> <view class="fa-solid fa-house" />solid </view>
+  <view> <view class="fa-regular fa-house" />regular</view>
+  <view> <view class="fa-light fa-house" />light</view>
+  <view> <view class="fa-thin fa-house" />thin</view>
+  <view> <view class="fa-duotone fa-house" />duotone</view>
+  <view> <view class="fa-brands fa-bilibili" />brands </view>
+</template>
+<style lang="scss" scoped>
+  .font-awesome-icon {
+    display: inline-block;
+  }
+</style>

src/components/FontAwesomeIcon/props.ts

@@ -0,0 +1,3 @@
+const FontAwesomeIconProps = {
+  // is,
+};

src/components/FontAwesomeIcon/scss/_core.scss

@@ -14,7 +14,14 @@
 .far,
 .#{$fa-css-prefix}-regular,
 .fab,
-.#{$fa-css-prefix}-brands {
+.#{$fa-css-prefix}-brands,
+.fal,
+.#{$fa-css-prefix}-light,
+.fat,
+.#{$fa-css-prefix}-thin,
+.fad,
+.#{$fa-css-prefix}-duotone
+{
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: var(--#{$fa-css-prefix}-display, #{$fa-display});
@@ -24,11 +31,18 @@
   text-rendering: auto;
 }
 
+//.fa, .fa-brands, .fa-classic, .fa-duotone, .fa-light, .fa-regular, .fa-sharp, .fa-sharp-solid, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fass, .fat
+
 .fas,
 .#{$fa-css-prefix}-classic,
 .#{$fa-css-prefix}-solid,
 .far,
-.#{$fa-css-prefix}-regular {
+.#{$fa-css-prefix}-regular,
+.fal,
+.#{$fa-css-prefix}-light,
+.fat,
+.#{$fa-css-prefix}-thin
+{
   font-family: 'Font Awesome 6 Free';
 }
 
@@ -37,6 +51,11 @@
   font-family: 'Font Awesome 6 Brands';
 }
 
+.fad,
+.#{$fa-css-prefix}-duotone {
+  font-family: 'Font Awesome 6 Duotone';
+}
+
 
 %fa-icon {
   @include fa-icon;

src/components/FontAwesomeIcon/scss/_variables.scss

@@ -46,7 +46,7 @@ $fa-stack-width         : ($fa-fw-width * 2) !default;
 $fa-stack-z-index       : auto !default;
 
 $fa-font-display        : block !default;
-$fa-font-path           : "../webfonts" !default;
+$fa-font-path           : "./webfonts" !default;
 
 $fa-var-0: \30;
 $fa-var-1: \31;

src/components/FontAwesomeIcon/scss/duotone.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-regular: normal 900 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Duotone';
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src:  url("#{$fa-font-path}/fa-duotone-900.woff2") format('woff2'),
+  url("#{$fa-font-path}/fa-duotone-900.ttf") format('truetype');
+}
+
+.far,
+.#{$fa-css-prefix}-duotone {
+  font-weight: 900;
+}

src/components/FontAwesomeIcon/scss/light.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-regular: normal 300 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 300;
+  font-display: $fa-font-display;
+  src:  url("#{$fa-font-path}/fa-light-300.woff2") format('woff2'),
+  url("#{$fa-font-path}/fa-light-300.ttf") format('truetype');
+}
+
+.far,
+.#{$fa-css-prefix}-light {
+  font-weight: 300;
+}

src/components/FontAwesomeIcon/scss/sharp-solid.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-regular: normal 900 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src:  url("#{$fa-font-path}/fa-sharp-solid-900.woff2") format('woff2'),
+  url("#{$fa-font-path}/fa-sharp-solid-900.ttf") format('truetype');
+}
+
+.far,
+.#{$fa-css-prefix}-sharp-solid {
+  font-weight: 900;
+}

src/components/FontAwesomeIcon/scss/thin.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-regular: normal 100 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 100;
+  font-display: $fa-font-display;
+  src:  url("#{$fa-font-path}/fa-thin-100.woff2") format('woff2'),
+  url("#{$fa-font-path}/fa-thin-100.ttf") format('truetype');
+}
+
+.far,
+.#{$fa-css-prefix}-thin {
+  font-weight: 100;
+}

src/horn_ui/h-icon/font-awesome-icon/fontawesome.scss

@@ -1,21 +0,0 @@
-@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
-//@import "@fortawesome/fontawesome-free/scss/_core.scss";
-//@import "@fortawesome/fontawesome-free/scss/_mixins.scss";
-//@import "@fortawesome/fontawesome-free/scss/_icons.scss";
-//@import "@fortawesome/fontawesome-free/scss/_duotone-icons.scss";
-//@import "@fortawesome/fontawesome-free/scss/_sizing.scss";
-//@import "@fortawesome/fontawesome-free/scss/_fixed-width.scss";
-//@import "@fortawesome/fontawesome-free/scss/_list.scss";
-//@import "@fortawesome/fontawesome-free/scss/_bordered-pulled.scss";
-//@import "@fortawesome/fontawesome-free/scss/_animated.scss";
-//@import "@fortawesome/fontawesome-free/scss/_rotated-flipped.scss";
-//@import "@fortawesome/fontawesome-free/scss/_stacked.scss";
-//@import "@fortawesome/fontawesome-free/scss/_screen-reader.scss";
-@import "@fortawesome/fontawesome-free/scss/brands.scss";
-@import "@fortawesome/fontawesome-free/scss/solid.scss";
-@import "@fortawesome/fontawesome-free/scss/regular.scss";
-//@import "@fortawesome/fontawesome-free/scss/light.scss";
-//@import "@fortawesome/fontawesome-free/scss/thin.scss";
-//@import "@fortawesome/fontawesome-free/scss/sharp-solid.scss";
-//@import "@fortawesome/fontawesome-free/scss/duotone.scss";
-

src/horn_ui/h-icon/font-awesome-icon/index.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup></script>
-<template>
-  <view class="font-awesome-icon">
-    <text class="fa-solid fa-house"> 1</text>
-  </view>
-</template>
-<style lang="scss" scoped>
-  .font-awesome-icon {
-    display: inline;
-  }
-</style>

src/main.ts

@@ -2,6 +2,7 @@ import { createSSRApp } from 'vue';
 import App from './App.vue';
 import { setupStore } from '@/state';
 import '@/assets/style/main.scss';
+import '@/components/FontAwesomeIcon/index.scss';
 
 export function createApp() {
   const app = createSSRApp(App);

src/pages/demo/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
   import BasicButton from '@/components/BasicButton/index.vue';
   import AppProvider from '@/components/AppProvider/inedx.vue';
-  import FontAwesomeIcon from '@/horn_ui/h-icon/font-awesome-icon/index.vue';
+  import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
   import { useRouter } from '@/hooks/router';
 
   const router = useRouter();

vite.config.ts

@@ -29,7 +29,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
     },
     server: {
       host: true,
-      open: true,
+      // open: true,
       port: env.VITE_PORT as any,
       proxy: {
         '/api': {