Merge pull request #82 from qwikerx/feat/use-icons

feat: use flowbite-qwik-icons

apps/web/package.json

@@ -52,6 +52,7 @@
     "eslint": "^9.4.0",
     "eslint-config-prettier": "^9.1.0",
     "flowbite-qwik": "workspace:*",
+    "flowbite-qwik-icons": "^0.1.4",
     "postcss": "^8.4.38",
     "prettier": "^3.3.0",
     "prettier-plugin-tailwindcss": "^0.6.1",

apps/web/src/components/CodeBlock/CodeBlock.tsx

@@ -5,7 +5,8 @@ import rehypeParse from 'rehype-parse'
 import rehypeSanitize from 'rehype-sanitize'
 import rehypeStringify from 'rehype-stringify'
 import styles from './code-block.css?inline'
-import { Button, IconCopySolid, useToggle } from 'flowbite-qwik'
+import { Button, useToggle } from 'flowbite-qwik'
+import { IconCopySolid } from 'flowbite-qwik-icons'
 
 type CodeBlockProps = { content: string; language: string; expandable?: boolean }
 

apps/web/src/components/Preview/Preview.tsx

@@ -2,18 +2,8 @@ import { PropsOf, component$, useComputed$, useSignal, useTask$, useStyles$ } fr
 import { isBrowser } from '@builder.io/qwik/build'
 import styles from './preview.css?inline'
 import { toSlug } from '~/utils/slug'
-import {
-  Button,
-  IconDesktopPcOutline,
-  IconGithubSolid,
-  IconMobilePhoneOutline,
-  IconTabletOutline,
-  Spinner,
-  useDark,
-  useMediaQuery,
-  useFlowbiteThemable,
-  useToggle,
-} from 'flowbite-qwik'
+import { Button, Spinner, useDark, useMediaQuery, useFlowbiteThemable, useToggle } from 'flowbite-qwik'
+import { IconDesktopPcOutline, IconGithubSolid, IconMobilePhoneOutline, IconTabletOutline } from 'flowbite-qwik-icons'
 import { CodeBlock } from '~/components/CodeBlock/CodeBlock'
 
 type PreviewProps = PropsOf<'iframe'> & {

apps/web/src/routes/docs/layout.tsx

@@ -1,6 +1,7 @@
 import { $, component$, Slot, useSignal } from '@builder.io/qwik'
 import { DocFooter } from '~/components/Footer/Footer'
-import { Button, IconDotsVerticalOutline, Sidebar, SidebarCollapse, SidebarItem, SidebarItemGroup, useComponentOuterClick } from 'flowbite-qwik'
+import { Button, Sidebar, SidebarCollapse, SidebarItem, SidebarItemGroup, useComponentOuterClick } from 'flowbite-qwik'
+import { IconDotsVerticalOutline } from 'flowbite-qwik-icons'
 import { NavLink } from '~/components/NavLink/NavLink'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/alert/02-alert-with-icon/index@examples.tsx

@@ -6,7 +6,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Alert, IconInfoCircleOutline } from 'flowbite-qwik'
+import { Alert } from 'flowbite-qwik'
+import { IconInfoCircleOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/alert/06-alert-additional-content/index@examples.tsx

@@ -6,7 +6,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Alert, IconEyeOutline, IconInfoCircleOutline } from 'flowbite-qwik'
+import { Alert } from 'flowbite-qwik'
+import { IconEyeOutline, IconInfoCircleOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/alert/07-alert-all-options/index@examples.tsx

@@ -6,7 +6,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Alert, IconEyeOutline, IconInfoCircleOutline } from 'flowbite-qwik'
+import { Alert } from 'flowbite-qwik'
+import { IconEyeOutline, IconInfoCircleOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/badge/06-with-icon/index@examples.tsx

@@ -4,7 +4,8 @@
  */
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Badge, IconRocketOutline } from 'flowbite-qwik'
+import { Badge } from 'flowbite-qwik'
+import { IconRocketOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/badge/08-with-icon-only/index@examples.tsx

@@ -4,7 +4,8 @@
  */
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Badge, IconRocketOutline } from 'flowbite-qwik'
+import { Badge } from 'flowbite-qwik'
+import { IconRocketOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/breadcrumb/03-custom-icons/index@examples.tsx

@@ -5,7 +5,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Breadcrumb, BreadcrumbItem, IconArrowLeftOutline, IconBarsOutline } from 'flowbite-qwik'
+import { Breadcrumb, BreadcrumbItem } from 'flowbite-qwik'
+import { IconArrowLeftOutline, IconBarsOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/button/09-button-square/index@examples.tsx

@@ -5,7 +5,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Button, IconArrowLeftOutline, IconArrowRightOutline } from 'flowbite-qwik'
+import { Button } from 'flowbite-qwik'
+import { IconArrowLeftOutline, IconArrowRightOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/button/10-button-loading/index@examples.tsx

@@ -5,7 +5,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Button, IconArrowLeftOutline, useToggle } from 'flowbite-qwik'
+import { Button, useToggle } from 'flowbite-qwik'
+import { IconArrowLeftOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/button/13-button-full/index@examples.tsx

@@ -5,7 +5,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Button, IconHomeOutline } from 'flowbite-qwik'
+import { Button } from 'flowbite-qwik'
+import { IconHomeOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/button/14-button-slot-default/index@examples.tsx

@@ -5,7 +5,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Button, IconArrowRightOutline, IconArrowRightSolid } from 'flowbite-qwik'
+import { Button } from 'flowbite-qwik'
+import { IconArrowRightOutline, IconArrowRightSolid } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/button/15-button-slot-prefix/index@examples.tsx

@@ -5,7 +5,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Button, IconHomeOutline } from 'flowbite-qwik'
+import { Button } from 'flowbite-qwik'
+import { IconHomeOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/button/16-button-slot-suffix/index@examples.tsx

@@ -5,7 +5,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Button, IconArrowRightOutline } from 'flowbite-qwik'
+import { Button } from 'flowbite-qwik'
+import { IconArrowRightOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/drawer/01-default-drawer/index@examples.tsx

@@ -6,7 +6,8 @@
 
 import { component$, Fragment, Signal, Slot, useSignal } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Button, Drawer, DrawerPosition, IconHomeOutline } from 'flowbite-qwik'
+import { Button, Drawer, DrawerPosition } from 'flowbite-qwik'
+import { IconHomeOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/dropdown/04-dropdown-items-with-icon/index@examples.tsx

@@ -5,7 +5,8 @@
 
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Dropdown, DropdownItem, IconHomeOutline, IconSearchSolid, IconTextSizeOutline } from 'flowbite-qwik'
+import { Dropdown, DropdownItem } from 'flowbite-qwik'
+import { IconHomeOutline, IconSearchSolid, IconTextSizeOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/footer/03-footer with-sitemap-links/index@examples.tsx

@@ -5,20 +5,8 @@
  */
 
 import { component$ } from '@builder.io/qwik'
-import {
-  Footer,
-  FooterCopyright,
-  FooterLink,
-  FooterLinkGroup,
-  FooterBrand,
-  FooterDivider,
-  FooterTitle,
-  FooterIcon,
-  IconFacebookSolid,
-  IconGithubSolid,
-  IconDribbbleSolid,
-  IconLinkedinSolid,
-} from 'flowbite-qwik'
+import { Footer, FooterCopyright, FooterLink, FooterLinkGroup, FooterBrand, FooterDivider, FooterTitle, FooterIcon } from 'flowbite-qwik'
+import { IconFacebookSolid, IconGithubSolid, IconDribbbleSolid, IconLinkedinSolid } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
 

apps/web/src/routes/examples/[theme-rtl]/footer/04-footer with-socials/index@examples.tsx

@@ -5,18 +5,8 @@
  */
 
 import { component$ } from '@builder.io/qwik'
-import {
-  Footer,
-  FooterCopyright,
-  FooterLink,
-  FooterLinkGroup,
-  FooterTitle,
-  FooterIcon,
-  IconFacebookSolid,
-  IconGithubSolid,
-  IconDribbbleSolid,
-  IconLinkedinSolid,
-} from 'flowbite-qwik'
+import { Footer, FooterCopyright, FooterLink, FooterLinkGroup, FooterTitle, FooterIcon } from 'flowbite-qwik'
+import { IconFacebookSolid, IconGithubSolid, IconDribbbleSolid, IconLinkedinSolid } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
 

apps/web/src/routes/examples/[theme-rtl]/input/06-with-prefix/index@examples.tsx

@@ -4,7 +4,8 @@
  */
 
 import { component$, useSignal } from '@builder.io/qwik'
-import { IconSearchOutline, Input } from 'flowbite-qwik'
+import { Input } from 'flowbite-qwik'
+import { IconSearchOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
 

apps/web/src/routes/examples/[theme-rtl]/input/07-with-suffix/index@examples.tsx

@@ -4,7 +4,8 @@
  */
 
 import { component$, useSignal } from '@builder.io/qwik'
-import { IconSearchOutline, Input, Button } from 'flowbite-qwik'
+import { Input, Button } from 'flowbite-qwik'
+import { IconSearchOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
 

apps/web/src/routes/examples/[theme-rtl]/modal/05-modal-popup/index@examples.tsx

@@ -6,7 +6,8 @@
 
 import { component$, useSignal } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { Button, IconBullhornSolid, Modal } from 'flowbite-qwik'
+import { Button, Modal } from 'flowbite-qwik'
+import { IconBullhornSolid } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/examples/[theme-rtl]/navbar/04-with-search/index@examples.tsx

@@ -4,7 +4,8 @@
  * height: 400
  */
 import { component$, useSignal } from '@builder.io/qwik'
-import { IconSearchOutline, Input, Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from 'flowbite-qwik'
+import { Input, Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from 'flowbite-qwik'
+import { IconSearchOutline } from 'flowbite-qwik-icons'
 import { Link, StaticGenerateHandler } from '@builder.io/qwik-city'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 

apps/web/src/routes/examples/[theme-rtl]/sidebar/01-default/index@examples.tsx

@@ -5,15 +5,8 @@
  */
 
 import { component$ } from '@builder.io/qwik'
-import {
-  Sidebar,
-  SidebarItemGroup,
-  IconHomeOutline,
-  IconInboxOutline,
-  IconUserCircleOutline,
-  IconShoppingBagOutline,
-  SidebarItem,
-} from 'flowbite-qwik'
+import { Sidebar, SidebarItemGroup, SidebarItem } from 'flowbite-qwik'
+import { IconHomeOutline, IconInboxOutline, IconUserCircleOutline, IconShoppingBagOutline } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
 

apps/web/src/routes/examples/[theme-rtl]/sidebar/02-with-group/index@examples.tsx

@@ -5,21 +5,18 @@
  */
 
 import { component$ } from '@builder.io/qwik'
+import { Sidebar, SidebarItemGroup, SidebarItem, SidebarCollapse } from 'flowbite-qwik'
 import {
-  Sidebar,
-  SidebarItemGroup,
   IconHomeOutline,
   IconInboxOutline,
   IconUserCircleOutline,
   IconShoppingBagOutline,
-  SidebarItem,
   IconFileEditSolid,
   IconAdressBookOutline,
   IconGearSolid,
   IconAtomSolid,
-  SidebarCollapse,
   IconAdjustmentsHorizontalSolid,
-} from 'flowbite-qwik'
+} from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
 

apps/web/src/routes/examples/[theme-rtl]/sidebar/03-with-cta/index@examples.tsx

@@ -5,23 +5,18 @@
  */
 
 import { component$, useSignal } from '@builder.io/qwik'
+import { Sidebar, SidebarItemGroup, SidebarItem, SidebarCollapse, SidebarCta, Badge } from 'flowbite-qwik'
 import {
-  Sidebar,
-  SidebarItemGroup,
   IconHomeOutline,
   IconInboxOutline,
   IconUserCircleOutline,
   IconShoppingBagOutline,
-  SidebarItem,
   IconFileEditSolid,
   IconAdressBookOutline,
   IconGearSolid,
   IconAtomSolid,
-  SidebarCollapse,
   IconAdjustmentsHorizontalSolid,
-  SidebarCta,
-  Badge,
-} from 'flowbite-qwik'
+} from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
 

apps/web/src/routes/examples/[theme-rtl]/tabs/05-tabs-with-icons/index@examples.tsx

@@ -5,7 +5,8 @@
  */
 import { component$ } from '@builder.io/qwik'
 import { StaticGenerateHandler } from '@builder.io/qwik-city'
-import { IconGridOutline, IconGridPlusOutline, IconProfileCardOutline, IconUserCircleSolid, Tab, Tabs } from 'flowbite-qwik'
+import { Tab, Tabs } from 'flowbite-qwik'
+import { IconGridOutline, IconGridPlusOutline, IconProfileCardOutline, IconUserCircleSolid } from 'flowbite-qwik-icons'
 import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
 
 export default component$(() => {

apps/web/src/routes/index.tsx

@@ -1,6 +1,7 @@
 import { component$ } from '@builder.io/qwik'
 import { DocFooter } from '~/components/Footer/Footer'
-import { Button, Jumbotron, JumbotronHeading, JumbotronSubText, IconArrowRightOutline } from 'flowbite-qwik'
+import { Button, Jumbotron, JumbotronHeading, JumbotronSubText } from 'flowbite-qwik'
+import { IconArrowRightOutline } from 'flowbite-qwik-icons'
 import { DocumentHead } from '@builder.io/qwik-city'
 
 export default component$(() => {

apps/web/src/routes/layout.tsx

@@ -6,10 +6,6 @@ import {
   Dropdown,
   DropdownItem,
   FlowbiteTheme,
-  IconCheckOutline,
-  IconGithubSolid,
-  IconMoonOutline,
-  IconSunOutline,
   Navbar,
   NavbarBrand,
   NavbarCollapse,
@@ -18,6 +14,7 @@ import {
   useDark,
   useFlowbiteThemable,
 } from 'flowbite-qwik'
+import { IconCheckOutline, IconGithubSolid, IconMoonOutline, IconSunOutline } from 'flowbite-qwik-icons'
 import pkg from 'flowbite-qwik/package.json'
 
 export default component$(() => {

packages/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-qwik",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "Unofficial Qwik components built for Flowbite and Tailwind CSS",
   "keywords": [
     "design-system",
@@ -62,10 +62,10 @@
   },
   "dependencies": {
     "flowbite": "^2.3.0",
+    "flowbite-qwik-icons": "^0.1.4",
     "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
-    "@qwikest/icons": "^0.0.13",
     "@types/eslint": "^8.56.10",
     "@types/node": "^20.14.1",
     "@vitest/coverage-v8": "^1.6.0",