React component for Bootstrap Icons
npm install react-bootstrap-iconsThe brand new Bootstrap Icons library to use as React components.
> Currently v1.13.1, over 2000 icons!
``bash`
npm install react-bootstrap-icons --save
or
`bash`
yarn add react-bootstrap-icons
`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 (
color="royalblue"
size={96}
className="align-top"
/>
);
}
`
| 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 |
You can install it from the Figma app: Bootstrap Icons Plugin for Figma
Other ways to use Boostrap icons: https://icons.getbootstrap.com/#usage
- react-bootstrap-icons are open-sourced (MIT)
- Bootstrap Icons are open-sourced (MIT).
- @kwnath