diff --git a/README.md b/README.md
index dd4f6608..470a6e72 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,6 @@ yarn add react-bootstrap-icons
## Usage
```jsx
-import React from 'react';
import { ArrowRight } from 'react-bootstrap-icons';
export default function App() {
@@ -44,12 +43,11 @@ You can pass whatever props you want:
You can also include the whole icon pack:
```jsx
-import React from 'react';
import * as Icon from 'react-bootstrap-icons';
-export default function App() => {
- return
-};
+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`.
@@ -61,7 +59,7 @@ 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", "filename", "icon" will do it instead
iconName: keyof typeof icons;
}
@@ -73,23 +71,26 @@ export const Icon = ({ iconName, ...props }: IconProps) => {
```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 |
-| title? | string | acts kind of like img alt="" and/or div title="" |
+| 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 |
## Figma Plugin