Skip to content

Makes it possible to customize icons #311

Open
@Nemikolh

Description

@Nemikolh

Is your feature request related to a problem?

Right now we use icons in a few places: to represent the file tree, the reset / solve button, the reload button, etc...

It would be nice if those could be customized by letting users specify a different className for them.

Describe the solution you'd like.

Ideally we have an icons option in our Astro integrations such that you can customize them:

tutorialkit({
  icons: {
    //  Icon to use. We could also accept values from https://icones.js.org/ and convert them to classes
    //       v
    reload: 'i-material-symbols-light-refresh'
    // ^ 
    // Name that we use where we want a "reload" icon
  },
})

Describe alternatives you've considered.

Alternatively, we make all icons overridable components like we have for the TopBar. This will be more flexible but is a bit more involved for end users.

However, it's very likely that we'll grow our set of overridable components so that everything can be tweaked. There's still value in simpler settings as they offer a quicker and simpler way of modifying the experience (like with our design tokens which are simple CSS variables).

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestnice-to-haveNot breaking anything but nice to have

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions