166 lines
No EOL
7.2 KiB
Vue
166 lines
No EOL
7.2 KiB
Vue
<template>
|
|
<div id="icon" :style="div_styles">
|
|
<span v-if="type === 'notes'" :style="span_styles">
|
|
<svg
|
|
:width="inner_size"
|
|
:height="inner_size"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
:width="inner_size"
|
|
:height="inner_size"
|
|
fill="none"
|
|
rx="0"
|
|
ry="0"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M17.4911 2.11667L21.4511 4.09667C21.9411 4.34667 22.1411 4.93667 21.8911 5.43667C21.6411 5.93667 21.0411 6.13667 20.5511 5.88667L18.0011 4.61667L17.9911 16.4367C17.9911 16.4467 17.9936 16.4567 17.9961 16.4667C17.9986 16.4767 18.0011 16.4867 18.0011 16.4967C18.0011 18.4267 16.4311 19.9967 14.5011 19.9967C12.5711 19.9967 11.0011 18.4267 11.0011 16.4967C11.0011 14.5667 12.5711 12.9967 14.5011 12.9967C15.0411 12.9967 15.5411 13.1267 16.0011 13.3467L16.0111 3.10667C15.9911 2.99667 16.0011 2.87667 16.0311 2.75667C16.1711 2.14667 16.9411 1.80667 17.4911 2.11667ZM12.8911 5.43664C12.6511 5.93664 12.0511 6.13664 11.5511 5.88664L9.0011 4.61664L8.9911 18.4366C8.9911 18.4466 8.9936 18.4566 8.9961 18.4666C8.9986 18.4766 9.0011 18.4866 9.0011 18.4966C9.0011 20.4266 7.4311 21.9966 5.5011 21.9966C3.5711 21.9966 2.0011 20.4266 2.0011 18.4966C2.0011 16.5666 3.5711 14.9966 5.5011 14.9966C6.0411 14.9966 6.5411 15.1266 7.0011 15.3466L7.0111 3.10664C6.9911 2.99664 7.0011 2.87664 7.0311 2.76664C7.1711 2.14664 7.9411 1.81664 8.4911 2.12664L12.4411 4.09664C12.9411 4.34664 13.1411 4.94664 12.8911 5.43664Z"
|
|
:fill="primary"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span v-else-if="type === 'note_filled'" :style="span_styles">
|
|
<svg
|
|
:width="inner_size"
|
|
:height="inner_size"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
:width="inner_size"
|
|
:height="inner_size"
|
|
fill="none"
|
|
rx="0"
|
|
ry="0"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM12.6192 6.20784L15.2201 7.68004C15.5101 7.84004 15.6101 8.21004 15.4401 8.50004C15.3301 8.69004 15.1301 8.80005 14.9201 8.80005C14.8201 8.80005 14.7201 8.77004 14.6301 8.72004L12.8699 7.72372V15.6585C12.8701 15.6723 12.8701 15.6861 12.87 15.7C12.87 16.91 11.88 17.9 10.67 17.9C9.45997 17.9 8.46997 16.91 8.46997 15.7C8.46997 14.49 9.45997 13.5 10.67 13.5C11.0299 13.5 11.3698 13.5862 11.6699 13.7387V6.69998C11.6699 6.60119 11.6941 6.50777 11.7369 6.42537C11.7411 6.41687 11.7455 6.40842 11.7501 6.40004C11.7561 6.39019 11.7623 6.38054 11.7687 6.37111C11.8639 6.22688 12.0195 6.12563 12.1988 6.1042C12.2802 6.09357 12.3641 6.09981 12.4457 6.12505C12.5086 6.14354 12.5671 6.17174 12.6192 6.20784Z"
|
|
:fill="primary"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span v-else-if="type === 'palette'" :style="span_styles">
|
|
<svg
|
|
:width="inner_size"
|
|
:height="inner_size"
|
|
>
|
|
<rect
|
|
:width="inner_size"
|
|
:height="inner_size"
|
|
fill="none"
|
|
rx="0"
|
|
ry="0"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M12.2516 20.3664C12.173 20.3884 12.0894 20.4 12 20.4C11.9227 20.4 11.8455 20.3993 11.7686 20.3978C11.7126 20.3993 11.6564 20.4 11.6 20.4C11.2372 20.4 10.8834 20.3691 10.5425 20.3104C5.7105 19.7107 2 16.1737 2 11.9C2 7.2056 6.47715 3.40002 12 3.40002C15.7082 3.40002 18.945 5.11567 20.6717 7.66406C20.6905 7.69181 20.7029 7.72492 20.7093 7.76311C21.2826 8.51263 21.5525 9.44282 21.3862 10.386C21.1499 11.7265 20.0945 12.7409 18.7432 13.1075C18.6959 13.1025 18.6482 13.1 18.6001 13.1C18.3889 13.1 18.1853 13.1491 17.9942 13.2401L17.9745 13.2418L17.9718 13.251C17.175 13.6461 16.6001 14.7723 16.6001 16.1V16.1001C16.6001 16.1342 16.6001 16.1683 16.6009 16.2021L16.5988 16.3132L16.5992 16.3295L16.5986 16.3764L16.5999 16.3784L16.6 16.4C16.6 18.4325 14.7051 20.1109 12.2516 20.3664ZM12.0566 19.1638C11.9755 19.1925 11.8879 19.2078 11.7928 19.2078C7.0471 19.2078 3.19995 15.9378 3.19995 11.9039C3.19995 7.87006 7.0471 4.59998 11.7928 4.59998C14.882 4.59998 17.8404 5.876 19.3701 7.94922C20.0399 8.54236 20.3957 9.32338 20.2583 10.103C20.0591 11.2322 19.4734 11.9526 18.2539 12.0036C17.5102 11.955 16.5185 12.6539 15.9177 13.9423C15.752 14.2978 15.6278 14.6532 15.5447 14.9934C15.5431 15.0019 15.5412 15.0106 15.539 15.0195C15.439 15.4289 15.4192 15.7734 15.4218 15.8945L15.419 15.8969C15.4158 16.046 15.4228 16.1878 15.44 16.3202C15.3393 17.8505 13.8796 19.0768 12.0566 19.1638ZM13.5 7C13.5 7.82843 12.8284 8.5 12 8.5C11.1715 8.5 10.5 7.82843 10.5 7C10.5 6.17157 11.1715 5.5 12 5.5C12.8284 5.5 13.5 6.17157 13.5 7ZM8.99995 8.5C8.99995 9.32843 8.32838 10 7.49995 10C6.67152 10 5.99995 9.32843 5.99995 8.5C5.99995 7.67157 6.67152 7 7.49995 7C8.32838 7 8.99995 7.67157 8.99995 8.5ZM11.5 18C12.8807 18 14 17.1046 14 16C14 14.8954 12.8807 14 11.5 14C10.1192 14 8.99995 14.8954 8.99995 16C8.99995 17.1046 10.1192 18 11.5 18ZM11.5 16.8C12.2179 16.8 12.8 16.4418 12.8 16C12.8 15.5582 12.2179 15.2 11.5 15.2C10.782 15.2 10.2 15.5582 10.2 16C10.2 16.4418 10.782 16.8 11.5 16.8ZM16.5 10C17.3284 10 18 9.32843 18 8.5C18 7.67157 17.3284 7 16.5 7C15.6715 7 15 7.67157 15 8.5C15 9.32843 15.6715 10 16.5 10ZM5.69995 14C6.52838 14 7.19995 13.3284 7.19995 12.5C7.19995 11.6716 6.52838 11 5.69995 11C4.87152 11 4.19995 11.6716 4.19995 12.5C4.19995 13.3284 4.87152 14 5.69995 14Z"
|
|
:fill="primary"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span v-else-if="type === 'info'" :style="span_styles">
|
|
<svg
|
|
:width="inner_size"
|
|
:height="inner_size"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
:width="inner_size"
|
|
:height="inner_size"
|
|
fill="none"
|
|
rx="0"
|
|
ry="0"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M2 12C2 6.49 6.49 2 12 2C17.51 2 22 6.49 22 12C22 17.51 17.51 22 12 22C6.49 22 2 17.51 2 12ZM4 12C4 16.41 7.59 20 12 20C16.41 20 20 16.41 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12ZM12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9ZM12 10C11.45 10 11 10.45 11 11V16C11 16.55 11.45 17 12 17C12.55 17 13 16.55 13 16V11C13 10.45 12.55 10 12 10Z" :fill="primary"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: `Icon`,
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
primary: {
|
|
type: String,
|
|
default: `#FFFFFF`,
|
|
required: false,
|
|
},
|
|
secondary: {
|
|
type: String,
|
|
default: `#FFFFFF`,
|
|
required: false,
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 25,
|
|
required: false,
|
|
},
|
|
inner_size: {
|
|
type: Number,
|
|
default: null,
|
|
required: false,
|
|
},
|
|
background: {
|
|
type: String,
|
|
default: null,
|
|
required: false,
|
|
},
|
|
border: {
|
|
type: Number,
|
|
default: 0,
|
|
required: false,
|
|
}
|
|
},
|
|
data() { return {
|
|
div_styles: {
|
|
"background-color": this.background,
|
|
"border-radius": `${this.border}px`,
|
|
"width": `${this.size}px`,
|
|
"height": `${this.size}px`,
|
|
},
|
|
}},
|
|
computed: {
|
|
span_styles() {
|
|
if (this.inner_size) {
|
|
return {
|
|
"width": `${this.inner_size}px`,
|
|
"height": `${this.inner_size}px`,
|
|
}
|
|
}
|
|
let x = Math.floor(this.size * 0.6);
|
|
return {
|
|
width: `${x}px`,
|
|
height: `${x}px`,
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#icon {
|
|
justify-content: center;
|
|
vertical-align: middle;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
</style> |