Updated icon shape for background colour and icon colour

packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts

@@ -1,21 +1,26 @@
 import { log } from '../../../logger.js';
 import { labelHelper, updateNodeBounds } from './util.js';
-import type { Node } from '../../types.d.ts';
+import type { Node, RenderOptions } from '../../types.d.ts';
 import type { SVG } from '../../../diagram-api/types.js';
-import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
-export const icon = async (parent: SVG, node: Node) => {
+export const icon = async (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables, flowchart } }: RenderOptions
+) => {
   const { labelStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
   const iconSize = Math.max(assetHeight, assetWidth);
-  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  const defaultWidth = flowchart?.wrappingWidth;
   node.width = Math.max(iconSize, defaultWidth ?? 0);
+  const { nodeBorder } = themeVariables;
+  const { stylesMap } = compileStyles(node);
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
 
   const topLabel = node.pos === 't';
@@ -51,6 +56,7 @@ export const icon = async (parent: SVG, node: Node) => {
       'transform',
       `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})`
     );
+    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
 
   label.attr(

packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts

@@ -12,7 +12,7 @@ export const iconCircle = async (
   node: Node,
   { config: { themeVariables, flowchart } }: RenderOptions
 ) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
+  const { labelStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
@@ -24,14 +24,12 @@ export const iconCircle = async (
     node,
     'icon-shape default'
   );
-  const { cssStyles } = node;
 
   const topLabel = node.pos === 't';
 
   const diameter = iconSize + halfPadding * 2;
-  const { mainBkg } = themeVariables;
+  const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
-
   // @ts-ignore - rough is not typed
   const rc = rough.svg(shapeSvg);
   const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
@@ -44,9 +42,8 @@ export const iconCircle = async (
   const iconNode = rc.circle(0, 0, diameter, options);
 
   const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
-
-  if (node.icon) {
   const iconElem = shapeSvg.append('g');
+  if (node.icon) {
     iconElem.html(
       `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
     );
@@ -57,6 +54,7 @@ export const iconCircle = async (
       'transform',
       `translate(${-iconWidth / 2},${topLabel ? diameter / 2 - iconHeight - halfPadding + bbox.height / 2 : -diameter / 2 + halfPadding - bbox.height / 2})`
     );
+    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
 
   label.attr(
@@ -66,14 +64,6 @@ export const iconCircle = async (
 
   iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
 
-  if (cssStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', cssStyles);
-  }
-
-  if (nodeStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', nodeStyles);
-  }
-
   updateNodeBounds(node, shapeSvg);
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts

@@ -13,7 +13,7 @@ export const iconRounded = async (
   node: Node,
   { config: { themeVariables, flowchart } }: RenderOptions
 ) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
+  const { labelStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
@@ -25,13 +25,12 @@ export const iconRounded = async (
     node,
     'icon-shape default'
   );
-  const { cssStyles } = node;
 
   const topLabel = node.pos === 't';
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { mainBkg } = themeVariables;
+  const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
   const x = -width / 2;
@@ -62,6 +61,7 @@ export const iconRounded = async (
       'transform',
       `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
     );
+    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
 
   label.attr(
@@ -71,14 +71,6 @@ export const iconRounded = async (
 
   iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
 
-  if (cssStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', cssStyles);
-  }
-
-  if (nodeStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', nodeStyles);
-  }
-
   updateNodeBounds(node, shapeSvg);
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts

@@ -12,7 +12,7 @@ export const iconSquare = async (
   node: Node,
   { config: { themeVariables, flowchart } }: RenderOptions
 ) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
+  const { labelStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
@@ -24,13 +24,12 @@ export const iconSquare = async (
     node,
     'icon-shape default'
   );
-  const { cssStyles } = node;
 
   const topLabel = node.pos === 't';
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { mainBkg } = themeVariables;
+  const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
   const x = -width / 2;
@@ -61,6 +60,7 @@ export const iconSquare = async (
       'transform',
       `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
     );
+    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
 
   label.attr(
@@ -70,14 +70,6 @@ export const iconSquare = async (
 
   iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
 
-  if (cssStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', cssStyles);
-  }
-
-  if (nodeStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', nodeStyles);
-  }
-
   updateNodeBounds(node, shapeSvg);
 
   node.intersect = function (point) {