121 lines
2.4 KiB
Vue
121 lines
2.4 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 LinkBroken from "open-iconic/svg/link-broken";
|
|
import LinkIntact from "open-iconic/svg/link-intact";
|
|
import LockLocked from "open-iconic/svg/lock-locked";
|
|
import LockUnlocked from "open-iconic/svg/lock-unlocked";
|
|
import Person from "open-iconic/svg/person";
|
|
import Pencil from "open-iconic/svg/pencil";
|
|
import Star from "open-iconic/svg/star";
|
|
import X from "open-iconic/svg/x";
|
|
|
|
const iconMap = {
|
|
'caret-bottom': CaretBottom,
|
|
'caret-top': CaretTop,
|
|
check: Check,
|
|
'circle-check': CircleCheck,
|
|
'link-broken': LinkBroken,
|
|
'link-intact': LinkIntact,
|
|
'lock-locked': LockLocked,
|
|
'lock-unlocked': LockUnlocked,
|
|
pencil: Pencil,
|
|
person: Person,
|
|
star: Star,
|
|
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: 0.6em;
|
|
height: 0.6em;
|
|
}
|
|
|
|
&.md {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
&.lg {
|
|
width: 1.33em;
|
|
height: 1.33em;
|
|
}
|
|
|
|
&.xl {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
/*&.xl {*/
|
|
/*width: 3em;*/
|
|
/*height: 3em;*/
|
|
/*}*/
|
|
}
|
|
|
|
}
|
|
|
|
</style> |