Arc Rider Docs · Markdown

Mini Widgets

Icon

Icon

AI Defaults
Function name
`arcCustomIcon`.
iconSet
`"phosphor"` (default if unset), `"openmoji"`, `"material_symbols"` (alias `"material"`).
name
Glyph name (e.g. `"user"`, `"trash"`). Phosphor legacy: style in name (`"trash-bold"`) still works and overrides explicit **style**.
style
Phosphor: `regular` | `bold` | `duotone` | `light` | `thin` | `fill`. Material: `outlined` | `rounded` | `sharp` | `rounded-fill` | … (default Phosphor `regular`, Material `outlined`).
iconSize
, **color**: Icon size and fill color (e.g. `"24px"`, `"#818599"`).
containerSize
, **backgroundColor**, **borderRadius**, **borderSize**, **borderColor**: Built-in container – do NOT wrap in `arcCustomLayout` for styling.
No uniqueId needed
for display-only icons.

Custom Icon

Cada cliente recibe al inicio de su licencia un conjunto de iconos estándar. Si necesitas más iconos, contáctanos en <a href="mailto:support@arc-rider.com">support@arc-rider.com</a> o en nuestro <a href="https://discord.com/invite/Fg67f8qX3K">canal de Discord.</a>

💡 Nota: Custom Icon admite <a href="https://phosphoricons.com/">Phosphor Icons</a>, <a href="https://fonts.google.com/icons">Material Symbols</a> (iconSet: "material" o "material_symbols") y <a href="https://openmoji.org/">OpenMoji</a>. Tras la primera carga, los iconos de Phosphor y Material se almacenan en caché en el navegador — las llamadas repetidas son más rápidas y funcionan sin conexión una vez que el conjunto se ha cargado por completo (sin configuración adicional necesaria).

Para añadir iconos a tu proyecto, ve en tu User Cockpit a la sección Icons y simplemente selecciónalos (ver la explicación más abajo).

Código de aplicación

arcCustomIcon({
        iconSet: "phosphor",
        name: "trash",
        containerSize: "40px",
        borderSize: "",
        borderColor: "",
        borderRadius: "7px",
        iconSize: "30px",
        color: "#FF2222",
        backgroundColor: "#fcdfde"
    })
arcCustomIcon({
    iconSet: "openmoji",
    name: "envelope-with-arrow-color",
    containerSize: "50px",
    borderSize: "1px",
    borderColor: "",
    iconSize: "50px",
    borderRadius: "50px",
    color: "#C637E4",
    backgroundColor: "#FAE6FF"
}),

<em><strong>

iconSet</strong></em> define el conjunto de iconos.

iconSet: "phosphor",     // Standard-Fallback
iconSet: "material",     // Alias für material_symbols
iconSet: "material_symbols",
iconSet: "openmoji",

Si no indicas iconSet, el widget usa el primer conjunto totalmente preinstalado (orden: Phosphor → Material → OpenMoji); en caso contrario, Phosphor.

<em><strong>style</strong></em> (opcional) elige la variante dentro del conjunto.

Phosphor — regular (estándar), bold, duotone, light, thin, fill:

arcCustomIcon({ iconSet: "phosphor", name: "trash", style: "bold", color: "#c00" })

Legacy: el estilo en el nombre (name: "trash-bold") sigue funcionando y tiene prioridad sobre un style establecido.

Material Symbols — outlined (estándar), rounded, sharp, variantes rellenas con sufijo -fill (p. ej. rounded-fill):

arcCustomIcon({ iconSet: "material", name: "home", style: "rounded-fill", iconSize: "24px" })

<em><strong> name</strong></em> define el nombre del glifo (sin sufijo de estilo si estableces style por separado). Encuentras los nombres en el Cockpit o en los catálogos de iconos correspondientes.

name: "trash", // Titel immer in " schreiben

containerSize define si y en qué tamaño quieres mostrar el contenedor/fondo del icono.

containerSize: "30px", // Pixel-Wert in " angeben
containerSize: "" // Kein Fallback-Wert

borderSize define el grosor de tu borde.

borderSize: "1px", // Pixel-Wert in " angeben
borderSize: "", // Kein Fallback-Wert

borderColor indica el color de tu borde.

borderColor: "#000", // HEX Code in " angeben
borderColor: "", // Kein Fallback-Wert

borderRadius indica el redondeo de las esquinas de tu borde.

borderRadius: "7px", // Pixel-Wert in " angeben
borderRadius: "", // Kein Fallback

iconSize indica el tamaño de tu icono.

iconSize: "20px", // Pixel-Wert in " angeben
iconSize: "", // Fallback: "15px"

color indica el color de tu icono.

color: "#FF2222", // Hex-Wert in " angeben
color: "", // Kein Fallback-Wert

backgroundColor indica el color de fondo del contenedor.

backgroundColor: "#fcdfde", //
backgroundColor: "", // Kein Fallbackwert

Añadir iconos desde tu Cockpit

Puedes ver tu colección actual y los conjuntos de iconos disponibles. Encuentras filtros para estilos de icono o grupos de icono en el lado derecho.

Para seleccionar o deseleccionar un icono, simplemente haz clic en él.

Luego copia el código del widget y pégalo en tu código global. Ya puedes usarlo en el código de aplicación.