mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-17 03:01:25 +00:00
040e3d3372* feat(icons): inline carbon icons used by components * feat(icons): update svelte components to use inlined carbon icons * breaking(deps): remove carbon-icons-svelte * chore(deps-dev): install carbon-icons-svelte as a devDependency
54 lines
1.5 KiB
Svelte
54 lines
1.5 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 = undefined;
|
|
|
|
$: 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>
|
|
|
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
|
<svg
|
|
data-carbon-icon="WarningFilled16"
|
|
on:click
|
|
on:mouseover
|
|
on:mouseenter
|
|
on:mouseleave
|
|
on:keyup
|
|
on:keydown
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
width="16"
|
|
height="16"
|
|
class="{className}"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
style="{style}"
|
|
id="{id}"
|
|
{...attributes}
|
|
>
|
|
<path
|
|
d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2 c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"
|
|
></path><path
|
|
d="M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8 c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"
|
|
data-icon-path="inner-path"
|
|
opacity="0"></path>
|
|
<slot>
|
|
{#if title}
|
|
<title>{title}</title>
|
|
{/if}
|
|
</slot>
|
|
</svg>
|