Íconos

Los íconos viajan por token propio: el JSON dice "download" y cada plataforma pone su glifo (SF Symbols, Material, SVG). Nunca un nombre de SF Symbol en el wire.

El catálogo, por nombre:

{ "type": "stack", "props": { "spacing": 8 }, "children": [ { "type": "stack", "props": { "axis": "horizontal", "spacing": 12 }, "children": [ { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "app", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "app", "style": "caption" } } ] }, { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "star", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "star", "style": "caption" } } ] }, { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "heart", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "heart", "style": "caption" } } ] } ] }, { "type": "stack", "props": { "axis": "horizontal", "spacing": 12 }, "children": [ { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "cart", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "cart", "style": "caption" } } ] }, { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "magnifier", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "magnifier", "style": "caption" } } ] }, { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "controls", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "controls", "style": "caption" } } ] } ] }, { "type": "stack", "props": { "axis": "horizontal", "spacing": 12 }, "children": [ { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "layout", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "layout", "style": "caption" } } ] }, { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "text", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "text", "style": "caption" } } ] }, { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "photo", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "photo", "style": "caption" } } ] } ] }, { "type": "stack", "props": { "axis": "horizontal", "spacing": 12 }, "children": [ { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "download", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "download", "style": "caption" } } ] }, { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "chevron_right", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "chevron_right", "style": "caption" } } ] }, { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "map-pin", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "map-pin", "style": "caption" } } ] } ] }, { "type": "stack", "props": { "axis": "horizontal", "spacing": 12 }, "children": [ { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "equalizer", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "equalizer", "style": "caption" } } ] }, { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "sparkles", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "sparkles", "style": "caption" } } ] }, { "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 6 }, "children": [ { "type": "icon", "props": { "name": "play", "size": 20 } }, { "type": "text", "props": { "color": "text_secondary", "content": "play", "style": "caption" } } ] } ] } ] }

sale esto:

app

star

heart

cart

magnifier

controls

layout

text

photo

download

chevron_right

map-pin

equalizer

sparkles

play

---

Tamaño y tinte son props:

{ "type": "stack", "props": { "alignment": "center", "axis": "horizontal", "spacing": 16 }, "children": [ { "type": "icon", "props": { "name": "star", "size": 16 } }, { "type": "icon", "props": { "name": "star", "size": 28, "tint": "accent" } }, { "type": "icon", "props": { "name": "star", "size": 40, "tint": "text_secondary" } } ] }

sale esto: