WIP: Enable icon overrides from theme
@yannis @julientaq So this is what I was trying to describe in issue #411
Right now, we get icons from react-feather
through the Icon
component. Ideally it would be nice not to rely on a specific icon set. But, as @yannis said, our problem is dynamic imports.
And we don't want something like:
import { icons } from 'my-theme'
or
import { CrossIcon } from 'my-theme/icons'
because that means hard-coding a specific theme (my-theme
) into each component that uses an icon. So this doesn't work either.
My suggestion would be to replace the existing Icon
component with the one in this MR - Icon2
. This component is responsible for fetching the correct icon. By default, it pulls in icons from react-feather
(based on what you pass to the iconName
prop), unless you have specified an override in your theme.
I've added it as Icon2
for now, rather than replacing Icon
, just so that I don't have to change every single place that Icon
is currently used, while we're still discussing implementation options. So to give you an idea of how I envisage this working, I've altered a couple of existing components to use Icon2
.
This implementation is also a fairly drastic departure from the existing way of adding styling to icons - via size
& color
props (because that's how react-feather does things). Hopefully this implementation would work for adding styles to any icon set, because it's done via CSS with styled-components rather than via props.
Lemme know what y'all think