Skip to content

WIP: Enable icon overrides from theme

Jen Spencer requested to merge enable-icon-overrides-from-theme into master

@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 😄

Edited by Jen Spencer

Merge request reports