mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
YIcon: add new icon component to deal with icon sizes
This commit is contained in:
parent
f8b2a0b74f
commit
ec7e566708
1 changed files with 24 additions and 0 deletions
24
components/YIcon.vue
Normal file
24
components/YIcon.vue
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
name: string
|
||||||
|
size?: string
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
size: '1.5em',
|
||||||
|
},
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<NuxtIcon :name="name" :style="`--size: ${size}`" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.nuxt-icon :deep(svg) {
|
||||||
|
/* Do not use `v-bind(size)`, idk why bind is not working */
|
||||||
|
width: var(--size);
|
||||||
|
height: var(--size);
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Add table
Reference in a new issue