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> <template>
<span :class="'icon fa fa-' + iname" aria-hidden="true" /> <span :class="['icon fa fa-' + iname, variant ? 'variant ' + variant : '']" aria-hidden="true" />
</template> </template>
<script> <script>
export default { export default {
name: 'Icon', name: 'Icon',
props: { props: {
iname: { type: String, required: true } iname: { type: String, required: true },
variant: { type: String, default: null }
} }
} }
</script> </script>
@ -26,5 +27,25 @@ export default {
&.fs-sm { &.fs-sm {
font-size: 1rem; 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> </style>