Bootstrap React Icons

Provides Bootstrap React Icons as Typescript React Components.

Warning: this project has no tests.

Usage

Add the package to your project:

npm install @alexandresalome/bootstrap-react-icons

In your code:

import { SunIcon } from '@alexandresalome/bootstrap-react-icons';

And use it in your components to

export default function Title() {
    return (
        <p>
            Hello world
            {' '}
            <SunIcon />
        </p>
    );
}

The supported props are:

| Name | Description | Default | | --- | --- | --- | | size?: number | The size in pixels of the icon | 16 | | className?: string | The classname(s) to add to the svg | undefined |

Development

Clone this repository, install dependencies, and run the start npm script:

npm install
npm start

The src/ directory contains the code generated by npm start.

Supported versions

This library relies on two major vendor components, each component having their release cycle:

1. Bootstrap icons
2. React

This library follows its release cycle and starts today with the 0.1 version. For each major version, the supported vendor versions will be explicitly listed to facilitate the integration work.

Changelog

0.1-DEV

Required versions:

• Supported Bootstrap icons: ^1.11
• Supported React versions: ^18.2

Tested framework:

• Gatsby: ^5.13

This is the initial release of the library.

Features:

• React components for the icons

Troubleshooting

SVG transformation to react components

Make sure your bundler has a transformer for SVG files.

For Gatsby, use the gatsby-plugin-svgr plugin. If you are getting invalid image sizes, try disabling svgo in the plugin configuration.

Typescript types for SVG files

Add this to your types:

# svg.d.ts
declare module "*.svg" {
    import React from "react";
    export const ReactComponent: React.FunctionComponent<
        React.SVGProps<SVGSVGElement>
    >;
}