File size: 1,416 Bytes
2409829 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<script lang="ts">
import { type IconName, ICONS, ICON_SVG_STRINGS } from "@graphite/utility-functions/icons";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
export let icon: IconName;
export let iconSizeOverride: number | undefined = undefined;
export let disabled = false;
export let tooltip: string | undefined = undefined;
$: iconSizeClass = ((icon: IconName) => {
const iconData = ICONS[icon];
if (!iconData) {
// eslint-disable-next-line no-console
console.warn(`Icon "${icon}" does not exist.`);
return "size-24";
}
if (iconData.size === undefined) return "";
return `size-${iconSizeOverride || iconData.size}`;
})(icon);
$: extraClasses = Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
</script>
<LayoutRow class={`icon-label ${iconSizeClass} ${className} ${extraClasses}`.trim()} classes={{ disabled }} {tooltip}>
{@html ICON_SVG_STRINGS[icon] || "�"}
</LayoutRow>
<style lang="scss" global>
.icon-label {
flex: 0 0 auto;
fill: var(--color-e-nearwhite);
&.disabled {
fill: var(--color-8-uppergray);
}
&.size-12 {
width: 12px;
height: 12px;
}
&.size-16 {
width: 16px;
height: 16px;
}
&.size-24 {
width: 24px;
height: 24px;
}
}
</style>
|