You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.2 KiB
53 lines
1.2 KiB
<script lang="ts">
|
|
import type { AirIconProps } from './types';
|
|
import { resolveAirIconSize, resolveAirIconStrokeWidth } from './create-icon';
|
|
|
|
let {
|
|
size = 'md',
|
|
strokeWidth = 'auto',
|
|
viewBox = '0 0 24 24',
|
|
title,
|
|
decorative = true,
|
|
children,
|
|
class: className = '',
|
|
style,
|
|
...restProps
|
|
}: AirIconProps = $props();
|
|
|
|
const resolvedSize = $derived(resolveAirIconSize(size));
|
|
const resolvedStrokeWidth = $derived(resolveAirIconStrokeWidth(strokeWidth, size));
|
|
const mergedStyle = $derived.by(() => {
|
|
const baseStyle = `width:${resolvedSize};height:${resolvedSize};`;
|
|
return style ? `${baseStyle}${style}` : baseStyle;
|
|
});
|
|
</script>
|
|
|
|
<svg
|
|
viewBox={viewBox}
|
|
focusable="false"
|
|
aria-hidden={decorative ? 'true' : undefined}
|
|
role={decorative ? undefined : 'img'}
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width={resolvedStrokeWidth}
|
|
class={`air-icon ${className}`.trim()}
|
|
style={mergedStyle}
|
|
{...restProps}
|
|
>
|
|
{#if !decorative && title}
|
|
<title>{title}</title>
|
|
{/if}
|
|
|
|
{@render children?.()}
|
|
</svg>
|
|
|
|
<style>
|
|
.air-icon {
|
|
display: inline-block;
|
|
flex: 0 0 auto;
|
|
vertical-align: middle;
|
|
color: inherit;
|
|
}
|
|
</style>
|