Skip to content

Commit 83ed8b2

Browse files
committed
docs(readme): document icon API
Closes #2
1 parent 4663616 commit 83ed8b2

File tree

1 file changed

+75
-1
lines changed

1 file changed

+75
-1
lines changed

README.md

+75-1
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,16 @@ This library uses [@carbon/icons](https://github.com/carbon-design-system/carbon
1212

1313
```bash
1414
yarn add -D carbon-icons-svelte
15+
1516
# OR
17+
1618
npm install -D carbon-icons-svelte
1719
```
1820

1921
## Usage
2022

23+
Supported icon sizes include `16`, `20`, `24` and `32`. Refer to the [Carbon icon library](https://www.carbondesignsystem.com/guidelines/icons/library) for supported icons.
24+
2125
```html
2226
<script>
2327
import { Add16 } from 'carbon-icons-svelte';
@@ -26,7 +30,15 @@ npm install -D carbon-icons-svelte
2630
<Add16 />
2731
```
2832

29-
For faster compile times, import icons individually:
33+
**Recommendation**: For faster compiling, import icons individually.
34+
35+
### Icon Import Path
36+
37+
```js
38+
import Icon from 'carbon-icons-svelte/lib/<module-name>';
39+
```
40+
41+
#### Example
3042

3143
```html
3244
<script>
@@ -36,6 +48,68 @@ For faster compile times, import icons individually:
3648
<Add16 />
3749
```
3850

51+
## API
52+
53+
### Props
54+
55+
All props are optional.
56+
57+
| Name | Type | Default |
58+
| --------------- | --------- | ----------- |
59+
| aria-label | `string` | `undefined` |
60+
| aria-labelledby | `string` | `undefined` |
61+
| tabindex | `string` | `undefined` |
62+
| focusable | `boolean` | `false` |
63+
| title | `string` | `undefined` |
64+
| class | `string` | `undefined` |
65+
| style | `string` | `undefined` |
66+
67+
```html
68+
<script>
69+
import Add16 from 'carbon-icons-svelte/lib/Add16';
70+
</script>
71+
72+
<Add16 aria-label="Add" class="custom-class" style="will-change: transform;" />
73+
```
74+
75+
You can pass a `title` as a prop or through the slot.
76+
77+
```html
78+
<Add16 title="Add" />
79+
80+
<!-- OR -->
81+
82+
<Add16>
83+
<title>Add</title>
84+
</Add16>
85+
```
86+
87+
### Forwarded Events
88+
89+
The following events can be forwarded to the icon:
90+
91+
- `on:click`
92+
- `on:mouseenter`
93+
- `on:mouseover`
94+
- `on:mouseleave`
95+
96+
```html
97+
<script>
98+
import Add16 from 'carbon-icons-svelte/lib/Add16';
99+
</script>
100+
101+
<Add16
102+
on:click="{() => {}}"
103+
on:mouseenter="{() => {}}"
104+
on:mouseover="{() => {}}"
105+
on:mouseleave="{() => {}}"
106+
/>
107+
```
108+
109+
## Limitations
110+
111+
This library exports icons in the `ES` (ES module) format. Currently, the `UMD` format is not supported.
112+
39113
## [Examples](examples)
40114

41115
## [Changelog](CHANGELOG.md)

0 commit comments

Comments
 (0)