Vue - Icons
Last modified by Manuel Leduc on 2024/04/26 14:14
This package provides a single Vue component to display an icon.
- sources: https://github.com/xwiki-contrib/cristal/tree/main/core/icons
- since: 0.7
Installation
pnpm add @cristal/icons
Usage
<script lang="ts" setup">
import {CIcon} from "@cristal/icons";
</script>
<template>
<c-icon name="alarm"></c-icon>
</template>
import {CIcon} from "@cristal/icons";
</script>
<template>
<c-icon name="alarm"></c-icon>
</template>
Visual result:
Props
| Name | Since | Type | Mandatory | Default value | Comment |
|---|---|---|---|---|---|
| name | 0.7 | string | yes | N/A | The valid names are bootstrap icon names provided by bootstrap-icons. |
| size | 0.7 | Size | no | Normal | The size of the icon |
Types
Size
enum Size {
Small, // 1rem
Normal, // 1.3rem
Big, // 1.6rem
}
Small, // 1rem
Normal, // 1.3rem
Big, // 1.6rem
}
Limitations
The valid names are currently tightly bound to bootstrap-icons which is not desirable on the long term.
We will later add the notion of icon sets, allowing to map a predefined set of icon names to the corresponding names of various icon providers.
This project is being financed by the French State as part of the France 2030 program
Ce projet est financé par l’État Français dans le cadre de France 2030
