| 1 |
/** |
| 2 |
* Custom block icons (name → JSX). Stroke on ROOT; inline style beats editor `svg { fill }`. |
| 3 |
*/ |
| 4 |
|
| 5 |
// Inline fill/stroke: Gutenberg's `svg { fill: currentColor }` beats attributes. |
| 6 |
const ROOT = { |
| 7 |
width: 24, |
| 8 |
height: 24, |
| 9 |
viewBox: '0 0 24 24', |
| 10 |
xmlns: 'http://www.w3.org/2000/svg', |
| 11 |
strokeWidth: 1.5, |
| 12 |
strokeLinecap: 'round', |
| 13 |
strokeLinejoin: 'round', |
| 14 |
style: { fill: 'none', stroke: 'currentColor' }, |
| 15 |
}; |
| 16 |
|
| 17 |
// Filled accents (radio dot, slider knobs, calendar day, progress fill, step |
| 18 |
// marker). Inline style so the fill survives the same block-icon CSS. |
| 19 |
const DOT = { style: { fill: 'currentColor', stroke: 'none' } }; |
| 20 |
|
| 21 |
export const FIELD_ICONS = { |
| 22 |
/* ---------------------------------------------------------------- Default */ |
| 23 |
|
| 24 |
// Name (Heading) — person accent + title line over a section rule. |
| 25 |
'profile-builder/field-default-name-heading': ( |
| 26 |
<svg { ...ROOT }> |
| 27 |
<circle cx="6.3" cy="7.3" r="2.3" /> |
| 28 |
<path d="M3 12.8c0-1.9 1.5-3 3.3-3s3.3 1.1 3.3 3" /> |
| 29 |
<line x1="11.5" y1="8" x2="21" y2="8" /> |
| 30 |
<line x1="3" y1="18.5" x2="21" y2="18.5" /> |
| 31 |
</svg> |
| 32 |
), |
| 33 |
|
| 34 |
// Contact Info (Heading) — envelope accent + title line over a rule. |
| 35 |
'profile-builder/field-default-contact-info-heading': ( |
| 36 |
<svg { ...ROOT }> |
| 37 |
<rect x="3" y="6" width="7.6" height="5.6" rx="1.2" /> |
| 38 |
<path d="M3.4 6.7 6.8 9.1 10.2 6.7" /> |
| 39 |
<line x1="12.4" y1="8.8" x2="21" y2="8.8" /> |
| 40 |
<line x1="3" y1="18.5" x2="21" y2="18.5" /> |
| 41 |
</svg> |
| 42 |
), |
| 43 |
|
| 44 |
// About Yourself (Heading) — text-lines accent + title line over a rule. |
| 45 |
'profile-builder/field-default-about-yourself-heading': ( |
| 46 |
<svg { ...ROOT }> |
| 47 |
<line x1="3" y1="6.6" x2="9.5" y2="6.6" /> |
| 48 |
<line x1="3" y1="9.8" x2="9.5" y2="9.8" /> |
| 49 |
<line x1="12.4" y1="8.2" x2="21" y2="8.2" /> |
| 50 |
<line x1="3" y1="18.5" x2="21" y2="18.5" /> |
| 51 |
</svg> |
| 52 |
), |
| 53 |
|
| 54 |
// Username — person inside an account ring. |
| 55 |
'profile-builder/field-default-username': ( |
| 56 |
<svg { ...ROOT }> |
| 57 |
<circle cx="12" cy="12" r="9" /> |
| 58 |
<circle cx="12" cy="9.6" r="2.8" /> |
| 59 |
<path d="M6.6 18.4c.8-2.3 2.9-3.6 5.4-3.6s4.6 1.3 5.4 3.6" /> |
| 60 |
</svg> |
| 61 |
), |
| 62 |
|
| 63 |
// First Name — person over a single name line. |
| 64 |
'profile-builder/field-default-first-name': ( |
| 65 |
<svg { ...ROOT }> |
| 66 |
<circle cx="12" cy="7.3" r="3" /> |
| 67 |
<path d="M6 14.7c0-2.6 2.7-4.2 6-4.2s6 1.6 6 4.2" /> |
| 68 |
<line x1="7" y1="19.6" x2="17" y2="19.6" /> |
| 69 |
</svg> |
| 70 |
), |
| 71 |
|
| 72 |
// Last Name — person over two name lines. |
| 73 |
'profile-builder/field-default-last-name': ( |
| 74 |
<svg { ...ROOT }> |
| 75 |
<circle cx="12" cy="6.8" r="2.9" /> |
| 76 |
<path d="M6.4 13.6c0-2.5 2.5-4 5.6-4s5.6 1.5 5.6 4" /> |
| 77 |
<line x1="7" y1="18.2" x2="17" y2="18.2" /> |
| 78 |
<line x1="9" y1="21" x2="15" y2="21" /> |
| 79 |
</svg> |
| 80 |
), |
| 81 |
|
| 82 |
// Nickname — quotation marks. |
| 83 |
'profile-builder/field-default-nickname': ( |
| 84 |
<svg { ...ROOT }> |
| 85 |
<path d="M9 7.5C6.8 7.5 5 9.3 5 11.5 5 13.4 6.3 14.5 8 14.5c1 0 1.9-.7 1.9-1.8 0-1-.8-1.7-1.8-1.7-.3 0-.5 0-.7.1.2-1.4 1.3-2.5 2.6-2.6z" /> |
| 86 |
<path d="M18 7.5c-2.2 0-4 1.8-4 4 0 1.9 1.3 3 3 3 1 0 1.9-.7 1.9-1.8 0-1-.8-1.7-1.8-1.7-.3 0-.5 0-.7.1.2-1.4 1.3-2.5 2.6-2.6z" /> |
| 87 |
</svg> |
| 88 |
), |
| 89 |
|
| 90 |
// E-mail (Default) — envelope. |
| 91 |
'profile-builder/field-default-email': ( |
| 92 |
<svg { ...ROOT }> |
| 93 |
<rect x="3" y="5.5" width="18" height="13" rx="2.5" /> |
| 94 |
<path d="M4 7.5 12 13 20 7.5" /> |
| 95 |
</svg> |
| 96 |
), |
| 97 |
|
| 98 |
// Website — globe. |
| 99 |
'profile-builder/field-default-website': ( |
| 100 |
<svg { ...ROOT }> |
| 101 |
<circle cx="12" cy="12" r="8.5" /> |
| 102 |
<line x1="3.5" y1="12" x2="20.5" y2="12" /> |
| 103 |
<path d="M12 3.5c2.6 2.4 2.6 14.6 0 17" /> |
| 104 |
<path d="M12 3.5c-2.6 2.4-2.6 14.6 0 17" /> |
| 105 |
</svg> |
| 106 |
), |
| 107 |
|
| 108 |
// Password — padlock. |
| 109 |
'profile-builder/field-default-password': ( |
| 110 |
<svg { ...ROOT }> |
| 111 |
<rect x="5" y="10" width="14" height="10.5" rx="2.3" /> |
| 112 |
<path d="M8 10V7.5a4 4 0 0 1 8 0V10" /> |
| 113 |
<circle cx="12" cy="14.5" r="1.2" { ...DOT } /> |
| 114 |
<line x1="12" y1="15.4" x2="12" y2="17.6" /> |
| 115 |
</svg> |
| 116 |
), |
| 117 |
|
| 118 |
// Repeat Password — padlock with a confirmation check (a refresh roundel |
| 119 |
// would be unintelligible at the 24px in-editor size). Body + shackle |
| 120 |
// match the Password icon so they read as siblings. |
| 121 |
'profile-builder/field-default-repeat-password': ( |
| 122 |
<svg { ...ROOT }> |
| 123 |
<rect x="5" y="10" width="14" height="10.5" rx="2.3" /> |
| 124 |
<path d="M8 10V7.5a4 4 0 0 1 8 0V10" /> |
| 125 |
<path d="M9 15.2 11.2 17.4 15.2 13" /> |
| 126 |
</svg> |
| 127 |
), |
| 128 |
|
| 129 |
// Biographical Info — open book. |
| 130 |
'profile-builder/field-default-biographical-info': ( |
| 131 |
<svg { ...ROOT }> |
| 132 |
<path d="M12 6c-1.8-1.3-4-2-6.5-2H3.5v13H6c2.4 0 4.5.7 6 2" /> |
| 133 |
<path d="M12 6c1.8-1.3 4-2 6.5-2h1.5v13H18c-2.4 0-4.5.7-6 2" /> |
| 134 |
<line x1="12" y1="6" x2="12" y2="19" /> |
| 135 |
</svg> |
| 136 |
), |
| 137 |
|
| 138 |
// Display Name — ID badge with avatar + name lines. |
| 139 |
'profile-builder/field-default-display-name': ( |
| 140 |
<svg { ...ROOT }> |
| 141 |
<rect x="3" y="5" width="18" height="14" rx="2.3" /> |
| 142 |
<circle cx="8" cy="10" r="2" /> |
| 143 |
<path d="M5 16c0-1.7 1.3-3 3-3s3 1.3 3 3" /> |
| 144 |
<line x1="13.5" y1="9.5" x2="18" y2="9.5" /> |
| 145 |
<line x1="13.5" y1="13" x2="18" y2="13" /> |
| 146 |
</svg> |
| 147 |
), |
| 148 |
|
| 149 |
// AIM — chat bubble with dots. |
| 150 |
'profile-builder/field-default-aim': ( |
| 151 |
<svg { ...ROOT }> |
| 152 |
<path d="M4 4.5h16a1.5 1.5 0 0 1 1.5 1.5v7.5A1.5 1.5 0 0 1 20 15H10l-4.5 4v-4H4a1.5 1.5 0 0 1-1.5-1.5V6A1.5 1.5 0 0 1 4 4.5z" /> |
| 153 |
<circle cx="8.5" cy="9.7" r="1" { ...DOT } /> |
| 154 |
<circle cx="12" cy="9.7" r="1" { ...DOT } /> |
| 155 |
<circle cx="15.5" cy="9.7" r="1" { ...DOT } /> |
| 156 |
</svg> |
| 157 |
), |
| 158 |
|
| 159 |
// Yahoo IM — chat bubble with a smiley. |
| 160 |
'profile-builder/field-default-yim': ( |
| 161 |
<svg { ...ROOT }> |
| 162 |
<path d="M4 4.5h16a1.5 1.5 0 0 1 1.5 1.5v7.5A1.5 1.5 0 0 1 20 15H10l-4.5 4v-4H4a1.5 1.5 0 0 1-1.5-1.5V6A1.5 1.5 0 0 1 4 4.5z" /> |
| 163 |
<circle cx="9.6" cy="8.3" r="0.85" { ...DOT } /> |
| 164 |
<circle cx="14.4" cy="8.3" r="0.85" { ...DOT } /> |
| 165 |
<path d="M9.3 10.6a3.2 3.2 0 0 0 5.4 0" /> |
| 166 |
</svg> |
| 167 |
), |
| 168 |
|
| 169 |
// Jabber / Google Talk — chat bubble with an "@". |
| 170 |
'profile-builder/field-default-jabber': ( |
| 171 |
<svg { ...ROOT }> |
| 172 |
<path d="M4 4.5h16a1.5 1.5 0 0 1 1.5 1.5v7.5A1.5 1.5 0 0 1 20 15H10l-4.5 4v-4H4a1.5 1.5 0 0 1-1.5-1.5V6A1.5 1.5 0 0 1 4 4.5z" /> |
| 173 |
<circle cx="11.8" cy="9.5" r="1.7" /> |
| 174 |
<path d="M13.5 9.5c0 1 .1 2 1.2 2 1 0 1.4-1 1.2-2.3-.3-1.8-2-2.7-3.6-2.4" /> |
| 175 |
</svg> |
| 176 |
), |
| 177 |
|
| 178 |
/* --------------------------------------------------------------- Standard */ |
| 179 |
|
| 180 |
// Text — stacked text lines. |
| 181 |
'profile-builder/field-input': ( |
| 182 |
<svg { ...ROOT }> |
| 183 |
<line x1="4" y1="8" x2="20" y2="8" /> |
| 184 |
<line x1="4" y1="12" x2="20" y2="12" /> |
| 185 |
<line x1="4" y1="16" x2="13" y2="16" /> |
| 186 |
</svg> |
| 187 |
), |
| 188 |
|
| 189 |
// Textarea — bordered multi-line box. |
| 190 |
'profile-builder/field-textarea': ( |
| 191 |
<svg { ...ROOT }> |
| 192 |
<rect x="3" y="5" width="18" height="14" rx="2" /> |
| 193 |
<line x1="6" y1="9" x2="18" y2="9" /> |
| 194 |
<line x1="6" y1="12" x2="18" y2="12" /> |
| 195 |
<line x1="6" y1="15" x2="13" y2="15" /> |
| 196 |
</svg> |
| 197 |
), |
| 198 |
|
| 199 |
// Select — dropdown box with chevron. |
| 200 |
'profile-builder/field-select': ( |
| 201 |
<svg { ...ROOT }> |
| 202 |
<rect x="3" y="6" width="18" height="12" rx="2.5" /> |
| 203 |
<line x1="6.5" y1="12" x2="11.5" y2="12" /> |
| 204 |
<path d="M15 10.8 16.8 12.6 18.6 10.8" /> |
| 205 |
</svg> |
| 206 |
), |
| 207 |
|
| 208 |
// Select (Multiple) — checklist. |
| 209 |
'profile-builder/field-select-multiple': ( |
| 210 |
<svg { ...ROOT }> |
| 211 |
<path d="M3.3 7 4.5 8.2 6.8 5.8" /> |
| 212 |
<path d="M3.3 12 4.5 13.2 6.8 10.8" /> |
| 213 |
<path d="M3.3 17 4.5 18.2 6.8 15.8" /> |
| 214 |
<line x1="9.5" y1="7" x2="20" y2="7" /> |
| 215 |
<line x1="9.5" y1="12" x2="20" y2="12" /> |
| 216 |
<line x1="9.5" y1="17" x2="20" y2="17" /> |
| 217 |
</svg> |
| 218 |
), |
| 219 |
|
| 220 |
// Checkbox — box with tick. |
| 221 |
'profile-builder/field-checkbox': ( |
| 222 |
<svg { ...ROOT }> |
| 223 |
<rect x="4" y="4" width="16" height="16" rx="3.5" /> |
| 224 |
<path d="M8 12 10.6 14.6 16.2 9" /> |
| 225 |
</svg> |
| 226 |
), |
| 227 |
|
| 228 |
// Radio — two options, top one selected. |
| 229 |
'profile-builder/field-radio': ( |
| 230 |
<svg { ...ROOT }> |
| 231 |
<circle cx="6.5" cy="8" r="2.7" /> |
| 232 |
<circle cx="6.5" cy="8" r="1.1" { ...DOT } /> |
| 233 |
<line x1="11" y1="8" x2="20" y2="8" /> |
| 234 |
<circle cx="6.5" cy="16" r="2.7" /> |
| 235 |
<line x1="11" y1="16" x2="20" y2="16" /> |
| 236 |
</svg> |
| 237 |
), |
| 238 |
|
| 239 |
// Heading — letter H. |
| 240 |
'profile-builder/field-heading': ( |
| 241 |
<svg { ...ROOT }> |
| 242 |
<line x1="6" y1="5" x2="6" y2="19" /> |
| 243 |
<line x1="18" y1="5" x2="18" y2="19" /> |
| 244 |
<line x1="6" y1="12" x2="18" y2="12" /> |
| 245 |
</svg> |
| 246 |
), |
| 247 |
|
| 248 |
// Avatar — framed person photo. |
| 249 |
'profile-builder/field-avatar': ( |
| 250 |
<svg { ...ROOT }> |
| 251 |
<rect x="3.5" y="3.5" width="17" height="17" rx="3.5" /> |
| 252 |
<circle cx="12" cy="10" r="2.8" /> |
| 253 |
<path d="M6.6 18c.8-2.4 3-3.8 5.4-3.8s4.6 1.4 5.4 3.8" /> |
| 254 |
</svg> |
| 255 |
), |
| 256 |
|
| 257 |
// Number — hash. |
| 258 |
'profile-builder/field-number': ( |
| 259 |
<svg { ...ROOT }> |
| 260 |
<line x1="9.5" y1="4" x2="7.5" y2="20" /> |
| 261 |
<line x1="16.5" y1="4" x2="14.5" y2="20" /> |
| 262 |
<line x1="5" y1="9" x2="19" y2="9" /> |
| 263 |
<line x1="4" y1="15" x2="18" y2="15" /> |
| 264 |
</svg> |
| 265 |
), |
| 266 |
|
| 267 |
// Input (Hidden) — eye with a slash. |
| 268 |
'profile-builder/field-input-hidden': ( |
| 269 |
<svg { ...ROOT }> |
| 270 |
<path d="M4 12s3.4-5.5 8-5.5 8 5.5 8 5.5-3.4 5.5-8 5.5c-1 0-2-.2-2.9-.5" /> |
| 271 |
<circle cx="12" cy="12" r="2.4" /> |
| 272 |
<line x1="4.5" y1="4.5" x2="19.5" y2="19.5" /> |
| 273 |
</svg> |
| 274 |
), |
| 275 |
|
| 276 |
// Language — "A / 文" translate. |
| 277 |
'profile-builder/field-language': ( |
| 278 |
<svg { ...ROOT }> |
| 279 |
<path d="M3 13 6 5l3 8" /> |
| 280 |
<line x1="4" y1="10.5" x2="8" y2="10.5" /> |
| 281 |
<line x1="13" y1="6" x2="20.5" y2="6" /> |
| 282 |
<path d="M16.7 6v1.8c0 3-1.6 5.2-3.7 6.4" /> |
| 283 |
<path d="M14.8 9.6c.6 2.1 2.2 3.7 5.4 4.8" /> |
| 284 |
</svg> |
| 285 |
), |
| 286 |
|
| 287 |
// WYSIWYG — editor with a toolbar. |
| 288 |
'profile-builder/field-wysiwyg': ( |
| 289 |
<svg { ...ROOT }> |
| 290 |
<rect x="3" y="4" width="18" height="16" rx="2" /> |
| 291 |
<line x1="3" y1="9" x2="21" y2="9" /> |
| 292 |
<line x1="6" y1="6.5" x2="8.5" y2="6.5" /> |
| 293 |
<line x1="11" y1="6.5" x2="13.5" y2="6.5" /> |
| 294 |
<line x1="6" y1="13" x2="18" y2="13" /> |
| 295 |
<line x1="6" y1="16.5" x2="14" y2="16.5" /> |
| 296 |
</svg> |
| 297 |
), |
| 298 |
|
| 299 |
// HTML — code brackets. |
| 300 |
'profile-builder/field-html': ( |
| 301 |
<svg { ...ROOT }> |
| 302 |
<path d="M8.5 8 4.5 12 8.5 16" /> |
| 303 |
<path d="M15.5 8 19.5 12 15.5 16" /> |
| 304 |
<line x1="13.4" y1="6" x2="10.6" y2="18" /> |
| 305 |
</svg> |
| 306 |
), |
| 307 |
|
| 308 |
// Upload — arrow into a tray. |
| 309 |
'profile-builder/field-upload': ( |
| 310 |
<svg { ...ROOT }> |
| 311 |
<path d="M12 15V4" /> |
| 312 |
<path d="M7.5 8.5 12 4 16.5 8.5" /> |
| 313 |
<path d="M5 15v3a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 18v-3" /> |
| 314 |
</svg> |
| 315 |
), |
| 316 |
|
| 317 |
// International Telephone Input — handset + globe. |
| 318 |
'profile-builder/field-international-telephone-input': ( |
| 319 |
<svg { ...ROOT }> |
| 320 |
<path d="M3.6 4.4h2.3l1.2 3-1.5 1.1a8.5 8.5 0 0 0 3.9 3.9l1.1-1.5 3 1.2v2.3a1.6 1.6 0 0 1-1.6 1.6A11.5 11.5 0 0 1 2 6 1.6 1.6 0 0 1 3.6 4.4z" /> |
| 321 |
<circle cx="17.5" cy="6.5" r="3.6" /> |
| 322 |
<line x1="13.9" y1="6.5" x2="21.1" y2="6.5" /> |
| 323 |
<path d="M17.5 2.9c1.4 1.1 1.4 6.1 0 7.2" /> |
| 324 |
</svg> |
| 325 |
), |
| 326 |
|
| 327 |
/* --------------------------------------------------------------- Advanced */ |
| 328 |
|
| 329 |
// Select2 — searchable dropdown. |
| 330 |
'profile-builder/field-select2': ( |
| 331 |
<svg { ...ROOT }> |
| 332 |
<rect x="3" y="6" width="18" height="12" rx="2.5" /> |
| 333 |
<circle cx="8.8" cy="11.4" r="2.3" /> |
| 334 |
<line x1="10.6" y1="13.2" x2="12.4" y2="15" /> |
| 335 |
<path d="M15.4 10.8 17.1 12.5 18.8 10.8" /> |
| 336 |
</svg> |
| 337 |
), |
| 338 |
|
| 339 |
// Phone — handset. |
| 340 |
'profile-builder/field-phone': ( |
| 341 |
<svg { ...ROOT }> |
| 342 |
<path d="M6.5 3.5h2.8l1.4 4-2 1.5a11 11 0 0 0 4.8 4.8l1.5-2 4 1.4V20a2 2 0 0 1-2 2A15.5 15.5 0 0 1 4 6.5a2 2 0 0 1 2-2z" /> |
| 343 |
</svg> |
| 344 |
), |
| 345 |
|
| 346 |
// Select (Country) — flag on a pole. |
| 347 |
'profile-builder/field-select-country': ( |
| 348 |
<svg { ...ROOT }> |
| 349 |
<line x1="6" y1="3" x2="6" y2="21" /> |
| 350 |
<path d="M6 4h12l-2.6 3.3L18 10.6H6z" /> |
| 351 |
</svg> |
| 352 |
), |
| 353 |
|
| 354 |
// Select (Timezone) — world clock. |
| 355 |
'profile-builder/field-select-timezone': ( |
| 356 |
<svg { ...ROOT }> |
| 357 |
<circle cx="12" cy="12" r="8.3" /> |
| 358 |
<line x1="3.7" y1="12" x2="20.3" y2="12" /> |
| 359 |
<path d="M12 7v5l3.4 2" /> |
| 360 |
</svg> |
| 361 |
), |
| 362 |
|
| 363 |
// Select (Currency) — coin with a currency mark. |
| 364 |
'profile-builder/field-select-currency': ( |
| 365 |
<svg { ...ROOT }> |
| 366 |
<circle cx="12" cy="12" r="8.3" /> |
| 367 |
<path d="M14.6 9.4c-.7-.8-1.7-1.2-2.7-1.2-1.5 0-2.6.8-2.6 2 0 1.3 1.1 1.8 2.6 2.1 1.5.3 2.7.8 2.7 2.1 0 1.2-1.1 2-2.7 2-1.1 0-2.1-.4-2.8-1.2" /> |
| 368 |
<line x1="12" y1="6" x2="12" y2="18" /> |
| 369 |
</svg> |
| 370 |
), |
| 371 |
|
| 372 |
// Select (CPT) — document. |
| 373 |
'profile-builder/field-select-cpt': ( |
| 374 |
<svg { ...ROOT }> |
| 375 |
<path d="M7 3h7l4 4v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" /> |
| 376 |
<path d="M13.5 3v4h4" /> |
| 377 |
<line x1="9" y1="13" x2="15" y2="13" /> |
| 378 |
<line x1="9" y1="16.5" x2="13" y2="16.5" /> |
| 379 |
</svg> |
| 380 |
), |
| 381 |
|
| 382 |
// Select (Taxonomy) — hierarchy tree. |
| 383 |
'profile-builder/field-select-taxonomy': ( |
| 384 |
<svg { ...ROOT }> |
| 385 |
<circle cx="5.5" cy="12" r="2" /> |
| 386 |
<circle cx="18.5" cy="6.5" r="2" /> |
| 387 |
<circle cx="18.5" cy="17.5" r="2" /> |
| 388 |
<path d="M7.5 12h4.5a1.5 1.5 0 0 0 1.5-1.5V8a1.5 1.5 0 0 1 1.5-1.5h1.5" /> |
| 389 |
<path d="M7.5 12h4.5a1.5 1.5 0 0 1 1.5 1.5V16a1.5 1.5 0 0 0 1.5 1.5h1.5" /> |
| 390 |
</svg> |
| 391 |
), |
| 392 |
|
| 393 |
// Terms and Conditions — document with a check. |
| 394 |
'profile-builder/field-checkbox-toa': ( |
| 395 |
<svg { ...ROOT }> |
| 396 |
<rect x="5" y="3" width="14" height="18" rx="2" /> |
| 397 |
<line x1="8" y1="7.5" x2="16" y2="7.5" /> |
| 398 |
<line x1="8" y1="10.5" x2="16" y2="10.5" /> |
| 399 |
<line x1="8" y1="13.5" x2="12.5" y2="13.5" /> |
| 400 |
<path d="M8 17.3 9.4 18.7 13 15.2" /> |
| 401 |
</svg> |
| 402 |
), |
| 403 |
|
| 404 |
// Datepicker — calendar with a marked day. |
| 405 |
'profile-builder/field-datepicker': ( |
| 406 |
<svg { ...ROOT }> |
| 407 |
<rect x="4" y="5.5" width="16" height="14.5" rx="2.5" /> |
| 408 |
<line x1="4" y1="9.5" x2="20" y2="9.5" /> |
| 409 |
<line x1="8.5" y1="3.5" x2="8.5" y2="7" /> |
| 410 |
<line x1="15.5" y1="3.5" x2="15.5" y2="7" /> |
| 411 |
<circle cx="9" cy="14" r="1.2" { ...DOT } /> |
| 412 |
</svg> |
| 413 |
), |
| 414 |
|
| 415 |
// Timepicker — clock. |
| 416 |
'profile-builder/field-timepicker': ( |
| 417 |
<svg { ...ROOT }> |
| 418 |
<circle cx="12" cy="12" r="8.3" /> |
| 419 |
<path d="M12 7v5l3.5 2" /> |
| 420 |
</svg> |
| 421 |
), |
| 422 |
|
| 423 |
// Colorpicker — paint droplet. |
| 424 |
'profile-builder/field-colorpicker': ( |
| 425 |
<svg { ...ROOT }> |
| 426 |
<path d="M12 3.5c3.2 3.8 5.2 6.4 5.2 9.2a5.2 5.2 0 0 1-10.4 0c0-2.8 2-5.4 5.2-9.2z" /> |
| 427 |
</svg> |
| 428 |
), |
| 429 |
|
| 430 |
// Validation — clipboard with a check. |
| 431 |
'profile-builder/field-validation': ( |
| 432 |
<svg { ...ROOT }> |
| 433 |
<rect x="5" y="4.5" width="14" height="16.5" rx="2" /> |
| 434 |
<rect x="9" y="2.5" width="6" height="3.6" rx="1" /> |
| 435 |
<path d="M8.5 13 10.5 15 14.5 10.5" /> |
| 436 |
</svg> |
| 437 |
), |
| 438 |
|
| 439 |
// Map — location pin. |
| 440 |
'profile-builder/field-map': ( |
| 441 |
<svg { ...ROOT }> |
| 442 |
<path d="M12 21c4.5-4.3 7-7.6 7-11a7 7 0 1 0-14 0c0 3.4 2.5 6.7 7 11z" /> |
| 443 |
<circle cx="12" cy="10" r="2.5" /> |
| 444 |
</svg> |
| 445 |
), |
| 446 |
|
| 447 |
// Additional Map — pin with a plus. |
| 448 |
'profile-builder/field-additional-map': ( |
| 449 |
<svg { ...ROOT }> |
| 450 |
<path d="M9.5 18.6c3.4-3.3 5.3-5.8 5.3-8.4a5.3 5.3 0 1 0-10.6 0c0 2.6 1.9 5.1 5.3 8.4z" /> |
| 451 |
<circle cx="9.5" cy="10.2" r="1.9" /> |
| 452 |
<line x1="18.5" y1="4" x2="18.5" y2="9" /> |
| 453 |
<line x1="16" y1="6.5" x2="21" y2="6.5" /> |
| 454 |
</svg> |
| 455 |
), |
| 456 |
|
| 457 |
// reCAPTCHA — circular arrow roundel with a check. |
| 458 |
'profile-builder/field-recaptcha': ( |
| 459 |
<svg { ...ROOT }> |
| 460 |
<path d="M19.2 12a7.2 7.2 0 1 1-2.1-5.1" /> |
| 461 |
<path d="M19.5 5v3.2h-3.2" /> |
| 462 |
<path d="M9 12.2 11 14.2 15 10" /> |
| 463 |
</svg> |
| 464 |
), |
| 465 |
|
| 466 |
// Turnstile — cloud with a check. |
| 467 |
'profile-builder/field-turnstile': ( |
| 468 |
<svg { ...ROOT }> |
| 469 |
<path d="M7 17h9.6a3.5 3.5 0 0 0 .4-7 5 5 0 0 0-9.7-1.4A4 4 0 0 0 7 17z" /> |
| 470 |
<path d="M10 12.3 11.6 13.9 15 10.5" /> |
| 471 |
</svg> |
| 472 |
), |
| 473 |
|
| 474 |
// Select (User Role) — person with a role shield. |
| 475 |
'profile-builder/field-select-user-role': ( |
| 476 |
<svg { ...ROOT }> |
| 477 |
<circle cx="9" cy="8" r="3" /> |
| 478 |
<path d="M3.5 18c0-3 2.5-5 5.5-5 .8 0 1.6.1 2.3.4" /> |
| 479 |
<path d="M17.5 11l3 1.2v2.2c0 1.9-1.3 3.4-3 3.9-1.7-.5-3-2-3-3.9v-2.2z" /> |
| 480 |
</svg> |
| 481 |
), |
| 482 |
|
| 483 |
// Blog Details — browser window with article lines. |
| 484 |
'profile-builder/field-default-blog-details': ( |
| 485 |
<svg { ...ROOT }> |
| 486 |
<rect x="3" y="4" width="18" height="16" rx="2" /> |
| 487 |
<line x1="3" y1="8" x2="21" y2="8" /> |
| 488 |
<circle cx="5.6" cy="6" r="0.6" { ...DOT } /> |
| 489 |
<line x1="6" y1="12" x2="18" y2="12" /> |
| 490 |
<line x1="6" y1="15.5" x2="14" y2="15.5" /> |
| 491 |
</svg> |
| 492 |
), |
| 493 |
|
| 494 |
// MailChimp Subscribe — envelope with a star. |
| 495 |
'profile-builder/field-mailchimp-subscribe': ( |
| 496 |
<svg { ...ROOT }> |
| 497 |
<rect x="3" y="6" width="14" height="11" rx="1.8" /> |
| 498 |
<path d="M3.4 7 10 11.5 16.6 7" /> |
| 499 |
<path d="M19 3 19.9 4.8 21.9 5.1 20.4 6.5 20.8 8.5 19 7.5 17.2 8.5 17.6 6.5 16.1 5.1 18.1 4.8z" /> |
| 500 |
</svg> |
| 501 |
), |
| 502 |
|
| 503 |
// MailPoet Subscribe — envelope with a leaf. |
| 504 |
'profile-builder/field-mailpoet-subscribe': ( |
| 505 |
<svg { ...ROOT }> |
| 506 |
<rect x="3" y="6" width="14" height="11" rx="1.8" /> |
| 507 |
<path d="M3.4 7 10 11.5 16.6 7" /> |
| 508 |
<path d="M21.5 3.5c-3 0-5 1.8-5 4 0 .7.2 1.2.6 1.7 2-1 3.8-3 4.4-5.7z" /> |
| 509 |
<path d="M17.2 9c.8-1.3 2.1-2.6 4.3-4.5" /> |
| 510 |
</svg> |
| 511 |
), |
| 512 |
|
| 513 |
// Campaign Monitor Subscribe — envelope with a bar chart. |
| 514 |
'profile-builder/field-campaign-monitor-subscribe': ( |
| 515 |
<svg { ...ROOT }> |
| 516 |
<rect x="3" y="6" width="14" height="11" rx="1.8" /> |
| 517 |
<path d="M3.4 7 10 11.5 16.6 7" /> |
| 518 |
<line x1="16.8" y1="8" x2="16.8" y2="4" /> |
| 519 |
<line x1="19.4" y1="8" x2="19.4" y2="3" /> |
| 520 |
<line x1="22" y1="8" x2="22" y2="5.5" /> |
| 521 |
</svg> |
| 522 |
), |
| 523 |
|
| 524 |
// WooCommerce Billing Address — credit card. |
| 525 |
'profile-builder/field-woo-billing-address': ( |
| 526 |
<svg { ...ROOT }> |
| 527 |
<rect x="3" y="6" width="18" height="12" rx="2" /> |
| 528 |
<line x1="3" y1="10" x2="21" y2="10" /> |
| 529 |
<line x1="6" y1="14" x2="11" y2="14" /> |
| 530 |
</svg> |
| 531 |
), |
| 532 |
|
| 533 |
// WooCommerce Shipping Address — package box. |
| 534 |
'profile-builder/field-woo-shipping-address': ( |
| 535 |
<svg { ...ROOT }> |
| 536 |
<path d="M12 3 20 7v9l-8 4-8-4V7z" /> |
| 537 |
<path d="M4 7 12 11 20 7" /> |
| 538 |
<line x1="12" y1="11" x2="12" y2="20" /> |
| 539 |
</svg> |
| 540 |
), |
| 541 |
|
| 542 |
/* ------------------------------------------------------------------ Other */ |
| 543 |
|
| 544 |
// Email (custom) — at sign. |
| 545 |
'profile-builder/field-email': ( |
| 546 |
<svg { ...ROOT }> |
| 547 |
<circle cx="12" cy="12" r="3.2" /> |
| 548 |
<path d="M15.2 12c0 1.1.1 3 2 3 1.7 0 2.6-1.6 2.6-3.8 0-4.2-3.1-6.7-6.9-6.7a8 8 0 1 0 4.4 14.7" /> |
| 549 |
</svg> |
| 550 |
), |
| 551 |
|
| 552 |
// Email Confirmation — envelope with a check badge. |
| 553 |
'profile-builder/field-email-confirmation': ( |
| 554 |
<svg { ...ROOT }> |
| 555 |
<rect x="2.5" y="5.5" width="14" height="11" rx="2" /> |
| 556 |
<path d="M3 6.5 9.5 11 16 6.5" /> |
| 557 |
<circle cx="18" cy="16" r="4" /> |
| 558 |
<path d="M16.3 16 17.5 17.2 19.8 14.8" /> |
| 559 |
</svg> |
| 560 |
), |
| 561 |
|
| 562 |
// GDPR Checkbox — shield with a check. |
| 563 |
'profile-builder/field-gdpr-checkbox': ( |
| 564 |
<svg { ...ROOT }> |
| 565 |
<path d="M12 3 19 5.5v5c0 4.5-3 8-7 9.5-4-1.5-7-5-7-9.5v-5z" /> |
| 566 |
<path d="M8.8 12 11 14.2 15.2 9.8" /> |
| 567 |
</svg> |
| 568 |
), |
| 569 |
|
| 570 |
// GDPR Communication Preferences — sliders. |
| 571 |
'profile-builder/field-gdpr-communication-preferences': ( |
| 572 |
<svg { ...ROOT }> |
| 573 |
<line x1="4" y1="7" x2="20" y2="7" /> |
| 574 |
<circle cx="9" cy="7" r="2.2" { ...DOT } /> |
| 575 |
<line x1="4" y1="12" x2="20" y2="12" /> |
| 576 |
<circle cx="15" cy="12" r="2.2" { ...DOT } /> |
| 577 |
<line x1="4" y1="17" x2="20" y2="17" /> |
| 578 |
<circle cx="11" cy="17" r="2.2" { ...DOT } /> |
| 579 |
</svg> |
| 580 |
), |
| 581 |
|
| 582 |
// Subscription Plans (PMS) — pricing tiers of increasing height (premium filled). |
| 583 |
'profile-builder/field-pms-subscription-plans': ( |
| 584 |
<svg { ...ROOT }> |
| 585 |
<rect x="3.5" y="13" width="4.4" height="6" rx="1" /> |
| 586 |
<rect x="9.8" y="9" width="4.4" height="10" rx="1" /> |
| 587 |
<rect x="16.1" y="5" width="4.4" height="14" rx="1" { ...DOT } /> |
| 588 |
</svg> |
| 589 |
), |
| 590 |
|
| 591 |
// Billing Fields (PMS) — a receipt with a torn zigzag bottom edge. |
| 592 |
'profile-builder/field-pms-billing-fields': ( |
| 593 |
<svg { ...ROOT }> |
| 594 |
<path d="M6 4h12v16l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3-2 1.3z" /> |
| 595 |
<line x1="9" y1="8.5" x2="15" y2="8.5" /> |
| 596 |
<line x1="9" y1="12" x2="15" y2="12" /> |
| 597 |
</svg> |
| 598 |
), |
| 599 |
|
| 600 |
// GDPR Delete Button — trash can. |
| 601 |
'profile-builder/field-gdpr-delete': ( |
| 602 |
<svg { ...ROOT }> |
| 603 |
<line x1="5" y1="7" x2="19" y2="7" /> |
| 604 |
<path d="M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /> |
| 605 |
<path d="M6.5 7l.8 12a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4L17.5 7" /> |
| 606 |
<line x1="10" y1="10.5" x2="10" y2="16.5" /> |
| 607 |
<line x1="14" y1="10.5" x2="14" y2="16.5" /> |
| 608 |
</svg> |
| 609 |
), |
| 610 |
|
| 611 |
// Honeypot — a bug (anti-spam trap). |
| 612 |
'profile-builder/field-honeypot': ( |
| 613 |
<svg { ...ROOT }> |
| 614 |
<ellipse cx="12" cy="13.5" rx="4.3" ry="5.5" /> |
| 615 |
<line x1="12" y1="8.5" x2="12" y2="19" /> |
| 616 |
<circle cx="12" cy="6.4" r="2" /> |
| 617 |
<line x1="10.6" y1="5" x2="9.2" y2="3.6" /> |
| 618 |
<line x1="13.4" y1="5" x2="14.8" y2="3.6" /> |
| 619 |
<line x1="7.8" y1="11" x2="4.6" y2="9.5" /> |
| 620 |
<line x1="7.5" y1="13.5" x2="4" y2="13.5" /> |
| 621 |
<line x1="7.8" y1="16" x2="4.6" y2="17.5" /> |
| 622 |
<line x1="16.2" y1="11" x2="19.4" y2="9.5" /> |
| 623 |
<line x1="16.5" y1="13.5" x2="20" y2="13.5" /> |
| 624 |
<line x1="16.2" y1="16" x2="19.4" y2="17.5" /> |
| 625 |
</svg> |
| 626 |
), |
| 627 |
|
| 628 |
// URL — chain link. Both hooks are 180deg rotations of each other about the |
| 629 |
// 24x24 centre and their semicircular caps sit ON the 45deg axis, so the |
| 630 |
// connector bar runs straight through the middle of both openings. |
| 631 |
'profile-builder/field-input-url': ( |
| 632 |
<svg { ...ROOT }> |
| 633 |
<path d="M9.4 14.6 14.6 9.4" /> |
| 634 |
<path d="M10.7 6.7 12.7 4.8a4.65 4.65 0 0 1 6.58 6.58l-1.97 1.97" /> |
| 635 |
<path d="M13.3 17.3 11.3 19.2a4.65 4.65 0 0 1-6.58-6.58l1.97-1.97" /> |
| 636 |
</svg> |
| 637 |
), |
| 638 |
|
| 639 |
// Select2 (Multiple) — a field holding two selected chips, wrapped onto two |
| 640 |
// rows. Each chip is a true pill (width well over its height) — at the old |
| 641 |
// 5.3x5 with rx 2.5 they were circles side by side and the icon read as |
| 642 |
// goggles. Chips align left like real wrapped chips, but their combined |
| 643 |
// bounds are centred in the frame on BOTH axes (x 5.5-18.5, y 6.6-17.4). |
| 644 |
'profile-builder/field-select2-multiple': ( |
| 645 |
<svg { ...ROOT }> |
| 646 |
<rect x="3" y="4" width="18" height="16" rx="2.2" /> |
| 647 |
<rect x="5.5" y="6.6" width="13" height="4.2" rx="2.1" /> |
| 648 |
<rect x="5.5" y="13.2" width="8" height="4.2" rx="2.1" /> |
| 649 |
</svg> |
| 650 |
), |
| 651 |
|
| 652 |
// Repeater — overlapping cards (repeating group). |
| 653 |
'profile-builder/field-repeater': ( |
| 654 |
<svg { ...ROOT }> |
| 655 |
<rect x="8" y="3.5" width="12.5" height="12.5" rx="2.2" /> |
| 656 |
<path d="M16 16v2.3a2.2 2.2 0 0 1-2.2 2.2H5.7a2.2 2.2 0 0 1-2.2-2.2V10.2A2.2 2.2 0 0 1 5.7 8H8" /> |
| 657 |
</svg> |
| 658 |
), |
| 659 |
|
| 660 |
/* ------------------------------------------------------------- Structural */ |
| 661 |
|
| 662 |
// Step Break — connected step nodes (current step filled). |
| 663 |
'profile-builder/msf-step-break': ( |
| 664 |
<svg { ...ROOT }> |
| 665 |
<circle cx="4.6" cy="12" r="2.1" /> |
| 666 |
<line x1="7" y1="12" x2="10" y2="12" /> |
| 667 |
<circle cx="12" cy="12" r="2.1" { ...DOT } /> |
| 668 |
<line x1="14" y1="12" x2="17" y2="12" /> |
| 669 |
<circle cx="19.4" cy="12" r="2.1" /> |
| 670 |
</svg> |
| 671 |
), |
| 672 |
|
| 673 |
// Columns — two columns side by side. |
| 674 |
'profile-builder/ffc-columns': ( |
| 675 |
<svg { ...ROOT }> |
| 676 |
<rect x="3.5" y="5" width="7" height="14" rx="1.5" /> |
| 677 |
<rect x="13.5" y="5" width="7" height="14" rx="1.5" /> |
| 678 |
</svg> |
| 679 |
), |
| 680 |
|
| 681 |
// Progress Bar — track with a partial fill. |
| 682 |
'profile-builder/progress-bar': ( |
| 683 |
<svg { ...ROOT }> |
| 684 |
<rect x="3" y="9.5" width="18" height="5" rx="2.5" /> |
| 685 |
<rect x="5" y="11.1" width="7" height="1.8" rx="0.9" { ...DOT } /> |
| 686 |
</svg> |
| 687 |
), |
| 688 |
}; |
| 689 |
|