diff --git a/README.md b/README.md index 2e6d08b..6d0e00b 100644 --- a/README.md +++ b/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"; diff --git a/generate/generate-icons.ts b/generate/generate-icons.ts index 19df98a..0f93a05 100644 --- a/generate/generate-icons.ts +++ b/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(//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;` diff --git a/generate/packs/font-awesome-free.ts b/generate/packs/font-awesome-free.ts new file mode 100644 index 0000000..525bf53 --- /dev/null +++ b/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 = /^.*\/(?.+?)\/(?.+?).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", +}); diff --git a/generate/packs/index.ts b/generate/packs/index.ts index 84e1896..6e354d3 100644 --- a/generate/packs/index.ts +++ b/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"; diff --git a/package.json b/package.json index d8d902e..52663a8 100644 --- a/package.json +++ b/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" ],