Ikon

Ikon berasal daripada pakej @bookklik/senangstart-icons — 246 SVG sebaris didedahkan pada SXR.icons. Widget merujuknya melalui rentetan slug, contohnya icon="cog-6-tooth".

SXR.icons['check']  // '<svg …>…</svg>'

Slug yang tidak dikenali memaparkan glif gantian ? dan tidak menyebabkan kegagalan, jadi kesilapan ejaan tidak merosakkan widget.

Menggunakan ikon dalam widget

<a-sxr-icon-button icon="star"></a-sxr-icon-button>
<a-sxr-icon-label-button icon="sparkles" value="Generate"></a-sxr-icon-label-button>

icon-active menukar ikon dalam keadaan ditekan:

<a-sxr-icon-button icon="play" icon-active="pause"></a-sxr-icon-button>

Pembantu ikon

SXR.getIconSvg(icon, color?, thickness?)

Mengembalikan rentetan SVG dengan setiap currentColor diganti oleh color, dan pilihan stroke-width ditetapkan kepada thickness. Mengembalikan '' bagi slug yang tidak dikenali.

SXR.getIconSvg('star', '#2563EB')          // blue star SVG
SXR.getIconSvg('star', '#2563EB', '1.5')   // with a custom stroke width

SXR.getIconDataUrl(icon, color?, thickness?)

Sama, tetapi mengembalikan URL data:image/svg+xml yang boleh terus digunakan sebagai src imej atau sumber tekstur kanvas.

const url = SXR.getIconDataUrl('play', '#F1F5F9')
new Image().src = url

SXR.createIconEntity(options) / SXR.redrawIconEntity(entity, options)

Bina dan lukis semula entiti A-Frame yang memaparkan ikon pada satah kanvas — saluran sama yang digunakan oleh widget ikon. Lihat Ruang Nama SXR.

Set ikon penuh

Kesemua 246 slug, dikumpulkan untuk dilayari. Salin terus ke dalam atribut icon. Senarai rujukan utama ialah Object.keys(SXR.icons) ketika masa jalan — pakej ikon mungkin menambah slug dalam keluaran akan datang.

Anak panah (29)

arrow-left arrow-right arrow-up arrow-down arrow-long-leftarrow-long-right arrow-long-up arrow-long-down arrow-patharrow-rotate-cw arrow-rotate-ccw rotate-add rotate-minusarrow-top-right-on-square arrow-right-on-rectanglearrow-left-on-rectangle chevron-left chevron-right chevron-upchevron-down chevron-double-left chevron-double-rightchevron-double-up chevron-double-down arrow-left-arrow-rightarrow-up-arrow-down arrow-left-right arrow-up-downarrow-up-down-left-right

Media (17)

play pause stop play-circle pause-circle stop-circle speaker-wavespeaker-x-mark microphone microphone-mute video-camera camera photopanorama musical-note carousel reel

Komunikasi (16)

envelope envelope-open chat-bubble-left chat-bubble-rightchat-bubble-left-ellipsis chat-bubble-right-ellipsischat-bubble-left-right phone phone-x-mark user user-circleuser-plus user-minus user-group users chatbot

Status (14)

x-mark check alert exclamation-circle exclamation-triangleinformation-circle question-mark-circle bell bell-alert eyeeye-slash light-bulb clock time-reset

Fail (18)

save document document-text document-duplicate folder folder-openfolder-plus folder-minus clipboard clipboard-document-checkpaper-clip archive-box inbox book-open book-close book-stackedbookmark table

Perdagangan (11)

shopping-cart shopping-bag basket credit-card banknotescurrency-dollar currency-euro currency-pound currency-yencurrency-ringgit qr-code

Kalendar & pembentangan (9)

calendar calendar-plus calendar-minus calendar-approvecalendar-reject calendar-days briefcase presentation-chart-linepresentation-media

Carta (3)

chart-line chart-bar chart-pie

Peranti (16)

code console computer-laptop computer-code computer-desktopdevice-phone-mobile device-tablet battery-0 battery-10 battery-50battery-100 controller game window wifi vr

Keselamatan (5)

lock-closed lock-open key shield-check shield-exclamation

Bentuk 3D (20)

container layer-stacks cube sphere cylinder tube cone pyramidpolygon torus plane wedge cylinder-half sphere-halfheart-extruded torus-knot tetrahedron octahedron icosahedrondodecahedron

Alam & objek (20)

bolt moon sun cloud star heart hand-thumb-up hand-thumb-downhand hand-grab flag map map-pin globe-alt truck cake gifttrophy medal sparkles

Reka bentuk (13)

contrast gradient cursor marquee shapes square rectangledraw-line draw-curve pencil brush eraser crop

Susun atur (11)

horizontal-3-dots vertical-3-dots group-object ungroup-objectalign-left-object align-center-object align-right-objectalign-top-object align-middle-object align-bottom-object layout

Teks (8)

plus minus font text text-align-center text-align-lefttext-align-right text-align-justify

Lain-lain (36)

bars-3 double-tick magnifying-glass magnifying-glass-focusmagnifying-glass-plus magnifying-glass-minus home cog-6-tooth trashwhiteboard tabs thunder ar flip-horizontal flip-vertical gridtic-tac-toe robot maximize minimize compress expand focuscrosshair hourglass-0 hourglass-50 hourglass-80 hourglass-100roof magic-wand circle diamond hexagon scissorsliders-horizontal sliders-vertical