107 lines
1.7 KiB
Svelte
107 lines
1.7 KiB
Svelte
<script context="module" lang="ts">
|
|
export type IconValues =
|
|
| 'analytics'
|
|
| 'back'
|
|
| 'building'
|
|
| 'calendar'
|
|
| 'calendarView'
|
|
| 'camera'
|
|
| 'chart'
|
|
| 'chat'
|
|
| 'chat-small'
|
|
| 'check'
|
|
| 'check-big'
|
|
| 'checklist'
|
|
| 'chevron'
|
|
| 'cloud'
|
|
| 'company'
|
|
| 'cross'
|
|
| 'dots-horizontal'
|
|
| 'dots-vertical'
|
|
| 'edit'
|
|
| 'eye'
|
|
| 'eye-off'
|
|
| 'filter-lines'
|
|
| 'hamburger'
|
|
| 'hash'
|
|
| 'help'
|
|
| 'heart-hand'
|
|
| 'home'
|
|
| 'listView'
|
|
| 'lock'
|
|
| 'logout'
|
|
| 'map'
|
|
| 'microphone'
|
|
| 'notification-box'
|
|
| 'people'
|
|
| 'plus'
|
|
| 'plus-circle'
|
|
| 'profile'
|
|
| 'publish'
|
|
| 'qrcode'
|
|
| 'schedule'
|
|
| 'search'
|
|
| 'share'
|
|
| 'settings'
|
|
| 'send'
|
|
| 'social'
|
|
| 'support'
|
|
| 'table'
|
|
| 'trash'
|
|
| 'upload'
|
|
| 'user-circle'
|
|
| 'user-default'
|
|
| 'user-down'
|
|
| 'user-plus'
|
|
| 'user-remove'
|
|
| 'verified'
|
|
| 'socials/Twitter'
|
|
| 'socials/LinkedIn';
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export var icon: IconValues;
|
|
export var active: boolean = false;
|
|
export var inactive: boolean = false;
|
|
export var black: boolean = false;
|
|
export var white: boolean = false;
|
|
export var rotate = 0;
|
|
|
|
let className = '';
|
|
export { className as class };
|
|
</script>
|
|
|
|
<div
|
|
class="icon {className}"
|
|
class:active
|
|
class:inactive
|
|
style:mask="url(/images/icons/{icon}.svg) no-repeat center"
|
|
style:-webkit-mask="url(/images/icons/{icon}.svg) no-repeat center"
|
|
style:transform="rotate({rotate}deg)"
|
|
class:black
|
|
class:white
|
|
on:click
|
|
on:dblclick
|
|
on:keydown
|
|
on:keypress
|
|
on:keyup
|
|
/>
|
|
|
|
<style>
|
|
.icon {
|
|
@apply w-8 h-8 bg-current origin-center rounded-[100%];
|
|
}
|
|
.icon.active {
|
|
@apply bg-primary;
|
|
}
|
|
.icon.black {
|
|
@apply bg-black;
|
|
}
|
|
.icon.inactive {
|
|
@apply bg-gray-700;
|
|
}
|
|
.icon.white {
|
|
@apply bg-white;
|
|
}
|
|
</style>
|