Custom Icon

Jeder Kunde erhält zum Start seiner Lizenz ein Standard Icon-Set. Solltest du mehr Icons benötigen, kontaktiere uns über support@arc-rider.com oder in unserem Discord-Channel.

💡 Hinweis: Custom Icon unterstützt aktuell Phosphor-Icons und OpenMoji Icon Sets. An dieser Stelle vielen Dank für die Macher der Icons.

Um Icons zu deinem Projekt hinzuzufügen, gehst du über dein User Cockpit zum Bereich Icons und wählst diese einfach an (siehe weiter unten die Erklärung).

Anwendungscode

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"
}),

iconSet definiert das Iconset. Aktuell haben wir zwei im Angebot: Phosphor-Icons und OpenMoji.

iconSet: "phosphor", // Dies ist auch der Fallback, falls du nichts angibts
iconSet: "openmoji",

name definiert den Titel deines Icons. Die Titel findest du in deinem Cockpit.

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

containerSize definiert, ob und in welcher Größe du deinen Container/Background des Icons anzeigen lassen möchtest.

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

borderSize definiert, wie dick deine Umrandung sein soll.

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

borderColor gibt die Farbe deiner Border/Umrandung an.

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

borderRadius gibt die Abrundung deiner Border-Ecken an.

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

iconSize gibt die Größe deines Icons an.

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

color gibt die Farbe deines Icons an.

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

backgroundColor gibt die Hintergrund-Farbe des Containers an.

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

Icons über dein Cockpit hinzufügen

Du kannst die deine Aktuelle Sammlung und die verfügbaren Iconsets anzeigen lassen. Filter für Icon Styles oder Icon Gruppen findest du auf der rechten Seit.

Um ein Icon an- oder abzuwählen, klicke es einfach an.

Kopiere dann den Widget Code und füge ihn in deinen globalen Code. Schon kannst du sie im Anwedungscode nutzen.