Wrap the exported Icon into styled() instead of its child?

[silvenon]

Expected Behavior

This is something between a feature request and a bug, but I'm leaning more towards a bug. I'm not fluent in styled-components, but judging from Icon's source code it seems that it's not possible to refer to it as a selector because the exported component itself isn't a styled component, so we can't do something like this:

import Icon from '@kiwicom/orbit-components/lib/Icon'
import styled from 'styled-components'

const StyledDiv = styled.div`
  ${Icon} {
    display: inline-block;
  }
`

So AFAICT there is no way to select all icons in a certain element.

Possible Solution

My possibly naïve suggestion would be to wrap the exported component into styled() rather than its child. Am I overlooking something?

[vepor]

Hey @silvenon 🙂

All exported icons are just React components and therefore they don't have any class name in interpolation. However, it's possible to create a styled component from them with styled factory, as there is available className in their props.

import { Airplane } from "@kiwicom/orbit-components/lib/icons"
import styled from "styled-components"

const Icon = styled(AirPlane)``

const Wrapper = styled.div`
  ${Icon} {
    display: inline-block;
  }
`

I don't know exactly what you are trying to achieve and I'm not sure if exporting all icons as styled components won't cause any problems in terms of consistency 🤔 However, it should be possible.

[silvenon]

I would like to style all icons globally, which is currently not possible. E.g. this would make migrating away from icon fonts much easier, and since all icons stem from the Icon component it would be great if all icons shared the same class.

I think it would be useful if all Orbit components (not just icons) were exported as styled components, this would provide more styling flexibility. I currently don't see the downside of this. 🤔

[honzatmn]

@silvenon Hi Matija! 👋

Afaik, current Orbit icons should support everything that should be needed – from colors to sizes that are used by our designers. Can you maybe specify/describe your specific use case for styling? There shouldn't be much need for styling it explicitly or custom (it's even not recommended as it may break icons when we change them in Orbit later)

[silvenon]

Since we're exposing className for icons people are be able to style icons through CSS however they want anyway, including changing color and dimensions.

However, as I was writing this reply, the downsides of exporting styled components became obvious to me: styled-components should remain just a dependency, it shouldn't be exposed. As far as users are concerned, styled-components are an implementation detail. I assume that's what you meant, and it makes sense.

This realization defeats my suggestion, so I'm closing this.