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:

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

And use it in your components to

```jsx
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](https://icons.getbootstrap.com/)
2. [React](https://react.dev/)

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](https://www.gatsbyjs.com/plugins/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>
    >;
}
```