docs(lite): update README about UiIcon (#6520)
This commit is contained in:
parent
185509a0cf
commit
b0cb249ae9
@ -91,18 +91,21 @@ const fontSize = ref("2rem");
|
|||||||
|
|
||||||
This project is using Font Awesome 6 Free.
|
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
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<FontAwesomeIcon :icon="faDisplay" />
|
<UiIcon :icon="faDisplay" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import UiIcon from "@/components/ui/UiIcon.vue"
|
||||||
import { faDisplay } from "@fortawesome/free-solid-svg-icons";
|
import { faDisplay } from "@fortawesome/free-solid-svg-icons";
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
@ -115,8 +118,6 @@ Here is the equivalent between font weight and style name.
|
|||||||
| ---------- | ----------- |
|
| ---------- | ----------- |
|
||||||
| Solid | 900 |
|
| Solid | 900 |
|
||||||
| Regular | 400 |
|
| Regular | 400 |
|
||||||
| Light | 300 |
|
|
||||||
| Thin | 100 |
|
|
||||||
|
|
||||||
### CSS
|
### CSS
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user