How to include themed icons from an SVG sprite sheet in JointJS+ nodes #2981
-
IntroductionI’m using JointJS+ v4.0 to build a custom graph in an Angular 19 application, and I’d like to include icons inside nodes by referencing an SVG sprite sheet. Currently, I’m doing this via the attrs configuration like so: This works in general, but I'm having trouble getting the icons to render with the correct color depending on the active theme (light vs. dark). Since the icons are coming from a shared SVG sprite sheet, it seems like they’re not inheriting or applying the expected theme styles, they sometimes show up with incorrect or default colors in dark mode. I’ve tried setting fill, stroke, etc. directly in the attrs and body root configuration, but those don’t seem to override what’s coming from the sprite. What is the best way to include icons from an SVG sprite sheet in JointJS+ nodes, especially when the icons need to respond to different themes (e.g. dark/light mode)? Any examples or guidance would be much appreciated. Thanks in advance! Steps to reproduceNo response Restrictions & ConstraintsNo response Does your question relate to JointJS or JointJS+. Select both if applicable.JointJS+ |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
You can make icons from an SVG sprite respond to light/dark themes by combining with native CSS theming. Here’s how I handled it in JointJS: const MenuIcon = dia.Element.extend({
defaults: util.defaultsDeep({
type: 'standard.MenuIcon',
size: { width: 50, height: 50 },
}, dia.Element.prototype.defaults),
markup: util.svg`
<use @selector="menu" />
`
});
const iconElement = new MenuIcon({
attrs: {
menu: {
href: `${baseUrl}#square`, // ID in your sprite
style: {
color: 'light-dark(yellow, blue)' // native CSS theming
}
}
}
});This only works if the referenced in your SVG sprite uses fill="currentColor" or stroke="currentColor" - this allows the icon to inherit the color set via CSS. |
Beta Was this translation helpful? Give feedback.
You can make icons from an SVG sprite respond to light/dark themes by combining with native CSS theming. Here’s how I handled it in JointJS:
This only works if the referenced in your SVG sprit…