add font awesome icons

README.md

@@ -5,6 +5,7 @@ Include popular icons easily in your Qwik projects with `@qwikest/icons` 🚀
 Currently included libraries (with icon prefix):
 
 - `Bs`: [Bootstrap Icons](https://icons.getbootstrap.com/)
+- `Fa`: [Font Awesome 6 Free](https://fontawesome.com/v6/icons/?o=r&m=free)
 - `Fl`: [Flowbite Icons](https://flowbite.com/icons/)
 - `Go`: [Octicons](https://primer.style/design/foundations/icons/) by GitHub
 - `Hi`: [Heroicons](https://heroicons.com/) by Tailwind
@@ -47,6 +48,7 @@ export const MyComponent = component$(() => {
 
 ```tsx
 import { Bs1Circle } from "@qwikest/icons/bootstrap";
+import { Fa0Solid } from "@qwikest/icons/font-awesome";
 import { FlAdressBookSolid } from "@qwikest/icons/flowbite";
 import { HiAcademicCapMini } from "@qwikest/icons/heroicons";
 import { In1StMedal } from "@qwikest/icons/iconoir";

generate/generate-icons.ts

@@ -74,6 +74,7 @@ async function generateIconVariant(file: string, pack: IconPackConfig) {
 
   const optimized = optimize(replaced, {
     plugins: [
+      "removeComments",
       "removeDimensions",
       {
         name: "addAttributesToSVGElement",
@@ -92,7 +93,8 @@ async function generateIconVariant(file: string, pack: IconPackConfig) {
   const svgElement = optimized
     .match(/<svg[\w\W]*<\/svg>/gm)
     ?.toString()
-    .replace(">", ` {...props} >`);
+    .replace(">", ` {...props} >`)
+    .replace(/<!--.*?-->/g, "");
 
   const fileContent = [
     `export const ${names.camelCase} = (props) =>`,
@@ -136,7 +138,7 @@ async function generateIcons(pack: IconPackConfig) {
 
   const indexDeclarationContent = [
     "import type { JSXNode } from '@builder.io/qwik';",
-    "import { IconProps } from '../../utils';",
+    "import type { IconProps } from '../../utils';",
     ...variantsResult.map(
       (variant) =>
         `export declare const ${variant.symbolName}: (props: IconProps) => JSXNode;`

generate/packs/font-awesome-free.ts

@@ -0,0 +1,37 @@
+import glob from "fast-glob";
+import { definePack } from "../define-pack";
+import { extractor } from "../extractor";
+
+const extractRegex = /^.*\/(?<variant>.+?)\/(?<name>.+?).svg/;
+
+function extract(path: string) {
+  const { variant, name } = extractor(extractRegex)(path);
+
+  if (variant === "brands") {
+    return { name };
+  }
+
+  return { variant, name };
+}
+
+export const fontAwesomeFreePack = definePack({
+  name: "Font Awesome 6 Free",
+  prefix: "Fa",
+  variants: {
+    variant: ["solid", "regular"],
+  },
+  defaultVariants: {},
+  download: {
+    zip: "https://github.com/FortAwesome/Font-Awesome/archive/refs/heads/6.x.zip",
+    folder: "Font-Awesome-6.x/svgs",
+  },
+  contents: {
+    files: glob("download/Font Awesome 6 Free/*/*.svg"),
+    extract: extract,
+  },
+  projectUrl: "https://fontawesome.com/v6/icons/?o=r&m=free",
+  license: "CC 4.0",
+  licenseUrl:
+    "https://github.com/FortAwesome/Font-Awesome/blob/6.x/LICENSE.txt",
+  coloring: "fill",
+});

generate/packs/index.ts

@@ -1,5 +1,6 @@
 export * from "./bootstrap";
 export * from "./flowbite";
+export * from "./font-awesome-free";
 // Box icon support isn't fully functional yet:
 // export * from "./boxicons";
 export * from "./heroicons";

package.json

@@ -39,6 +39,11 @@
       "require": "./lib/fl.qwik.cjs",
       "types": "./lib/icons/fl/fl.d.ts"
     },
+    "./font-awesome": {
+      "import": "./lib/fa.qwik.mjs",
+      "require": "./lib/fa.qwik.cjs",
+      "types": "./lib/icons/fa/fa.d.ts"
+    },
     "./heroicons": {
       "import": "./lib/hi.qwik.mjs",
       "require": "./lib/hi.qwik.cjs",
@@ -91,6 +96,9 @@
       "flowbite": [
         "./lib/icons/fl/fl.d.ts"
       ],
+      "font-awesome": [
+        "./lib/icons/fa/fa.d.ts"
+      ],
       "octicons": [
         "./lib/icons/go/go.d.ts"
       ],