Commit 0000547e authored by Jen Spencer's avatar Jen Spencer

refactor(icons): create alternative Icon component

pulls from react-feather by default but looks in the theme for overrides
parent b23b356e
Pipeline #8581 passed with stages
in 8 minutes and 56 seconds
import React from 'react'
import { withTheme } from 'styled-components'
import { get, has } from 'lodash'
import * as reactFeatherIcons from 'react-feather'
const Icon2 = ({ iconName, overrideName, className, theme, ...props }) => {
const isOverrideInTheme = has(theme.icons, overrideName)
if (isOverrideInTheme) {
const OverrideIcon = get(theme.icons, overrideName)
return <OverrideIcon className={className} {...props} />
const isIconInDefaultSet = reactFeatherIcons[iconName]
// TODO: what should we default to when there's no obvious react-feather equivalent?
if (!isIconInDefaultSet) {
console.warn("Icon '%s' not found", iconName)
return null
const DefaultIcon = reactFeatherIcons[iconName]
return <DefaultIcon className={className} {...props} />
export default withTheme(Icon2)
Icon is a wrapper that is responsible for fetching the icon, either from `react-feather` by default, or from the theme if an icon override has been set.
Defaults to `react-feather`'s plus icon (based on the `iconName` prop) because it can't find an override with this name in your theme:
<Icon2 iconName="Plus" overrideName="not-in-any-theme" />
Use the dropdown on the left to change to the eLife theme & you will see this icon change from `react-feather`'s plus icon to the plus icon eLife uses in their theme:
export { default as Colorize } from './Colorize'
export { default as UploadingFile } from './UploadingFile'
export { default as Icon } from './Icon'
export { default as Icon2 } from './Icon2'
export { default as Attachment } from './Attachment'
export { default as Avatar } from './Avatar'
export { default as Badge } from './Badge'
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment