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: about 1 year 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 (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-11T14:05:26.000Z (about 2 years ago)
- Last Synced: 2024-04-14T10:57:26.963Z (about 2 years 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!**
## 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)