mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-20 03:18:06 +08:00
5759600f95
Migrated the import shortcut used in Svelte from @ to @graphite for better future package compatibility Co-authored-by: Andre Roelofs <andreroelofsai@gmail.com> Co-authored-by: Keavon Chambers <keavon@keavon.com>
50 lines
1.1 KiB
Svelte
50 lines
1.1 KiB
Svelte
<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 disabled = false;
|
|
export let tooltip: string | undefined = undefined;
|
|
|
|
$: iconSizeClass = ((icon: IconName) => {
|
|
return `size-${ICONS[icon].size}`;
|
|
})(icon);
|
|
$: extraClasses = Object.entries(classes)
|
|
.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
|
|
.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>
|