Icon Showcase
arrow
arrow_tailed
curved_arrow
calendar
chart
row_item
chart_group
check
copy
drag_grip
edit
link
link_internal
list
minus
plus
rotate
refresh
sort
table
trashcan
x
three_dots
clock
sun
moon
magnifying_glass
smile_face
nuetral_face
frown_face
pointer_hand
touch_circle
profile
share
invite
feedback
idea
ar_one_to_one
ar_four_to_three
ar_three_to_two
ar_sixteen_to_nine
resize
crop
folder
file
file_drop
linked
unlinked
sliders
brain
brush
redo_arrow
undo_arrow
opposing_arrows
warning
pinpoint
paperclip
reply
reply_all
forward
mail_opened
mail_received
mail_sent
mail_sent_opened
Component Documentation
Component Name
Icon
Builder Function Name
create_icon_manager
Description
renders an inline svg icon from a fixed set of icon_ids, with optional color, rotation, and animation
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| icon_id | string | identifies the icon to render (e.g. 'arrow', 'check', 'trashcan'). | |
| deg | number | 0 | icon rotation in degrees |
| color | string | var(--g4-t) | stroke color for the icon |
| color_alt | string | var(--g12-t) | alternate color (used in certain icons like 'sort' for ascending vs. descending). if not used, it falls back to the main color |
| fill | string | none | svg fill color (e.g., 'none' or a color hex) |
| size | number | 2 | icon size in rem |
| sw | number | 60 | stroke width setting for the icon |
| ml | number | 0 | margin-left in rem |
| mr | number | 0 | margin-right in rem |
| mt | number | 0 | margin-top in rem |
| mb | number | 0 | margin-bottom in rem |
| sort_state | string | used by the 'sort' icon to highlight ascending or descending arrow: 'asc', 'desc', or null | |
| is_shimmy_infinite | boolean | false | if true, the icon keeps rotating slightly (shimmy) forever |
| is_shimmyable | boolean | false | if true, icon can be triggered to shimmy for 1s with trigger_shimmy() |
| movement_stiffness | number | 0.1 | reserved for future motion config (svelte spring or similar) |
| movement_damping | number | 0.1 | reserved for future motion config (svelte spring or similar) |
| id | string | unique id for the icon. if not provided, a random id is generated |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| trigger_shimmy | activates a shimmy animation for ~1 second, if is_shimmyable is true | No Params | void |
| set_attributes | updates the manager's config based on a new input object | input: object | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | unique id used in the dom for the icon container |
| icon_id | string | current icon id specifying which path or group of paths is rendered |
| deg | number | the icon's current rotation in degrees |
| deg_spring | number | a placeholder for a svelte motion spring around deg (not fully implemented) |
| color | string | the main stroke color |
| color_alt | string | an optional alternate color, used in certain icons (e.g. 'sort') |
| fill | string | the fill color for shapes in the svg |
| size | number | the icon's width/height in rem |
| sw | number | the icon's stroke width |
| ml | number | margin-left in rem |
| mr | number | margin-right in rem |
| mt | number | margin-top in rem |
| mb | number | margin-bottom in rem |
| sort_state | string | if 'asc' or 'desc', the sort icon shows the alt color for either ascending or descending |
| is_shimmy_infinite | boolean | if true, the icon is in a constant shimmy animation |
| is_shimmyable | boolean | if true, the icon can be triggered to shimmy with trigger_shimmy() |
| movement_stiffness | number | reserved for future usage with svelte motions |
| movement_damping | number | reserved for future usage with svelte motions |
| is_shimmying | boolean | true if the icon is currently shimmying in a short animation |
