98 lines
1.9 KiB
Vue
98 lines
1.9 KiB
Vue
<template lang="html">
|
|
<i
|
|
ref="icon"
|
|
aria-hidden
|
|
role="img"
|
|
class="v-icon"
|
|
:class="themeClasses"
|
|
:style="color && `color: ${color}`"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 512 512"
|
|
:style="`height: ${size}; width: ${size}`"
|
|
>
|
|
<path
|
|
:d="shape"
|
|
/>
|
|
</svg>
|
|
</i>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
const SIZE_MAP = {
|
|
xSmall: '12px',
|
|
small: '16px',
|
|
default: '24px',
|
|
medium: '28px',
|
|
large: '36px',
|
|
xLarge: '40px',
|
|
}
|
|
export default {
|
|
inject: {
|
|
theme: {
|
|
default: {
|
|
isDark: false,
|
|
},
|
|
},
|
|
},
|
|
props: {
|
|
shape: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
xSmall: Boolean,
|
|
small: Boolean,
|
|
medium: Boolean,
|
|
large: Boolean,
|
|
xLarge: Boolean,
|
|
},
|
|
data(){return {
|
|
inheritedSize: undefined,
|
|
}},
|
|
computed: {
|
|
isDark () {
|
|
if (this.dark === true) {
|
|
// explicitly dark
|
|
return true
|
|
} else if (this.light === true) {
|
|
// explicitly light
|
|
return false
|
|
} else {
|
|
// inherit from parent, or default false if there is none
|
|
return this.theme.isDark
|
|
}
|
|
},
|
|
themeClasses() {
|
|
return {
|
|
'theme--dark': this.isDark,
|
|
'theme--light': !this.isDark,
|
|
}
|
|
},
|
|
size() {
|
|
if (this.inheritedSize) return this.inheritedSize;
|
|
if (this.xSmall) return SIZE_MAP['xSmall'];
|
|
if (this.small) return SIZE_MAP['small'];
|
|
if (this.medium) return SIZE_MAP['medium'];
|
|
if (this.large) return SIZE_MAP['large'];
|
|
if (this.xLarge) return SIZE_MAP['xLarge'];
|
|
return SIZE_MAP['default'];
|
|
},
|
|
},
|
|
mounted(){
|
|
this.inheritedSize = this.$refs.icon.style.fontSize;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
svg {
|
|
color: inherit;
|
|
fill: currentColor;
|
|
}
|
|
</style>
|