From 531d643d6ebe161d86942ba79f52f3e39adeb7f0 Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Thu, 30 May 2024 20:17:26 +0100
Subject: [PATCH] docs: publish hot-toolbar component in markdown example

---
 docs/usage.md | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/docs/usage.md b/docs/usage.md
index d22cbfe..9098049 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -20,19 +20,13 @@ that your app requires, in addition to tree-shaking in the final bundle
 
 The icon pack for Shoelace must be imported to display in components.
 
-There are two options:
+#### 1. Loading Assets from CDN
 
-#### 1. CDN Assets
+If the component is imported via CDN, the icons will be bundled automatically:
 
-Just add the Shoelace icons via CDN in your HTML file:
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style
-/shoelace@2.15.1/cdn/themes/light.css" />
-
-// Or dark
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style
-/shoelace@2.15.1/cdn/themes/dark.css" />
+```js
+import "https://cdn.jsdelivr.net/npm/@shoelace-style
+/shoelace@2.15.1/cdn/components/Button.js"
 ```
 
 #### 2. Bundle Assets Yourself
@@ -164,7 +158,7 @@ To determine which version:
 If you are using a bundler, you must bundle the (icon) assets yourself,
 as described above.
 
-## Example Component In Markdown
+## Example Markdown Components
 
 <!-- markdownlint-disable -->
 
@@ -177,4 +171,8 @@ as described above.
   });
 </script>
 
+<br>
+
+<hot-toolbar></hot-toolbar>
+
 <!-- markdownlint-enable -->