108 lines
2.0 KiB
Vue
108 lines
2.0 KiB
Vue
<template>
|
|
<span class="icon" :class="sizeClass" @click="$emit('click', $event)">
|
|
<svg v-html="svgContent" v-bind="svgAttributes"></svg>
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import CaretBottom from "open-iconic/svg/caret-bottom";
|
|
import CaretTop from "open-iconic/svg/caret-top";
|
|
import Check from "open-iconic/svg/check";
|
|
import CircleCheck from "open-iconic/svg/circle-check.svg";
|
|
import LockLocked from "open-iconic/svg/lock-locked";
|
|
import LockUnlocked from "open-iconic/svg/lock-unlocked";
|
|
import Person from "open-iconic/svg/person";
|
|
import X from "open-iconic/svg/x";
|
|
|
|
const iconMap = {
|
|
'caret-bottom': CaretBottom,
|
|
'caret-top': CaretTop,
|
|
check: Check,
|
|
'circle-check': CircleCheck,
|
|
'lock-locked': LockLocked,
|
|
'lock-unlocked': LockUnlocked,
|
|
person: Person,
|
|
x: X
|
|
};
|
|
|
|
const sizeMap = {
|
|
sm: 'is-small',
|
|
md: '' ,
|
|
lg: 'is-medium',
|
|
xl: 'is-large'
|
|
};
|
|
|
|
export default {
|
|
props: {
|
|
icon: {
|
|
validator: (i) => iconMap[i] !== undefined
|
|
},
|
|
size: {
|
|
required: false,
|
|
type: String,
|
|
validator: (s) => sizeMap[s] !== undefined,
|
|
default: 'md'
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
svgObj() {
|
|
return iconMap[this.icon];
|
|
},
|
|
svgAttributes() {
|
|
const attrs = {
|
|
class: this.size
|
|
};
|
|
|
|
for (let a of ['viewBox', 'xmlns']) {
|
|
if (this.svgObj.attributes[a]) {
|
|
attrs[a] = this.svgObj.attributes[a];
|
|
}
|
|
}
|
|
|
|
return attrs;
|
|
},
|
|
svgContent() {
|
|
return this.svgObj.content;
|
|
},
|
|
sizeClass() {
|
|
return sizeMap[this.size];
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.icon {
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: currentColor;
|
|
|
|
&.sm {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
&.md {
|
|
width: 1.33em;
|
|
height: 1.33em;
|
|
}
|
|
|
|
&.lg {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
&.xl {
|
|
width: 3em;
|
|
height: 3em;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style> |