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).
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
classNamefor them.Describe the solution you'd like.
Ideally we have an
iconsoption in our Astro integrations such that you can customize them: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).