Add custom header level icons

[abhiroopc84]

Description

Adds custom icons for header levels so that we don't have to rely on plain written text to demonstrate to a user what level header they have selected and the pilcrow icon for paragraph tag.

Issue #465

What is the purpose of this pull request?

• New feature
• Documentation update
• Bug fix
• Refactor
• Release
• Other

[drfarrell]

This looks solid thanks for putting it together. One thing I'm interested to know is if the muted H on the icon will show up well on light mode – seeing that this is a branch that isn't built with the light mode, can you test it out and show what that looks like @abhiroopc84? I'm sure it'll be fine but just want to see if the icons get lost in the lightmode color scheme.

[Kitenite]

This is a very good solution for the light mode adaptations
#534

[hitaspdotnet]

This is a very good solution for the light mode adaptations #534

we should not face such problems because of light mode. we already have required tokens which works in dark & light.

we can put all icons/logos/svg in one place ex: components/icons.tsx.
usage: <Icons.Logo className="w-24 fill-foreground" />

[Kitenite]

Merged main for light mode testing

[drfarrell]

@abhiroopc84

The icons aren't showing up in light mode –

Perhaps if you try @hitaspdotnet 's recommendation it will solve it and then we can close it out 👍

[abhiroopc84]

Okay, I'll add a component for all the icons, so we can style them

[abhiroopc84]

@drfarrell I've fixed the coloring for active state. Could you review the changes?

[Kitenite]

Looks great. Nice work!