Open
Description
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).