33 lines
624 B
Svelte
33 lines
624 B
Svelte
<script lang="ts">
|
|
let classList = ''
|
|
export let href: string
|
|
export let icon: string
|
|
export { classList as class }
|
|
</script>
|
|
|
|
<a class="link-with-icon {classList}" {href}>
|
|
<span class="material-icons" aria-hidden="true">{icon}</span>
|
|
<span class="text">
|
|
<slot />
|
|
</span>
|
|
</a>
|
|
|
|
<style lang="postcss">
|
|
.link-with-icon {
|
|
width: fit-content;
|
|
display: grid;
|
|
grid-template-columns: min-content 1fr;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
gap: 0.5rem;
|
|
}
|
|
.link-with-icon:hover .text {
|
|
text-decoration: underline;
|
|
}
|
|
.text {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|