https://github.com/ismamz/react-bootstrap-icons

React component for Bootstrap Icons
https://github.com/ismamz/react-bootstrap-icons

bootstrap icons react svg

Last synced: 5 days ago
JSON representation

React component for Bootstrap Icons

• Host: GitHub
• URL: https://github.com/ismamz/react-bootstrap-icons
• Owner: ismamz
• License: mit
• Created: 2019-11-28T17:26:32.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-11T14:05:26.000Z (9 months ago)
• Last Synced: 2024-04-14T10:57:26.963Z (8 months ago)
• Topics: bootstrap, icons, react, svg
• Language: JavaScript
• Homepage:
• Size: 2.79 MB
• Stars: 177
• Watchers: 4
• Forks: 21
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# React Bootstrap Icons

The brand new [Bootstrap Icons library](https://icons.getbootstrap.com/) to use as React components.

> Currently v1.11.3, over **2000 icons!**

![bootstrap-icons](https://user-images.githubusercontent.com/39626451/192898250-711e2281-ab03-433a-afeb-4ad542b68a5b.png)

## Installation

```bash

npm install react-bootstrap-icons --save

```

or

```bash

yarn add react-bootstrap-icons

```

## Usage

```jsx

import { ArrowRight } from 'react-bootstrap-icons';

export default function App() {

  return ;

}

```

Icons can be configured with inline props:

```jsx

```

You can pass whatever props you want:

```jsx

```

You can also include the whole icon pack:

```jsx

import * as Icon from 'react-bootstrap-icons';

export default function App() {

  return ;

}

```

The icon names are the `PascalCase` version of the original name. For those icons whose name begins with a number, the `Icon` prefix will be used. Examples: `arrow-right` → `ArrowRight`, `1-circle` → `Icon1Circle`.

You can also create an `Icon` component and pass it the icon name as a prop:

```jsx

import * as icons from 'react-bootstrap-icons';

interface IconProps extends icons.IconProps {

  // Cannot use "name" as it is a valid SVG attribute

  // "iconName", "filename", "icon" will do it instead

  iconName: keyof typeof icons;

}

export const Icon = ({ iconName, ...props }: IconProps) => {

  const BootstrapIcon = icons[iconName];

  return ;

}

```

```jsx

import { Icon } from './Icon';

export default function App() {

  return (

    

  );

}

```

## IconProps

| Name         | Type             | Description                                    |

| ------------ | ---------------- | ---------------------------------------------- |

| `color?`     | string           | color of the icon                              |

| `size?`      | string \| number | size of the icon (`width` and `height`)        |

| `title?`     | string           | provides an accessible, short-text description |

| `className?` | string           | `bi bi-{icon-name}` and add your own classes   |

## Figma Plugin

You can install it from the Figma app: [Bootstrap Icons Plugin for Figma](https://www.figma.com/community/plugin/868341386266170307/Bootstrap-Icons)

## More options

Other ways to use Boostrap icons: [https://icons.getbootstrap.com/#usage](https://icons.getbootstrap.com/#usage)

## License

- react-bootstrap-icons are open-sourced ([MIT](https://github.com/ismamz/react-bootstrap-icons/blob/master/LICENSE.md))

- Bootstrap Icons are open-sourced ([MIT](https://github.com/twbs/icons/blob/main/LICENSE)).

## Collaborators

- [@kwnath](https://github.com/kwnath)