143 lines
3.5 KiB
Vue
143 lines
3.5 KiB
Vue
<template>
|
|
<span class="icon" :class="sizeClass" @click="$emit('click', $event)">
|
|
<img ref="img" :class="['iconic', 'iconic-fluid', size]" v-bind="extraIconAttributes" :style="{padding: svgPadding}" />
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import IconicJs from "../iconic/js/iconic.min";
|
|
|
|
import Caret from "../iconic/svg/smart/caret";
|
|
import Check from "../iconic/svg/smart/check";
|
|
import CircleCheck from "../iconic/svg/smart/circle-check";
|
|
import Link from "../iconic/svg/smart/link";
|
|
import Lock from "../iconic/svg/smart/lock";
|
|
import Menu from "../iconic/svg/smart/menu";
|
|
import Person from "../iconic/svg/smart/person";
|
|
import Pencil from "../iconic/svg/smart/pencil";
|
|
import Star from "../iconic/svg/smart/star";
|
|
import StarEmpty from "../iconic/svg/smart/star-empty";
|
|
import X from "../iconic/svg/smart/x";
|
|
|
|
const iconicInstance = IconicJs({
|
|
autoInjectSelector: null
|
|
});
|
|
|
|
class IconData {
|
|
constructor(url, dataAttributes) {
|
|
this.url = url;
|
|
this.dataAttributes = dataAttributes || {};
|
|
this.dataAttributes['src'] = url;
|
|
}
|
|
}
|
|
|
|
class SizeData {
|
|
constructor(bulmaIconClass, defaultPadding) {
|
|
this.bulmaIconClass = bulmaIconClass;
|
|
this.defaultPadding = defaultPadding || null;
|
|
}
|
|
}
|
|
|
|
const iconMap = {
|
|
'caret-bottom': new IconData(Caret, {direction: 'bottom'}),
|
|
'caret-top': new IconData(Caret, {direction: 'top'}),
|
|
check: new IconData(Check),
|
|
'circle-check': new IconData(CircleCheck),
|
|
'link-broken': new IconData(Link, {state: 'broken'}),
|
|
'link-intact': new IconData(Link, {state: 'intact'}),
|
|
'lock-locked': new IconData(Lock, {state: 'locked'}),
|
|
'lock-unlocked': new IconData(Lock, {state: 'unlocked'}),
|
|
menu: new IconData(Menu),
|
|
pencil: new IconData(Pencil),
|
|
person: new IconData(Person),
|
|
star: new IconData(Star),
|
|
'star-empty': new IconData(StarEmpty),
|
|
x: new IconData(X)
|
|
};
|
|
|
|
const sizeMap = {
|
|
xs: new SizeData('is-small', '25%'),
|
|
sm: new SizeData('is-small'),
|
|
md: new SizeData(''),
|
|
lg: new SizeData('is-medium'),
|
|
xl: new SizeData('is-large')
|
|
};
|
|
|
|
export default {
|
|
props: {
|
|
icon: {
|
|
validator: (i) => iconMap[i] !== undefined
|
|
},
|
|
size: {
|
|
required: false,
|
|
type: String,
|
|
validator: (s) => sizeMap[s] !== undefined,
|
|
default: 'md'
|
|
},
|
|
padding: {
|
|
type: String,
|
|
required: false,
|
|
default: null
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
injectedSvg: null
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
iconData() {
|
|
return iconMap[this.icon];
|
|
},
|
|
|
|
sizeData() {
|
|
return sizeMap[this.size];
|
|
},
|
|
|
|
extraIconAttributes() {
|
|
const attrs = {};
|
|
|
|
for (let attr in this.iconData.dataAttributes) {
|
|
attrs[`data-${attr}`] = this.iconData.dataAttributes[attr];
|
|
}
|
|
return attrs;
|
|
},
|
|
|
|
sizeClass() {
|
|
return this.sizeData.bulmaIconClass;
|
|
},
|
|
|
|
svgPadding() {
|
|
return this.padding || this.sizeData.defaultPadding || "15%";
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
const self = this;
|
|
setTimeout(() => {
|
|
iconicInstance.inject(this.$refs.img, {
|
|
each: function(svg) { self.injectedSvg = svg; }
|
|
});
|
|
});
|
|
},
|
|
|
|
updated() {
|
|
if (this.injectedSvg) {
|
|
for(let attr in this.extraIconAttributes) {
|
|
this.injectedSvg.setAttribute(attr, this.extraIconAttributes[attr]);
|
|
}
|
|
iconicInstance.update(this.injectedSvg);
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
</style> |