Skip to content

feat: Enhance addIcon to support svg currentColor #1760

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bajrangCoder merged 2 commits into from
Dec 21, 2025
Merged

feat: Enhance addIcon to support svg currentColor #1760

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a781621
feat: Enhance `addIcon` to support svg currentColor
bajrangCoder Dec 21, 2025
13e2821
chore: use shorthand properties.
bajrangCoder Dec 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 29 additions & 6 deletions src/lib/acode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -629,14 +629,37 @@ export default class Acode {
return Url.join(...args);
}

addIcon(className, src) {
/**
* 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.monochrome=false] - If true, icon will use currentColor and adapt to theme
*/
addIcon(className, src, options = {}) {
let style = document.head.get(`style[icon="${className}"]`);
if (!style) {
style = (
<style
icon={className}
>{`.icon.${className}{background-image: url(${src})}`}</style>
);
let css;
if (options.monochrome) {
// Monochrome icons: use mask-image (on ::before) for currentColor/theme support
// Using ::before ensures we don't mask the ::after active indicator or the background
css = `.icon.${className}::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
vertical-align: middle;
-webkit-mask: url(${src}) no-repeat center / contain;
mask: url(${src}) no-repeat center / contain;
background-color: currentColor;
}`;
} else {
// Default: preserve original icon colors
css = `.icon.${className}{
background: url(${src}) no-repeat center / 24px;
}`;
}
style = <style icon={className}>{css}</style>;
document.head.appendChild(style);
}
}
Expand Down