Include popular icons easily in your Qwik projects with @qwikest/icons 🚀
Currently included libraries (with icon prefix):
Bs: Bootstrap IconsFa: Font Awesome 6 FreeFl: Flowbite IconsGo: Octicons by GitHubHi: Heroicons by TailwindIn: IconoirIo: Ionicons by IonicLu: Lucide [superset of feather icons]Mo: Mono IconsMat: Material IconsSi: Simple Icons [icons for popular brands]Tb: Tabler Icons
Installation
Simply install the package with your package manager of choice:
npm i @qwikest/icons yarn add @qwikest/icons pnpm add @qwikest/icons
Usage
If you want to, you can also directly start playing around with the package in this code sandbox – no setup needed 👀
import { LuRocket } from "@qwikest/icons/lucide"; export const MyComponent = component$(() => { // Icon size and color are inherited by default ⬇️ return ( <div style={{ color: "red", fontSize: "40px" }}> <LuRocket /> </div> ); });
Available Libraries
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"; import { IoAirplaneOutline } from "@qwikest/icons/ionicons"; import { LuRocket } from "@qwikest/icons/lucide"; import { MatGifBoxSharp } from "@qwikest/icons/material"; import { MoAdd } from "@qwikest/icons/monoicons"; import { GoFlame24 } from "@qwikest/icons/octicons"; import { Si1Password } from "@qwikest/icons/simpleicons"; import { Tb123 } from "@qwikest/icons/tablericons";
Missing a library? Feel free to open an issue or even a MR 🤝
Upcoming
- 🖌️ Configurable stroke width for supported packages
- 🎁 Additional icon libraries
- 🎨 Built-in company based colors for simple icons