add variant prop to Icon

This commit is contained in:
axolotle 2022-02-01 22:22:03 +01:00
parent dcb9534e77
commit 7f5392389e

View file

@ -1,12 +1,13 @@
<template>
<span :class="'icon fa fa-' + iname" aria-hidden="true" />
<span :class="['icon fa fa-' + iname, variant ? 'variant ' + variant : '']" aria-hidden="true" />
</template>
<script>
export default {
name: 'Icon',
props: {
iname: { type: String, required: true }
iname: { type: String, required: true },
variant: { type: String, default: null }
}
}
</script>
@ -26,5 +27,25 @@ export default {
&.fs-sm {
font-size: 1rem;
}
&.variant {
font-size: .8rem;
width: 1.35rem;
min-width: 1.35rem;
height: 1.35rem;
line-height: 165%;
border-radius: 50rem;
@each $color, $value in $theme-colors {
&.#{$color} {
background-color: $value;
color: $white;
}
}
&.warning {
color: $black;
}
}
}
</style>