[Sistent] Add IconButton component to the sistent components page

[dragon-slayer875]

Current Behavior

Layer5 and it's projects use Sistent library to enable easy component reusability among our various projects. One such component is IconButton.

https://playground.meshery.io/configuration/designs

Ideally, all sistent components are represented on https://layer5.io/projects/sistent/components, so a centralized usage and example documentation can be maintained. This will aid new developers to more quickly jump into contributing to the various projects. The IconButton component currently needs this representation.

Desired Behavior

Proper documentation for IconButton component similar to Button component on https://layer5.io/projects/sistent/components The documentation should include:

• Explanation of the the function that the component serves in context of it's usage.
• Code examples.
• Stylistic guidelines to be followed while using the component in code (if any).

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 🎨 See Sistent Repository.
• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[pavanydg]

@dragon-slayer875 please assign me. I would like to work on this.

[dragon-slayer875]

Have at it @pavanydg. :) And don't forget to keep us in the loop on your progress.

[dragon-slayer875]

@sudhanshutech Please assign @snehachandra1108.

[deepikaa0402]

Hi! If this issue is not assigned to anyone I'd like to work on it. So, please assign it to me.

[NishantSinghhhhh]

Can you assign this issue to me ??

[Vidit-Kushwaha]

Hi @deepikaa0402 👋

Are you facing challenges with an issue in Sistent? We’ve got you covered! Join our tutorial session this Monday, December 16, 2024, at 7 AM Central (6:30 PM IST) during the website meeting.

What’s on the agenda?

• A guide to navigating the Sistent repository
• Setting up the project locally
• Steps to get your pull request merged successfully

📌 Full details: Kickstart Your Open-Source Journey

👤 Want to get started?

• Explore the Newcomers’ Form.
• Check the Meeting Minutes.
• Sync up with the Community Calendar.

💻 Let’s make open-source contributions easier for you. Don’t miss it! 🚀

[capricorn-32]

Hey can you assign me this issue .

[Vidit-Kushwaha]

@capricorn-32 go ahead 👍

[capricorn-32]

Sistent Iconbutton support many props, but if this used with sistent icons then many features are not supported. same way if we use material-icon or react-icon all the feature of Iconbutton is supported. so in documentation what should we do @Vidit-Kushwaha ?

[Vidit-Kushwaha]

Thank you for pointing this out, @capricorn-32 We primarily use Sisitent icons with IconButton across projects. Typically, we avoid using material-icon or react-icon.
For documentation, let’s emphasise using Sistent icons, noting any limitations, and providing examples for best practices.

@sudhanshutech @vishalvivekm Any thoughts??

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue is being automatically closed due to inactivity. However, you may choose to reopen this issue.

[naikmubashir]

Hi, i would to work on this issue. Please assign it to me. @Rajesh-Nagarajan-11

[naikmubashir]

@Vidit-Kushwaha please review the opened pr