flowbite-react-icons

Official React package of Flowbite Icons.

Installation

``bash


npm

npm i flowbite-react-icons

yarn

yarn add flowbite-react-icons

pnpm

pnpm add flowbite-react-icons

bun

bun add flowbite-react-icons
`

Usage

The icons are separated into outline and solid endpoints to enable having a one-to-one parity with the svg file naming convention.

$3

`tsx
// outline

import { AngleDown } from "flowbite-react-icons/outline";

function Component() {
return ;
}
`

$3

`tsx
// solid

import { AngleDown } from "flowbite-react-icons/solid";

function Component() {
return ;
}
`

Provider

FlowbiteIcons is the context provider that extends the FlowbiteIconProps interface and is used to set a global config for all icons that it wraps.

$3

`tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import {
AngleDown,
AngleLeft,
AngleRight,
AngleUp,
} from "flowbite-react-icons/outline";

function Component() {
return (
// all will have 48px width and height






);
}
`

$3

FlowbiteIcons context provider can be nested and it inherits values from parent contexts, allowing easy decoupled composability.

`tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import { AngleDown } from "flowbite-react-icons/outline";

function Component() {
return (

{/ [width, height] = 48 /}

{/ [width, height] = 48; color = red; /}


);
}
`

$3

Inline props take precedence over what is provided by the FlowbiteIcons context provider.

`tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import { AngleDown } from "flowbite-react-icons/outline";

function Component() {
return (

{/ [width, height] = 48 /}

{/ [width, height] = 16 /}


);
}
`

Note: width and height also take precedence over size prop.

`tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import { AngleDown } from "flowbite-react-icons/outline";

function Component() {
return (

{/ [width, height] = 48 /}

{/ width = 48, height = 16 /}


);
}
`

Override with inline icon props:

`tsx
import { FlowbiteIcons } from "flowbite-react-icons";
import { AngleDown } from "flowbite-react-icons/outline";

function Component() {
return (

{/ [width, height] = 48 /}
{/ [width, height] = 16 /}

);
}
`

SSR (Server-side rendering)

All icons are server-ready including FlowbiteIcons context provider. Values set in FlowbiteIcons will be both rendered on the server and on the client avoiding client-side hydration warning (eg: Next.js issue).

FlowbiteIcons is a polymorphic context allowing it to run both on server and client with the same data.

Bring your icon

Need more custom SVG icons but don't want to lose the FlowbiteIcons context provider powers as well as all your global config settings?

=> BaseIcon component is also exposed giving access to the FlowbiteIcons context provider values.

Create

`tsx
// circle-user-icon.tsx

import { BaseIcon } from "flowbite-react-icons";

export function CircleUserIcon() {
return (
fill="none"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>




);
}
`

Usage

`tsx
// page.tsx

import { FlowbiteIcons } from "flowbite-react-icons";
import { CircleUserIcon } from "./circle-user-icon";

function Component() {
return (



);
}
`

Default values

BaseIcon applies the following default values to props:

| name | value |
| ------- | -------------------------- |
| xmlns | http://www.w3.org/2000/svg |
| viewBox | 0 0 24 24 |

Types

`ts
export interface FlowbiteIconProps extends SVGProps {
/**
* Sets both width and height
*
* @default 24
*/
size?: number;
}
``