js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

add react example

Browse Source
This commit is contained in:
Cory LaViska
2022-03-19 18:19:00 -04:00
parent 23a4859e0e
commit 2a702d1cb5
1 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
docs/components/icon.md
View File

@@ -60,6 +60,37 @@ Icons inherit their color from the current text color. Thus, you can set the `co
</div>
```
```jsx react
import { SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<div style={{ color: '#4a90e2' }}>
<SlIcon name="exclamation-triangle"></SlIcon>
<SlIcon name="archive"></SlIcon>
<SlIcon name="battery-charging"></SlIcon>
<SlIcon name="bell"></SlIcon>
</div>
<div style={{ color: '#9013fe' }}>
<SlIcon name="clock"></SlIcon>
<SlIcon name="cloud"></SlIcon>
<SlIcon name="download"></SlIcon>
<SlIcon name="file-earmark"></SlIcon>
</div>
<div style={{ color: '#417505' }}>
<SlIcon name="flag"></SlIcon>
<SlIcon name="heart"></SlIcon>
<SlIcon name="image"></SlIcon>
<SlIcon name="lightning"></SlIcon>
</div>
<div style={{ color: '#f5a623' }}>
<SlIcon name="mic"></SlIcon>
<SlIcon name="search"></SlIcon>
<SlIcon name="star"></SlIcon>
<SlIcon name="trash"></SlIcon>
</div>
);
```
### Sizing
Icons are sized relative to the current font size. To change their size, set the `font-size` property on the icon itself or on a parent element as shown below.