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 {
|
@mixin icon {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
background-size: 1em 1em;
|
background-size: 1em 1em;
|
||||||
|
|
Loading…
Reference in a new issue