29 lines
1.5 KiB
Plaintext
29 lines
1.5 KiB
Plaintext
component StyledIcon {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
title: string = "Styled Icon"
|
|
description: string = ""
|
|
items: unknown[] = []
|
|
variant: string = "default"
|
|
icon: string = "icon-[lucide--sparkles]"
|
|
label: string = ""
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<span {...attrs} class="wrn-styled-icon {class}" data-size="{size}" data-color="{color}" data-variant="{variant}" role="{label ? 'img' : 'presentation'}" aria-label="{label}" aria-hidden="{label ? 'false' : 'true'}" data-wrn-owner="StyledIcon" data-wrn-part="root" data-wrn-component="StyledIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="{icon}"></span></span>
|
|
}
|
|
|
|
style {
|
|
.wrn-styled-icon { --icon-color:var(--wrn-color-primary-text); display:inline-grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:var(--wrn-radius-sm); color:var(--icon-color); background:color-mix(in srgb, var(--icon-color) 12%, transparent); }
|
|
.wrn-styled-icon > span { width:1.25rem; height:1.25rem; }
|
|
.wrn-styled-icon[data-color="success"] { --icon-color:var(--wrn-color-success-text); }
|
|
.wrn-styled-icon[data-color="warning"] { --icon-color:var(--wrn-color-warning-text); }
|
|
.wrn-styled-icon[data-size="sm"] { width:2rem; height:2rem; }
|
|
.wrn-styled-icon[data-size="lg"] { width:3rem; height:3rem; }
|
|
.wrn-styled-icon[data-variant="outline"] { border:1px solid currentColor; background:transparent; }
|
|
.wrn-styled-icon[data-variant="plain"] { background:transparent; }
|
|
}
|
|
}
|