diff options
Diffstat (limited to 'frontend/src/lib/icons')
| -rw-r--r-- | frontend/src/lib/icons/Bookmark.svelte | 10 | ||||
| -rw-r--r-- | frontend/src/lib/icons/Female.svelte | 1 | ||||
| -rw-r--r-- | frontend/src/lib/icons/Location.svelte | 1 | ||||
| -rw-r--r-- | frontend/src/lib/icons/Male.svelte | 1 | ||||
| -rw-r--r-- | frontend/src/lib/icons/Organized.svelte | 21 | ||||
| -rw-r--r-- | frontend/src/lib/icons/Star.svelte | 25 | ||||
| -rw-r--r-- | frontend/src/lib/icons/Transgender.svelte | 1 |
7 files changed, 60 insertions, 0 deletions
diff --git a/frontend/src/lib/icons/Bookmark.svelte b/frontend/src/lib/icons/Bookmark.svelte new file mode 100644 index 0000000..6f8e192 --- /dev/null +++ b/frontend/src/lib/icons/Bookmark.svelte @@ -0,0 +1,10 @@ +<script lang="ts"> + export let bookmarked: boolean | undefined = undefined; + export let hoverable = false; +</script> + +{#if bookmarked} + <span class:hoverable class="icon-gray icon-base icon-[material-symbols--bookmark]" /> +{:else} + <span class:hoverable class="icon-gray icon-base dim icon-[material-symbols--bookmark-outline]" /> +{/if} diff --git a/frontend/src/lib/icons/Female.svelte b/frontend/src/lib/icons/Female.svelte new file mode 100644 index 0000000..c772a6a --- /dev/null +++ b/frontend/src/lib/icons/Female.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--female] -mx-[3px]" /> diff --git a/frontend/src/lib/icons/Location.svelte b/frontend/src/lib/icons/Location.svelte new file mode 100644 index 0000000..e345f83 --- /dev/null +++ b/frontend/src/lib/icons/Location.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--location-on-outline]" /> diff --git a/frontend/src/lib/icons/Male.svelte b/frontend/src/lib/icons/Male.svelte new file mode 100644 index 0000000..e3578b7 --- /dev/null +++ b/frontend/src/lib/icons/Male.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--male] -mx-px" /> diff --git a/frontend/src/lib/icons/Organized.svelte b/frontend/src/lib/icons/Organized.svelte new file mode 100644 index 0000000..66b5b00 --- /dev/null +++ b/frontend/src/lib/icons/Organized.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + export let organized: boolean | undefined = undefined; + export let hoverable = false; + export let tristate = false; + export let dim = false; +</script> + +{#if organized} + <span class:hoverable class="icon-gray icon-base icon-[material-symbols--check-circle]" /> +{:else if organized === undefined || !tristate} + <span + class:hoverable + class="icon-gray dim icon-base icon-[material-symbols--check-circle-outline]" + /> +{:else} + <span + class:hoverable + class:dim + class="icon-gray icon-base icon-[material-symbols--unpublished]" + /> +{/if} diff --git a/frontend/src/lib/icons/Star.svelte b/frontend/src/lib/icons/Star.svelte new file mode 100644 index 0000000..7613c55 --- /dev/null +++ b/frontend/src/lib/icons/Star.svelte @@ -0,0 +1,25 @@ +<script lang="ts"> + export let large = false; + export let favourite: boolean | undefined = undefined; + export let hoverable = false; +</script> + +{#if favourite} + <span class:hoverable class:large class="icon-yellow icon-[material-symbols--star-rounded]" /> +{:else} + <span + class:hoverable + class:large + class="icon-yellow dim icon-[material-symbols--star-outline-rounded]" + /> +{/if} + +<style lang="postcss"> + span { + @apply -m-px -translate-y-px text-[26px]; + } + + span.large { + @apply text-[34px]; + } +</style> diff --git a/frontend/src/lib/icons/Transgender.svelte b/frontend/src/lib/icons/Transgender.svelte new file mode 100644 index 0000000..7d9adc6 --- /dev/null +++ b/frontend/src/lib/icons/Transgender.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--transgender]" /> |