From 2a702d1cb5e9c3903b19a7428a4f3f9fad4444e4 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Sat, 19 Mar 2022 18:19:00 -0400
Subject: [PATCH] add react example

---
 docs/components/icon.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/docs/components/icon.md b/docs/components/icon.md
index d5720aa33..8ddbcbe0d 100644
--- a/docs/components/icon.md
+++ b/docs/components/icon.md
@@ -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.