fix(icons): changed sun-moon icon & arcified moon icons

[karsa-mistmere]

What is the purpose of this pull request?

• Other: Icon update

Description

The recently changed sun-moon icon from #3206 has pretty bad centre of gravity, since the bottom left moon portion is much heavier than the top right half with parts of sun.

This PR aims to add a more balanced and at the same time more compliant sun-moon icon that takes the changes from #3328, but incorporates them in a way that:

• is visually centred,
• gives slightly more weight to the sun part for better balance between the halves
• adds guideline compliant rounding to the moon that also allows for a harmonic continuation of sun's curve.

Once these changes were made, I realised that any moon icons we have should also be arcified to match our design guidelines.

Before Submitting

• I've read the Contribution Guidelines.
• I've checked if there was an existing PR that solves the same issue.

[github-actions]

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview

16px (shadcn/ui)

24px (default)

32px (shadcn/ui + retina)

48px (default + retina)

Icon X-rays

Icon Diffs

Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const CloudMoonRainIcon = createLucideIcon('CloudMoonRain', [
  ["path",{"d":"M11 20v2"}],
  ["path",{"d":"M18.376 14.512a6 6 0 0 0 3.461-4.127c.148-.625-.659-.97-1.248-.714a4 4 0 0 1-5.259-5.26c.255-.589-.09-1.395-.716-1.248a6 6 0 0 0-4.594 5.36"}],
  ["path",{"d":"M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24"}],
  ["path",{"d":"M7 19v2"}]
])

const CloudMoonIcon = createLucideIcon('CloudMoon', [
  ["path",{"d":"M13 16a3 3 0 0 1 0 6H7a5 5 0 1 1 4.9-6z"}],
  ["path",{"d":"M18.376 14.512a6 6 0 0 0 3.461-4.127c.148-.625-.659-.97-1.248-.714a4 4 0 0 1-5.259-5.26c.255-.589-.09-1.395-.716-1.248a6 6 0 0 0-4.594 5.36"}]
])

const MoonStarIcon = createLucideIcon('MoonStar', [
  ["path",{"d":"M18 5h4"}],
  ["path",{"d":"M20 3v4"}],
  ["path",{"d":"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"}]
])

const MoonIcon = createLucideIcon('Moon', [
  ["path",{"d":"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"}]
])

const SunMoonIcon = createLucideIcon('SunMoon', [
  ["path",{"d":"M12 2v2"}],
  ["path",{"d":"M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715"}],
  ["path",{"d":"M16 12a4 4 0 0 0-4-4"}],
  ["path",{"d":"m19 5-1.256 1.256"}],
  ["path",{"d":"M20 12h2"}]
])

[jguddas]

Can we somehow get the sun moon icon, to feel more cirular?

[karsa-mistmere]

Can we somehow get the sun moon icon, to feel more circular?

Before #3328 got merged, I did have this in my drafts:

Open lucide studio

This is much more circular than either the current one or the PR version, but comes at the cost of not using the same moon shape as our other icons do.