mjs/nebula
1
0
Fork 0
mirror of https://github.com/onsonr/nebula.git synced 2025-03-10 09:27:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(icon): add more examples to icon documentation

Browse Source
This commit is contained in:
Prad Nukala 2024-12-08 15:10:31 -05:00
parent 6f77ed1c9c
commit 11024fb78c
1 changed files with 3 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/pages/components/icon.md
View File

@ -129,35 +129,6 @@ Icons are sized relative to the current font size. To change their size, set the
</div> </div>
``` ```
{% raw %}
```jsx:react
import SlIcon from '@onsonr/nebula/dist/react/icon';
const App = () => (
<div style={{ fontSize: '32px' }}>
<SlIcon name="exclamation-triangle" />
<SlIcon name="archive" />
<SlIcon name="battery-charging" />
<SlIcon name="bell" />
<SlIcon name="clock" />
<SlIcon name="cloud" />
<SlIcon name="download" />
<SlIcon name="file-earmark" />
<SlIcon name="flag" />
<SlIcon name="heart" />
<SlIcon name="image" />
<SlIcon name="lightning" />
<SlIcon name="mic" />
<SlIcon name="search" />
<SlIcon name="star" />
<SlIcon name="trash" />
</div>
);
```
{% endraw %}
### Labels ### Labels
For non-decorative icons, use the `label` attribute to announce it to assistive devices. For non-decorative icons, use the `label` attribute to announce it to assistive devices.
@ -166,6 +137,8 @@ For non-decorative icons, use the `label` attribute to announce it to assistive
<sl-icon name="star-fill" label="Add to favorites"></sl-icon> <sl-icon name="star-fill" label="Add to favorites"></sl-icon>
``` ```
{% raw %}
```jsx:react ```jsx:react
import SlIcon from '@onsonr/nebula/dist/react/icon'; import SlIcon from '@onsonr/nebula/dist/react/icon';
@ -509,4 +482,4 @@ If you want to change the icons Nebula uses internally, you can register an icon
``` ```
``` ```