Package Exports

react-bootstrap-icons
react-bootstrap-icons/build/index.js
react-bootstrap-icons/dist
react-bootstrap-icons/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-bootstrap-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Bootstrap Icons

The brand new Bootstrap Icons library to use as React components.

Currently v1.13.1, over 2000 icons!

bootstrap-icons

Installation

npm install react-bootstrap-icons --save

yarn add react-bootstrap-icons

Usage

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

export default function App() {
  return <ArrowRight />;
}

Icons can be configured with inline props:

<ArrowRight color="royalblue" size={96} />

You can pass whatever props you want:

<ArrowRight className="ml-4" />

You can also include the whole icon pack:

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

export default function App() {
  return <Icon.ArrowRight />;
}

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:

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 <BootstrapIcon {...props} />;
}

import { Icon } from './Icon';

export default function App() {
  return (
    <Icon
      iconName="Stopwatch"
      color="royalblue"
      size={96}
      className="align-top"
    />
  );
}

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

More options

Other ways to use Boostrap icons: https://icons.getbootstrap.com/#usage

License

react-bootstrap-icons are open-sourced (MIT)
Bootstrap Icons are open-sourced (MIT).

Collaborators

@kwnath