* Adds a custom icon class that can be used with the .icon element * @param {string} className - The class name for the icon (used as .icon.className) * @param {string} src - URL or data URI of the icon image * @param {object} [options] - Optional settings * @param {boolean} [options.monochr
(className, src, options = {})
| 886 | * @param {boolean} [options.monochrome=false] - If true, icon will use currentColor and adapt to theme |
| 887 | */ |
| 888 | addIcon(className, src, options = {}) { |
| 889 | let style = document.head.get(`style[icon="${className}"]`); |
| 890 | if (!style) { |
| 891 | let css; |
| 892 | if (options.monochrome) { |
| 893 | // Monochrome icons: use mask-image (on ::before) for currentColor/theme support |
| 894 | // Using ::before ensures we don't mask the ::after active indicator or the background |
| 895 | css = `.icon.${className}::before { |
| 896 | content: ''; |
| 897 | display: inline-block; |
| 898 | width: 24px; |
| 899 | height: 24px; |
| 900 | vertical-align: middle; |
| 901 | -webkit-mask: url(${src}) no-repeat center / contain; |
| 902 | mask: url(${src}) no-repeat center / contain; |
| 903 | background-color: currentColor; |
| 904 | }`; |
| 905 | } else { |
| 906 | // Default: preserve original icon colors |
| 907 | css = `.icon.${className}{ |
| 908 | background: url(${src}) no-repeat center / 24px; |
| 909 | }`; |
| 910 | } |
| 911 | style = <style icon={className}>{css}</style>; |
| 912 | document.head.appendChild(style); |
| 913 | } |
| 914 | } |
| 915 | |
| 916 | async prompt(message, defaultValue, type, options) { |
| 917 | const response = await prompt(message, defaultValue, type, options); |