mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
45 lines
1 KiB
Svelte
45 lines
1 KiB
Svelte
<script>
|
|
let className = undefined;
|
|
export { className as class };
|
|
export let id = undefined;
|
|
export let tabindex = undefined;
|
|
export let focusable = false;
|
|
export let title = undefined;
|
|
export let style = 'will-change: transform;';
|
|
|
|
const preserveAspectRatio = 'xMidYMid meet';
|
|
$: ariaLabel = $$props['aria-label'];
|
|
$: ariaLabelledBy = $$props['aria-labelledby'];
|
|
$: labelled = ariaLabel || ariaLabelledBy || title;
|
|
$: attributes = {
|
|
'aria-label': ariaLabel,
|
|
'aria-labelledby': ariaLabelledBy,
|
|
'aria-hidden': labelled ? undefined : true,
|
|
role: labelled ? 'img' : undefined,
|
|
focusable: tabindex === '0' ? true : focusable,
|
|
tabindex
|
|
};
|
|
</script>
|
|
|
|
<svg
|
|
on:click
|
|
on:mouseover
|
|
on:mouseenter
|
|
on:mouseleave
|
|
on:keyup
|
|
on:keydown
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 32 32"
|
|
width="16"
|
|
height="16"
|
|
class={className}
|
|
{preserveAspectRatio}
|
|
{style}
|
|
{id}
|
|
{...attributes}>
|
|
<slot>
|
|
{#if title}
|
|
<title>{title}</title>
|
|
{/if}
|
|
</slot>
|
|
</svg>
|