From b0cb249ae9d2c432dbff6520c2a5ebf4db6d9aa2 Mon Sep 17 00:00:00 2001
From: Thierry Goettelmann <thierry@byscripts.info>
Date: Mon, 14 Nov 2022 10:22:07 +0100
Subject: [PATCH] docs(lite): update README about UiIcon (#6520)

---
 @xen-orchestra/lite/README.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/@xen-orchestra/lite/README.md b/@xen-orchestra/lite/README.md
index 6964ddcc7..742e9bd84 100644
--- a/@xen-orchestra/lite/README.md
+++ b/@xen-orchestra/lite/README.md
@@ -91,18 +91,21 @@ const fontSize = ref("2rem");
 
 This project is using Font Awesome 6 Free.
 
-Here is how to use an icon in your template.
+Icons can be displayed with the `UiIcon` component.
 
-Note: `FontAwesomeIcon` is a global component that does not need to be imported.
+Passing `undefined` as `icon` prop will disable the component (no need to use an additional `v-if` condition).
+
+Use the `busy` prop to display a loader icon.
 
 ```vue
 <template>
   <div>
-    <FontAwesomeIcon :icon="faDisplay" />
+    <UiIcon :icon="faDisplay" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import UiIcon from "@/components/ui/UiIcon.vue"
 import { faDisplay } from "@fortawesome/free-solid-svg-icons";
 </script>
 ```
@@ -115,8 +118,6 @@ Here is the equivalent between font weight and style name.
 | ---------- | ----------- |
 | Solid      | 900         |
 | Regular    | 400         |
-| Light      | 300         |
-| Thin       | 100         |
 
 ### CSS