Basically simple as, why use 0 as major always? Especially recently, when breaking changes were introduced 💡
From what I gather, it doesn't seem like there's a big release in the works.

https://blog.npmjs.org/post/162134793605/why-use-semver.html
https://0ver.org

Thank you for the great work on this package!

One question - for the name prop, why not use the names from the browser on the Flowbite website?

You could also add a style prop for outline or solid.

It's minor but I've found myself searching icons.js in the dist a few times looking for the right name for my icon.

Sometimes it's the name from the Flowbite site with "-solid" or "-outline", but not always. Just now I was looking for outline "plus-circle", but in the package it's "circle-plus-outline"

Hi, I'm trying to upgrade from version 1.0.2 to 1.4.0, but after the upgrade icons are appearing smaller than before.

For example I use the EditOutline icon. Here is the svg before upgrade:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="shrink-0 w-5 h-5 dark:text-white" role="img"
  aria-label="edit outline" viewBox="0 0 20 18">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M15 13v2.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h6.616m5.521-.156 2.852 2.852m1.253-4.105a2.017 2.017 0 0 1 0 2.852l-7.844 7.844L7 13l.713-3.565 7.844-7.844a2.016 2.016 0 0 1 2.852 0Z">
  </path>
</svg>

And after

<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="shrink-0 w-5 h-5 dark:text-white" role="img"
  aria-label="edit outline" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="m14.3 4.8 2.9 2.9M7 7H4a1 1 0 0 0-1 1v10c0 .6.4 1 1 1h11c.6 0 1-.4 1-1v-4.5m2.4-10a2 2 0 0 1 0 3l-6.8 6.8L8 14l.7-3.6 6.9-6.8a2 2 0 0 1 2.8 0Z">
  </path>
</svg>

I'm using the md size. E.g. <EditOutline size="md" class="dark:text-white" />

I guess this is the commit where the icon changed: 16aeffc

What should I do to upgrade? Apologies if I've missed something here.
Thanks very much!

Here's the BriefcaseOutline I was looking for:

AddressCardSolid.svelte

  export let svgClass: string = 'text-gray-800 dark:text-white';
  let svgCls: string = twMerge(svgClass, $$props.class);

I don't think we need to export svgClass. I don't think we need to pass 'text-gray-800 dark:text-white' at all.

If we don't pass any class to the icon it will use the current text color of the parent element, which is a desired behaviour as it will be consistent with the text around.

I would propose to implement simply:

<svg
   ...
  {...$$restProps}
  class={$$props.class}
/>

or if we agree on sizing proposal

<svg
   ...
  {...$$restProps}
  class={twMerge(sizes[size], $$props.class}
/>

These icons exist on the flowbite site https://flowbite.com/icons/

Can only find CogOutline and UserAddOutline for these icons

While "NewspaperSolid" can be imported as expected, for the NewspaperOutline icon the import does not work.
It only works with NewspapperOutline.
It seems that a typo happened while naming the file!

Not a big issue at all, I just wanted to point it out as I am very thankful for the library!

Describe the bug

I realized in one of my new projects that this library is broken for releases > v1.4.3 as some exports are missing like

export { default as ChevronRightSolid } from "./ChevronRightSolid.svelte"

Working setup:
"dependencies": {
"flowbite": "^2.3.0",
"flowbite-svelte": "^0.44.24",
"flowbite-svelte-blocks": "^1.1.0",
"flowbite-svelte-icons": "^1.4.3",
"flowbite-typography": "^1.0.3"
}

Not working setup
flowbite-svelte-icons >1.4.3

Reproduction

v1.4.3...v1.4.4 @shinokada

Version and System Info

v1.4.4

So I understand that the new way to use this module is :

import { AngleLeftSolid } from 'flowbite-svelte-icons';

but I used to have

import { Icon } from 'flowbite-svelte-icons';

export let iconName: string;
//...
<Icon name={iconName} />

How could I convert this code with the new way?

I have tried:

import Icon from 'flowbite-svelte-icons';

const IconTag = Icon[iconName]
// ...

<IconTag />

but it does not work.

I will update the lib. The size will be 60-80% reduced and usage will be different.

<script>
  import { Icon } from 'flowbite-svelte-icons';
</script>

<Icon name="address-card-solid" />
<Icon name="address-card-outline" />

Rename video-solid to video-camera-solid

https://github.com/themesberg/flowbite-svelte-icons/blob/main/src/lib/icons.js#L492

Current version is not synched with upstream version, maybe a Github Action or some automated script can pull icons automatically so this is always up to date?

The missing icon for me was PieChartOutline it's called chart-pie on Flowbite Icons, others might be missing also because they update often.

Also naming is a bit wonky you could keep compatibility with old naming by creating aliases so people don't complain.

Not sure what's happening, but latest version (0.4.3) on SvelteKit has no exported values.

Within +layout.svelte I am unable to import anything from the library.

import { Icon } from 'flowbite-svelte-icons';
import { AddressCardSolid } from 'flowbite-svelte-icons';

Neither of these imports work. The values just don't exist.

From the docs:

Size

Use the size prop to change the size of icons.

<AddressCardSolid size="40" /> 

Tailwind CSS suport

Use the class prop to change size, colors and add additional css.

Tailwind CSS example:

<AddressCardSolid class="h-24 w-24 text-blue-700 mr-4" />

This seems a bit confusing what is the proper way of setting the icon size, via size prop or class.

If we use the class then svg is rendered with the default width="20" height="20" overshadowed by the class="w-24 h-24". A bit unwanted.

On the other hand, the convention we use in flowbite-svelte for sizing the components is a set of predefined sizes like:

export let size: "xs" | "sm" | "md" | "lg" | "xl" = "md";

const sizes = {
  xs: "w-4 h-4',
  sm: "w-5 h-5',
  ....
}

which is completely different to the one use here:

 export let size: string = '20';

Shouldn't we be more consistent between the two libraries?

My proposal, would be to offer few predefined sizes and if user wants non-standard sizing the usage of class should be encouraged:

<AddressCardSolid size="sm" />
<AddressCardSolid class="w-4 h-8" />
<AddressCardSolid class="w-[21px] h-[23px]" /> <!-- if pixel wise control needed -->

@shinokada , @zoltanszogyenyi - your thoughts?

I want a slightly different stroke width for my icons, but the dots don't respect the global config of strike width., as the four dots icons don't use strokeWidth variable for for stroke-width, so can't style them globally along with other icons.

The four places with this problem:
https://github.com/search?q=repo%3Athemesberg%2Fflowbite-svelte-icons+stroke-width%3D%22&type=code

Describe the bug

as what the title says only CogOutline is fine

Reproduction

Version and System Info

"flowbite-svelte-icons": "^1.0.2",

Need to add to the installation procedure:

You must to your local tailwind.config.js :

const config = {
  content: [
       ...
        "./node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}",
    ],

To make sure the classes used by flowbite-svelte-icons are included by the Tailwindcss.

On https://flowbite.com/icons/ there's a Refresh icon. However, it's not present in this library

It was working in the previous version I was using (1.0.2).
Node: 20.10.0

"flowbite": "^2.2.1",
"flowbite-svelte": "^0.44.22",
"flowbite-svelte-icons": "^1.0.2",
"svelte": "^4.2.7",
"tslib": "^2.4.1",
"typescript": "^5.0.
"vite": "^5.0.3"

RollupError: "ChartPieSolid" is not exported by "node_modules/flowbite-svelte-icons/dist/index.js", imported by "src/components/sideBar.svelte".
at error (file:///home/daniel/Documents/projects/wa-assitant/frontend/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
at Module.error (file:///home/daniel/Documents/projects/wa-assitant/frontend/node_modules/rollup/dist/es/shared/node-entry.js:12781:16)
at Module.traceVariable (file:///home/daniel/Documents/projects/wa-assitant/frontend/node_modules/rollup/dist/es/shared/node-entry.js:13218:29)
at ModuleScope.findVariable (file:///home/daniel/Documents/projects/wa-assitant/frontend/node_modules/rollup/dist/es/shared/node-entry.js:11635:39)
at ReturnValueScope.findVariable (file:///home/daniel/Documents/projects/wa-assitant/frontend/node_modules/rollup/dist/es/shared/node-entry.js:5935:38)
at FunctionBodyScope.findVariable (file:///home/daniel/Documents/projects/wa-assitant/frontend/node_modules/rollup/dist/es/shared/node-entry.js:5935:38)
at ReturnValueScope.findVariable (file:///home/daniel/Documents/projects/wa-assitant/frontend/node_modules/rollup/dist/es/shared/node-entry.js:5935:38)
at FunctionBodyScope.findVariable (file:///home/daniel/Documents/projects/wa-assitant/frontend/node_modules/rollup/dist/es/shared/node-entry.js:5935:38)
at ReturnValueScope.findVariable (file:///home/daniel/Documents/projects/wa-assitant/frontend/node_modules/rollup/dist/es/shared/node-entry.js:5935:38)
at FunctionBodyScope.findVariable (file:///home/daniel/Documents/projects/wa-assitant/frontend/node_modules/rollup/dist/es/shared/node-entry.js:5935:38)

Brand new install following the readme, but the the code below gives me this error:

<script>
	import { CogOutline, DotsVerticalOutline, DownloadSolid } from 'flowbite-svelte-icons';
</script>

<CogOutline />

Argument of type 'typeof CogOutline' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'.
Type 'typeof CogOutline' provides no match for the signature 'new (args: { target: any; props?: any; }): ATypedSvelteComponent'.
Possible causes:

• You use the instance type of a component where you should use the constructor type
• Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
  import type { SvelteComponentTyped } from "svelte";
  class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}js(2345)

In the icon size table https://flowbite-svelte-icons.codewithshin.com/#Size 'md' size is described as using 'w-5 h-6'

That should probably be 'w-5 h-5', as seen in the tables used within the components themselves, eg:

I noticed a small error when trying to import CogSolid. The import fails, but GearSolid seems to be the correct icon with an incorrect name. CogOutline is available. I'm using version 1.4.0.

Thanks for maintaining this icon set! I read in some other comments that it's generated via a script, but let me know if I should submit a PR.

The icon ProfileCardSolid is missing.
I am willing to create a PR for this.

Thank you for this update even if it breaks a bunch of stuff.
I was trying the example Custom Default Icon from the docs and I get this error:

Module '"flowbite-svelte-icons"' has no exported member 'IconSolid'

I tried the exact code from the docs

Would you be able to add the video-play icons? They already exist on the Flowbite Icons https://flowbite.com/icons

Thank you in advance.

When adding import { AddressCardSolid } from 'flowbite-svelte-icons'; to a svelte component, Chrome console gives me the following error:

SyntaxError: The requested module '/node_modules/.vite/deps/flowbite-svelte-icons.js?v=4be41f1c' does not provide an export named 'AddressCardSolid' (at HomescreenSidebar.svelte:6:11)

Using this approach works import AddressCardSolid from 'flowbite-svelte-icons/AddressCardSolid.svelte'; however.

my devDependencies

Tailwind config

When an icon is clicked it always gets a border around it. I don't understand what is the purpose of that.
How can I remove this behaviour? Is this a bug or a feature?

Not sure if this was on porpuse but the component XCompanySolid.svelte was deleted with the commit 16aeffc and there doesnt seem to be a replacement.

Getting the error Module '"flowbite-svelte-icons"' has no exported member 'Icon' for the following:

import { Icon } from 'flowbite-svelte-icons';

v0.4.1

They got deleted in this commit: 16aeffc

For reference:

I was using ArrowDownSolid from version 1.0.2 and then recently updated to version 1.3.1 and found that ArrowDownSolid and ArrowDownOutline is missing.

In 1.4.1 some icons look visually broken, for example RotateSolid: