Integrate Flowbite-Svelte-Icons

[shinokada]

Closes #893

Status

• Not Completed
• Completed

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• I have checked the page with https://validator.unl.edu/
• All the tests have passed
• My pull request is based on the latest commit (not the npm version).

Describe the bug

Flowbite has SVG icon updates, themesberg/flowbite#588.

• We'd like to update Flowbtite-Svelte using Flowbite-Svelte-Icons
• Flowbite-Svelte-Icons will be in the devDependencies but not in the peerDependencies.

Docs pages

• Accordion
• Alerts (InfoCircleSolid, CloseOutline, EyeSolid)
• Badge (ClockSolid, EnvelopSolid, CheckOutline)
• Banner
• Bottom nav
• Breadcrumb (*improved content and spacing for advanced examples)
• Button group
• Button (*added new button icon sizes)
• Card
• Drawer
• Dropdowns
• Footer (*improved colors and spacing)
• Forms
• Indicator
• List group
• Mega menu
• Modal
• Navbar
• Pagination (*added new sizes and fixed paddings)
• Popover (*updated icon & added dropdowns)
• Rating (* improve colors and spacing)
• Sidebar (we need the sidebar menu toggle icon @robert1508)
• Speed Dial
• Tabs
• Timeline
• Toast
• Checkbox
• File input
• Input field
• Radio
• Search input
• Select
• Textarea
• Blockquote
• Headings
• HR
• Links
• Lists
• Paragraphs
• Text decoration

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2023 2:52pm
flowbite-svelte-update	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2023 2:52pm

[shinokada]

@zoltanszogyenyi Ok, I need help here. Can you list which pages and icons are not the same as flowbite.com?
Or I'd like to merge this for now and update them later.

[shinokada]

@jjagielka @zoltanszogyenyi
I just updated to the new version of flowbite-svelte-icons and went through the details. Please let me know if I missed anything. Please be specific what I need to fix.

[shinokada]

Since there is no response, I will merge this PR.

[jjagielka]

Queston:
We have introduced size in flowbite-svelte-icon, but I can see that all your examples at flowbite-svelte use class.

<Alert>
  <Icon name="info-circle-solid" slot="icon" class="w-4 h-4" />
  <span class="font-medium">Default alert!</span>
  Change a few things up and try submitting again.
</Alert>

why not

<Alert>
  <Icon name="info-circle-solid" slot="icon" size="sm" />
  <span class="font-medium">Default alert!</span>
  Change a few things up and try submitting again.
</Alert>

Any particular reason?

[shinokada]

No reason.
I just copied from https://flowbite.com/ and it was easier for me.