Added standard component for icons

This commit is contained in:
Fabio Manganiello 2022-04-10 13:07:01 +02:00
parent 3435f591eb
commit 8ec9c8f203
Signed by: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 45 additions and 0 deletions

View file

@ -0,0 +1,43 @@
<template>
<div class="icon-container">
<img class="icon" :src="url" :alt="alt" v-if="url?.length">
<i class="icon" :class="className" v-else-if="className?.length" />
</div>
</template>
<script>
export default {
props: {
class: {
type: String,
},
url: {
type: String,
},
alt: {
type: String,
default: '',
},
},
computed: {
className() {
return this.class
}
}
}
</script>
<style lang="scss" scoped>
.icon-container {
display: inline-flex;
width: $icon-container-size;
justify-content: center;
text-align: center;
.icon {
width: 1em;
height: 1em;
}
}
</style>

View file

@ -1,3 +1,5 @@
$icon-container-size: 3em;
@mixin icon { @mixin icon {
content: ' '; content: ' ';
background-size: 1em 1em; background-size: 1em 1em;