forked from platypush/platypush
Added standard component for icons
This commit is contained in:
parent
3435f591eb
commit
8ec9c8f203
2 changed files with 45 additions and 0 deletions
|
@ -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>
|
|
@ -1,3 +1,5 @@
|
|||
$icon-container-size: 3em;
|
||||
|
||||
@mixin icon {
|
||||
content: ' ';
|
||||
background-size: 1em 1em;
|
||||
|
|
Loading…
Reference in a new issue