Fix icon shape color for colored icons.

[saurabhg772244]

📑 Summary

• Styles icon shape so as not to override icons default colour.
• Fix jagged edges on icon shape.

Resolves #

📏 Design Decisions

• All the icons that support will have fill as current colour. So will use css style colour to override it. All icons with fill as custom colour hexcode will not get overridden.
• Used stroke transparent while drawing background of icon shape. this prevents jagged edges.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot]

🦋 Changeset detected

Latest commit: 17b7831

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	17b7831
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6706300c9fb7c5000860119c
😎 Deploy Preview	https://deploy-preview-5937--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/mermaid-js/mermaid@5937

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@5937

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@5937

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@5937

commit: 17b7831

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 10 lines in your changes missing coverage. Please review.

Project coverage is 4.67%. Comparing base (c38d9a6) to head (17b7831).
Report is 22 commits behind head on develop.

Files with missing lines	Patch %	Lines
...ering-util/rendering-elements/shapes/iconCircle.ts	0.00%	3 Missing ⚠️
...ring-util/rendering-elements/shapes/iconRounded.ts	0.00%	3 Missing ⚠️
...ering-util/rendering-elements/shapes/iconSquare.ts	0.00%	3 Missing ⚠️
...c/rendering-util/rendering-elements/shapes/icon.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           develop   #5937   +/-   ##
=======================================
  Coverage     4.67%   4.67%           
=======================================
  Files          373     372    -1     
  Lines        51680   51669   -11     
  Branches       586     611   +25     
=======================================
  Hits          2414    2414           
+ Misses       49266   49255   -11     

Flag	Coverage Δ
unit	4.67% <0.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...c/rendering-util/rendering-elements/shapes/icon.ts	0.00% <0.00%> (ø)
...ering-util/rendering-elements/shapes/iconCircle.ts	0.00% <0.00%> (ø)
...ring-util/rendering-elements/shapes/iconRounded.ts	0.00% <0.00%> (ø)
...ering-util/rendering-elements/shapes/iconSquare.ts	0.00% <0.00%> (ø)

... and 1 file with indirect coverage changes

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	252 changed, 2 added	Oct 9, 2024, 7:33 AM

[aloisklink]

All your changes in the Mermaid code look good!

My recommended changes are:

• Can we change the test icon to something that's not a logo?
• Can you add a changeset using pnpm changeset? Maybe you can even make two, since you're fixing two different bugs in this PR! Please also update the PR title as well (even if it's just a general "Icon shapes improvements" since this PR handles a lot of stuff).
• The added documentation in packages/mermaid/src/docs/icon-shape.md needs a bit of work to look good on the https://mermaid.js.org/ website

[saurabhg772244]

@aloisklink I have updated the icon used in visual test. Also removed Doc from this PR. Will create separate PR for doc changes.

[aloisklink]

Moving the docs into a separate PR sounds good to me!

Two more changes required!

• Please move the license for tropical-fish to the correct file (e.g. where the SVG is defined)!
• And please use pnpm changeset to create a changeset for each of the bugs you've fixed!