Add icon component
This commit is contained in:
parent
cda4b81554
commit
a91ed7368f
25
src/common/components/Icon.vue
Normal file
25
src/common/components/Icon.vue
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<svg class="bi" width="1em" height="1em" fill="currentColor">
|
||||||
|
<use :xlink:href=" '' + iconHref" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
icon: String,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bootstrapIconsBasePath: (browser ?? chrome).runtime.getURL('/res/icons/bootstrap-icons.svg'),
|
||||||
|
iconHref: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.iconHref = `${this.bootstrapIconsBasePath}#${this.icon}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
@ -34,7 +34,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row flex-end w100">
|
<div class="flex flex-row flex-end w100">
|
||||||
<div v-if="!showTextMode" class="button" @click="showTextMode = true">
|
<div v-if="!showTextMode" class="button" @click="showTextMode = true">
|
||||||
Paste config ...
|
<Icon icon="clipboard-plus" style="font-size: 2em"></Icon> Paste config ...
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="button" @click="showTextMode = false">
|
<div v-else class="button" @click="showTextMode = false">
|
||||||
Back
|
Back
|
||||||
@ -164,10 +164,12 @@ import Logger from '../ext/lib/Logger';
|
|||||||
import Comms from '../ext/lib/comms/Comms';
|
import Comms from '../ext/lib/comms/Comms';
|
||||||
import IO from '../common/js/IO';
|
import IO from '../common/js/IO';
|
||||||
import JsonObject from '../common/components/JsonEditor/JsonObject';
|
import JsonObject from '../common/components/JsonEditor/JsonObject';
|
||||||
|
import Icon from '../common/components/Icon';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
JsonObject,
|
JsonObject,
|
||||||
|
Icon,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
Loading…
Reference in New Issue
Block a user