///|
/// A 24x24 stroke icon rendered as inline SVG. The surrounding span owns
/// accessibility hiding and a stable layout box; color inherits from the
/// parent via `currentColor`.
pub fn icon(
path : String,
size? : Int = 16,
stroke_width? : Int = 2,
style? : Array[String] = [],
) -> @html.Html {
let px = size.to_string() + "px"
@html.span(
style=@internal.sumi_styles(
[
@internal.SumiBoxSizing,
"display:inline-flex;width:\{px};height:\{px};flex:none;align-items:center;justify-content:center;pointer-events:none",
],
style,
),
attrs=@html.Attrs::build().aria_hidden("true"),
@svg.svg(
width=size,
height=size,
view_box="0 0 24 24",
style=["display:block;width:100%;height:100%"],
[
@svg.path(
d=path,
fill="none",
stroke="currentColor",
stroke_width~,
attrs=@svg.Attrs::build()
.stroke_linecap("round")
.stroke_linejoin("round"),
),
],
),
)
}
///|
pub fn icon_chevron_down(size? : Int = 12) -> @html.Html {
icon("m6 9 6 6 6-6", size~)
}
///|
pub fn icon_chevron_up(size? : Int = 12) -> @html.Html {
icon("m18 15-6-6-6 6", size~)
}
///|
pub fn icon_chevron_left(size? : Int = 12) -> @html.Html {
icon("m15 18-6-6 6-6", size~)
}
///|
pub fn icon_chevron_right(size? : Int = 12) -> @html.Html {
icon("m9 18 6-6-6-6", size~)
}
///|
pub fn icon_check(size? : Int = 16) -> @html.Html {
icon("M20 6 9 17l-5-5", size~)
}
///|
/// Filled check mark for the outline checkboxes of menu rows. The glyph grid
/// is 12 inside the 16 viewBox (path coordinates scaled by 4/3), so at the
/// default size 12 it reproduces the design's checkbox tick exactly.
pub fn icon_check_fill(size? : Int = 12) -> @html.Html {
fill_icon(
"M12.18688 5.00164C12.51232 5.32708 12.51232 5.85472 12.18688 6.18016L7.38688 10.98016C7.06144 11.3056 6.5338 11.3056 6.20837 10.98016L3.80837 8.58016C3.48293 8.25472 3.48293 7.72708 3.80837 7.40164C4.1338 7.07621 4.66144 7.07621 4.98688 7.40164L6.79763 9.21239L11.00837 5.00164C11.3338 4.67621 11.86144 4.67621 12.18688 5.00164Z",
size~,
fill_rule="evenodd",
)
}
///|
pub fn icon_x(size? : Int = 16) -> @html.Html {
icon("M18 6 6 18M6 6l12 12", size~)
}
///|
pub fn icon_plus(size? : Int = 16) -> @html.Html {
icon("M5 12h14M12 5v14", size~)
}
///|
pub fn icon_minus(size? : Int = 16) -> @html.Html {
icon("M5 12h14", size~)
}
///|
/// Rounded filled plus on the 16 grid — the add tile's glyph.
pub fn icon_plus_fill(size? : Int = 16) -> @html.Html {
fill_icon(
"M7.20053 13.3333C7.20053 13.7752 7.5587 14.1333 8.00053 14.1333C8.44236 14.1333 8.80053 13.7752 8.80053 13.3333V8.79995H13.3331C13.7749 8.79995 14.1331 8.44178 14.1331 7.99995C14.1331 7.55813 13.7749 7.19995 13.3331 7.19995H8.80053V2.66666C8.80053 2.22483 8.44236 1.86666 8.00053 1.86666C7.5587 1.86666 7.20053 2.22483 7.20053 2.66666V7.19995H2.66641C2.22459 7.19995 1.86641 7.55813 1.86641 7.99995C1.86641 8.44178 2.22459 8.79995 2.66641 8.79995H7.20053V13.3333Z",
size~,
fill_rule="evenodd",
)
}
///|
pub fn icon_search(size? : Int = 16) -> @html.Html {
icon("m21 21-4.3-4.3M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z", size~)
}
///|
pub fn icon_arrow_up(size? : Int = 18) -> @html.Html {
icon("M12 19V5M5 12l7-7 7 7", size~)
}
///|
pub fn icon_arrow_down(size? : Int = 16) -> @html.Html {
icon("M12 5v14M19 12l-7 7-7-7", size~)
}
///|
pub fn icon_download(size? : Int = 16) -> @html.Html {
icon("M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3", size~)
}
///|
pub fn icon_upload(size? : Int = 16) -> @html.Html {
icon("M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12", size~)
}
///|
/// Filled upload arrow over a baseline — the upload menu row's glyph.
pub fn icon_upload_fill(size? : Int = 16) -> @html.Html {
fill_icon(
"M12.2913 5.41857C12.5517 5.67888 12.5517 6.10092 12.2913 6.36123C12.0309 6.62154 11.6088 6.62154 11.3484 6.36123L8.66667 3.68037V10.558C8.66667 10.9262 8.36819 11.2247 8 11.2247C7.63181 11.2247 7.33333 10.9262 7.33333 10.558V3.68036L4.65162 6.36123C4.39123 6.62154 3.96905 6.62154 3.70866 6.36123C3.44827 6.10092 3.44827 5.67888 3.70866 5.41857L7.52852 1.59992C7.78891 1.33961 8.21109 1.33961 8.47148 1.59992L12.2913 5.41857ZM2 13.3346C1.99997 12.9664 2.29842 12.6679 2.66661 12.6679L13.3333 12.6669C13.7015 12.6669 14 12.9653 14 13.3335C14 13.7017 13.7016 14.0002 13.3334 14.0002L2.66672 14.0012C2.29853 14.0013 2.00003 13.7028 2 13.3346Z",
size~,
fill_rule="evenodd",
)
}
///|
/// Folder outline — the pick-from-library menu row's glyph.
pub fn icon_folder(size? : Int = 16) -> @html.Html {
fill_icon(
"M3.22493 6.43333V3.84686C3.22493 3.47867 3.52341 3.1802 3.8916 3.1802H5.62082C5.80227 3.1802 5.97589 3.25416 6.10159 3.38502L6.84165 4.15542C7.21877 4.548 7.73961 4.76989 8.28398 4.76989H12.1083C12.4765 4.76989 12.775 5.06837 12.775 5.43656V6.43333H3.22493ZM3.22493 7.76667V11.1029C3.22493 11.8393 3.82189 12.4363 4.55827 12.4363H11.4417C12.178 12.4363 12.775 11.8393 12.775 11.1029V7.76667H3.22493ZM7.8032 3.23174L7.06315 2.46134C6.68603 2.06876 6.16518 1.84686 5.62082 1.84686H3.8916C2.78703 1.84686 1.8916 2.74229 1.8916 3.84686V11.1029C1.8916 12.5757 3.08551 13.7696 4.55827 13.7696H11.4417C12.9144 13.7696 14.1083 12.5757 14.1083 11.1029V5.43656C14.1083 4.33199 13.2129 3.43656 12.1083 3.43656H8.28398C8.10253 3.43656 7.92891 3.36259 7.8032 3.23174Z",
size~,
fill_rule="evenodd",
)
}
///|
/// Crosshair — the pick-from-canvas menu row's glyph.
pub fn icon_target(size? : Int = 16) -> @html.Html {
fill_icon(
"M8 0.666667C8.36819 0.666667 8.66667 0.965144 8.66667 1.33333V2.03776C11.4476 2.34524 13.6548 4.55236 13.9622 7.33333H14.6641C15.0322 7.33342 15.3307 7.63186 15.3307 8C15.3307 8.36814 15.0322 8.66658 14.6641 8.66667H13.9622C13.6548 11.4476 11.4476 13.6541 8.66667 13.9616V14.6641C8.66658 15.0322 8.36814 15.3307 8 15.3307C7.63186 15.3307 7.33342 15.0322 7.33333 14.6641V13.9616C4.55239 13.6541 2.34524 11.4476 2.03776 8.66667H1.33333C0.965144 8.66667 0.666667 8.36819 0.666667 8C0.666667 7.63181 0.965144 7.33333 1.33333 7.33333H2.03776C2.34524 4.55236 4.55236 2.34524 7.33333 2.03776V1.33333C7.33333 0.965144 7.63181 0.666667 8 0.666667ZM8.66667 4.7513C8.66667 5.11949 8.36819 5.41797 8 5.41797C7.63181 5.41797 7.33333 5.11949 7.33333 4.7513V3.38151C5.28964 3.6739 3.6739 5.28964 3.38151 7.33333H4.7513C5.11949 7.33333 5.41797 7.63181 5.41797 8C5.41797 8.36819 5.11949 8.66667 4.7513 8.66667H3.38151C3.67389 10.7103 5.28969 12.3254 7.33333 12.6178V11.2461C7.33333 10.8779 7.63181 10.5794 8 10.5794C8.36819 10.5794 8.66667 10.8779 8.66667 11.2461V12.6178C10.7103 12.3254 12.3261 10.7103 12.6185 8.66667H11.2461C10.8779 8.66667 10.5794 8.36819 10.5794 8C10.5794 7.63181 10.8779 7.33333 11.2461 7.33333H12.6185C12.3261 5.28964 10.7104 3.6739 8.66667 3.38151V4.7513Z",
size~,
)
}
///|
pub fn icon_image(size? : Int = 16) -> @html.Html {
icon(
"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2ZM8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM21 15l-5-5L5 21",
size~,
)
}
///|
pub fn icon_sparkle(size? : Int = 16) -> @html.Html {
icon(
"M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3L12 3Z",
size~,
)
}
///|
/// Star outline on the 16 grid — the favorite toggle's off state.
pub fn icon_star(size? : Int = 16) -> @html.Html {
fill_icon(
"M6.59516 4.78468L8.00001 2.52519L9.40485 4.78468C9.68019 5.22752 10.1176 5.54531 10.6238 5.67032L13.2069 6.30819L11.4921 8.3425C11.156 8.7412 10.9889 9.2554 11.0265 9.7755L11.218 12.4292L8.75338 11.427C8.27034 11.2306 7.72968 11.2306 7.24663 11.427L4.78199 12.4292L4.97355 9.7755C5.01109 9.2554 4.84402 8.7412 4.50794 8.3425L2.79315 6.30819L5.37618 5.67032C5.88243 5.54531 6.31983 5.22752 6.59516 4.78468ZM7.43385 0.910584C7.6947 0.491041 8.30531 0.491041 8.56617 0.910584L10.5372 4.08066C10.6289 4.22827 10.7747 4.3342 10.9435 4.37588L14.5675 5.2708C15.0471 5.38924 15.2358 5.96997 14.9174 6.3477L12.5115 9.20184C12.3995 9.33474 12.3438 9.50614 12.3563 9.67951L12.6251 13.4027C12.6607 13.8954 12.1667 14.2543 11.709 14.0682L8.25113 12.6621C8.09012 12.5966 7.9099 12.5966 7.74888 12.6621L4.29099 14.0682C3.83335 14.2543 3.33936 13.8954 3.37492 13.4027L3.64367 9.67951C3.65619 9.50614 3.6005 9.33474 3.48847 9.20184L1.08262 6.3477C0.76422 5.96997 0.952909 5.38924 1.43253 5.2708L5.05652 4.37588C5.22527 4.3342 5.37107 4.22827 5.46285 4.08066L7.43385 0.910584Z",
size~,
fill_rule="evenodd",
)
}
///|
/// Filled star — the favorite toggle's on state.
pub fn icon_star_fill(size? : Int = 16) -> @html.Html {
fill_icon(
"M7.43385 0.910584C7.6947 0.491041 8.30531 0.491041 8.56617 0.910584L10.5372 4.08066C10.6289 4.22827 10.7747 4.3342 10.9435 4.37588L14.5675 5.2708C15.0471 5.38924 15.2358 5.96997 14.9174 6.3477L12.5115 9.20184C12.3995 9.33474 12.3438 9.50614 12.3563 9.67951L12.6251 13.4027C12.6607 13.8954 12.1667 14.2543 11.709 14.0682L8.25113 12.6621C8.09012 12.5966 7.9099 12.5966 7.74888 12.6621L4.29099 14.0682C3.83335 14.2543 3.33936 13.8954 3.37492 13.4027L3.64367 9.67951C3.65619 9.50614 3.6005 9.33474 3.48847 9.20184L1.08262 6.3477C0.76422 5.96997 0.952909 5.38924 1.43253 5.2708L5.05652 4.37588C5.22527 4.3342 5.37107 4.22827 5.46285 4.08066L7.43385 0.910584Z",
size~,
)
}
///|
/// Filled disc with a tick cutout — the completion state of async work.
pub fn icon_tick_circle_fill(
size? : Int = 16,
style? : Array[String] = [],
) -> @html.Html {
fill_icon(
"M8 0C3.58172 0 0 3.58172 0 8C0 12.41827 3.58172 16.00003 8 16.00003C12.41827 16.00003 16.00003 12.41827 16.00003 8C16.00003 3.58172 12.41827 0 8 0ZM7.54434 10.392L11.34432 6.59199C11.61638 6.32 11.61638 5.88 11.34432 5.6C11.07235 5.328 10.62432 5.328 10.35235 5.6L7.04834 8.904L5.64834 7.50399C5.37635 7.232 4.92834 7.232 4.65635 7.50399C4.38434 7.776 4.38434 8.216 4.65635 8.496L6.56034 10.392C6.69635 10.52803 6.87234 10.59197 7.04834 10.59197C7.23234 10.59197 7.40834 10.52803 7.54434 10.392Z",
size~,
fill_rule="evenodd",
style~,
)
}
///|
/// Filled disc with an "i" cutout — the partial-failure state of async work.
pub fn icon_info_circle_fill(
size? : Int = 16,
style? : Array[String] = [],
) -> @html.Html {
fill_icon(
"M0 8C0 3.5848 3.584 0 8 0C12.42403 0 16.00003 3.5848 16.00003 8C16.00003 12.41683 12.42403 16.00003 8 16.00003C3.584 16.00003 0 12.41683 0 8ZM7.296 4.968C7.296 4.5848 7.616 4.264 8 4.264C8.384 4.264 8.696 4.5848 8.696 4.968V8.504C8.696 8.8888 8.384 9.2 8 9.2C7.616 9.2 7.296 8.8888 7.296 8.504V4.968ZM8.008 11.74483C7.616 11.74483 7.304 11.42477 7.304 11.04077C7.304 10.65677 7.616 10.34477 8 10.34477C8.392 10.34477 8.704 10.65677 8.704 11.04077C8.704 11.42477 8.392 11.74483 8.008 11.74483Z",
size~,
fill_rule="evenodd",
style~,
)
}
///|
pub fn icon_adjust(size? : Int = 16) -> @html.Html {
icon(
"M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6",
size~,
)
}
///|
pub fn icon_reset(size? : Int = 16) -> @html.Html {
icon("M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5", size~)
}
///|
pub fn icon_expand(size? : Int = 16) -> @html.Html {
icon(
"M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M16 21h3a2 2 0 0 0 2-2v-3M8 21H5a2 2 0 0 1-2-2v-3",
size~,
)
}
///|
pub fn icon_crop(size? : Int = 16) -> @html.Html {
icon("M6 2v14a2 2 0 0 0 2 2h14M2 6h14a2 2 0 0 1 2 2v14", size~)
}
///|
pub fn icon_layers(size? : Int = 16) -> @html.Html {
icon("M12 2 2 7l10 5 10-5-10-5ZM2 17l10 5 10-5M2 12l10 5 10-5", size~)
}
///|
pub fn icon_grid(size? : Int = 16) -> @html.Html {
icon("M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z", size~)
}
///|
pub fn icon_play(size? : Int = 16) -> @html.Html {
icon("M6 4l14 8-14 8V4Z", size~)
}
///|
pub fn icon_clock(size? : Int = 16) -> @html.Html {
icon("M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20ZM12 6v6l4 2", size~)
}
///|
pub fn icon_more(size? : Int = 16) -> @html.Html {
icon(
"M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
size~,
)
}
///|
pub fn icon_scissors(size? : Int = 16) -> @html.Html {
icon(
"M6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM20 4 8.1 15.9M14.5 14.5 20 20M8.1 8.1 12 12",
size~,
)
}
///|
/// An aspect-ratio artwork icon: a centered rectangle outline drawn at the
/// given ratio inside the icon box (ratio pickers in size panels).
pub fn icon_ratio(width~ : Int, height~ : Int, size? : Int = 16) -> @html.Html {
let box = size - 2
let (rw, rh) = if width >= height {
(box, (box * height + width / 2) / width)
} else {
((box * width + height / 2) / height, box)
}
let x = (size - rw) / 2
let y = (size - rh) / 2
let px = size.to_string() + "px"
@html.span(
style=[
@internal.SumiBoxSizing,
"display:inline-flex;width:\{px};height:\{px};flex:none;align-items:center;justify-content:center;pointer-events:none",
],
attrs=@html.Attrs::build().aria_hidden("true"),
@svg.svg(
width=size,
height=size,
view_box="0 0 \{size} \{size}",
style=["display:block;width:100%;height:100%"],
[
@svg.rect(
x~,
y~,
width=rw,
height=rh,
rx=2,
fill="none",
stroke="currentColor",
stroke_width=1,
),
],
),
)
}
///|
/// A filled icon rendered as inline SVG on a 16x16 grid — companion to the
/// stroke set for glyphs the design draws as solids. Color inherits from the
/// parent via `currentColor`.
fn fill_icon(
path : String,
size? : Int = 16,
fill_rule? : String,
style? : Array[String] = [],
) -> @html.Html {
let px = size.to_string() + "px"
let path_attrs = match fill_rule {
Some(rule) => @svg.Attrs::build().fill_rule(rule)
None => @svg.Attrs::build()
}
@html.span(
style=@internal.sumi_styles(
[
@internal.SumiBoxSizing,
"display:inline-flex;width:\{px};height:\{px};flex:none;align-items:center;justify-content:center;pointer-events:none",
],
style,
),
attrs=@html.Attrs::build().aria_hidden("true"),
@svg.svg(
width=size,
height=size,
view_box="0 0 16 16",
style=["display:block;width:100%;height:100%"],
[@svg.path(d=path, fill="currentColor", attrs=path_attrs)],
),
)
}
///|
/// Exclamation in a circle, used for inline validation and status notes.
pub fn icon_important(size? : Int = 16) -> @html.Html {
fill_icon(
"M8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333ZM8 2.66667C5.05448 2.66667 2.66667 5.05448 2.66667 8C2.66667 10.9455 5.05448 13.3333 8 13.3333C10.9455 13.3333 13.3333 10.9455 13.3333 8C13.3333 5.05448 10.9455 2.66667 8 2.66667ZM8 9.41602C8.44182 9.41602 8.80013 9.77432 8.80013 10.2161C8.80006 10.6579 8.44178 11.0163 8 11.0163C7.55822 11.0163 7.19994 10.6579 7.19987 10.2161C7.19987 9.77432 7.55817 9.41602 8 9.41602ZM8 4.61589C8.44183 4.61589 8.80013 4.97419 8.80013 5.41602V7.81576C8.80013 8.25758 8.44183 8.61589 8 8.61589C7.55817 8.61589 7.19987 8.25758 7.19987 7.81576V5.41602C7.19987 4.97419 7.55817 4.61589 8 4.61589Z",
size~,
)
}
///|
/// Slanted bar separating pagination numbers — a filled glyph on a 9.333x14
/// design grid, sized by height (the width follows the glyph's ratio).
pub fn icon_slash(size? : Int = 14) -> @html.Html {
let px = size.to_string() + "px"
@html.span(
style=[
@internal.SumiBoxSizing,
"display:inline-flex;height:\{px};flex:none;align-items:center;justify-content:center;pointer-events:none",
],
attrs=@html.Attrs::build().aria_hidden("true"),
@svg.svg(
height=size,
view_box="0 0 9.33333 14",
style=["display:block;width:auto;height:100%"],
[
@svg.path(
d="M5.89302 1.65749C5.99977 1.35366 6.33306 1.19409 6.63692 1.30066C6.94065 1.40751 7.10031 1.74018 6.99369 2.044L3.47614 12.0587C3.36932 12.3625 3.03615 12.5223 2.73224 12.4155C2.42852 12.3086 2.26867 11.9754 2.3754 11.6716L5.89302 1.65749Z",
fill="currentColor",
),
],
),
)
}
///|
/// Filled rounded caret marking a filter trigger, on a 16 design grid.
pub fn icon_caret_down(size? : Int = 16) -> @html.Html {
fill_icon(
"M10.4629 6H5.5371C4.67794 6 4.21876 7.01192 4.78452 7.6585L7.24742 10.4732C7.64584 10.9286 8.35416 10.9286 8.75258 10.4732L11.2155 7.6585C11.7812 7.01192 11.3221 6 10.4629 6Z",
size~,
)
}
///|
/// Filled circle with a times cutout — the clear affordance of a filtered
/// trigger. The glyph grid is 13.333 inside the 16 viewBox, which reproduces
/// the design's 8.33% inset exactly at size 16.
pub fn icon_close_circle(size? : Int = 16) -> @html.Html {
fill_icon(
"M6.66667 0C2.98477 0 0 2.98477 0 6.66667C0 10.3486 2.98477 13.3333 6.66667 13.3333C10.3486 13.3333 13.3333 10.3486 13.3333 6.66667C13.3333 2.98477 10.3486 0 6.66667 0ZM8.67307 8.66672C8.89974 8.44072 8.89974 8.07405 8.67307 7.84739L7.48641 6.66072L8.67307 5.47339C8.89974 5.24739 8.89974 4.87405 8.67307 4.64739C8.44641 4.42005 8.07974 4.42005 7.84641 4.64739L6.66641 5.83339L5.47974 4.64739C5.24641 4.42005 4.87974 4.42005 4.65307 4.64739C4.42641 4.87405 4.42641 5.24739 4.65307 5.47339L5.83974 6.66072L4.65307 7.84072C4.42641 8.07405 4.42641 8.44072 4.65307 8.66672C4.76641 8.78006 4.91974 8.84072 5.06641 8.84072C5.21974 8.84072 5.36641 8.78006 5.47974 8.66672L6.66641 7.48739L7.85307 8.66672C7.96641 8.78739 8.11307 8.84072 8.25974 8.84072C8.41307 8.84072 8.55974 8.78006 8.67307 8.66672Z",
size~,
fill_rule="evenodd",
)
}
///|
/// Three left-aligned bars, the bottom one short — the generic document
/// placeholder glyph of the attachment tile.
pub fn icon_align_left(size? : Int = 16) -> @html.Html {
fill_icon(
"M8 12C8 12.3682 7.70152 12.6667 7.33333 12.6667H3.33333C2.96514 12.6667 2.66667 12.3682 2.66667 12V12C2.66667 11.6318 2.96514 11.3333 3.33333 11.3333H7.33333C7.70152 11.3333 8 11.6318 8 12V12ZM13.3333 8C13.3333 8.36819 13.0349 8.66667 12.6667 8.66667H3.33333C2.96514 8.66667 2.66667 8.36819 2.66667 8V8C2.66667 7.63181 2.96514 7.33333 3.33333 7.33333H12.6667C13.0349 7.33333 13.3333 7.63181 13.3333 8V8ZM13.3333 4C13.3333 4.36819 13.0349 4.66667 12.6667 4.66667H3.33333C2.96514 4.66667 2.66667 4.36819 2.66667 4V4C2.66667 3.63181 2.96514 3.33333 3.33333 3.33333H12.6667C13.0349 3.33333 13.3333 3.63181 13.3333 4V4Z",
size~,
fill_rule="evenodd",
)
}
///|
/// Filled times mark, weighted to stay legible at 4px — the glyph of the
/// attachment tile's remove badge. (The stroked `icon_x` renders too thin
/// at that size.)
pub fn icon_x_fill(size? : Int = 16) -> @html.Html {
fill_icon(
"M13.05244 4.079C13.36484 3.766568 13.36484 3.260016 13.05244 2.94758C12.74 2.635148 12.23352 2.635148 11.92112 2.94758L8.00004 6.86896L4.07908 2.94768C3.76668 2.635248 3.260172 2.635248 2.947764 2.94768C2.63536 3.260112 2.63536 3.766664 2.947764 4.07908L6.86872 8.0004L2.947764 11.92168C2.63536 12.23412 2.63536 12.74068 2.947764 13.05312C3.260172 13.36552 3.76668 13.36552 4.07908 13.05312L8.00004 9.1318L11.92112 13.0532C12.23352 13.36564 12.74 13.36564 13.05244 13.0532C13.36484 12.74076 13.36484 12.2342 13.05244 11.9218L9.13136 8.0004L13.05244 4.079Z",
size~,
fill_rule="evenodd",
)
}