...
  View open merge request
Commits (1)
......@@ -26,7 +26,7 @@ const Colorize = Component => {
(placeholder && theme.colorTextPlaceholder) ||
theme.colorText
return <Component color={color} {...props} />
return <Component color={color} theme={theme} {...props} />
}
Colorized.propTypes = Object.assign({}, Component.propTypes)
......
......@@ -17,12 +17,13 @@ const Container = styled.span`
${override('ui.Icon')};
`
const Icon = ({ children, color, size = 3, ...props }) => {
const Icon = ({ children, color, size = 3, theme, ...props }) => {
// convert `arrow_left` to `ArrowLeft`
const name = _.upperFirst(_.camelCase(children))
// select the icon
const icon = icons[name]
// select the icon, checking for override in theme, otherwise defaulting
// to the react feather icon set
const icon = _.get(theme.icons, name, icons[name])
if (!icon) {
console.warn("Icon '%s' not found", name)
......
import React from 'react'
import renderer from 'react-test-renderer'
import { ThemeProvider } from 'styled-components'
import 'jest-styled-components'
import { Icon } from '../src/'
const render = (name, props = { theme: { a: 1 } }) =>
renderer.create(
<ThemeProvider theme={props.theme}>
<Icon>{name}</Icon>
</ThemeProvider>,
)
describe('Icon', () => {
test('is rendered correctly', () => {
const tree = render('circle').toJSON()
expect(tree).toMatchSnapshot()
})
test('is rendered correctly with override', () => {
const CircleOverride = () => <circle-override />
const tree = render('circle', {
theme: { icons: { Circle: CircleOverride } },
}).toJSON()
expect(tree).toMatchSnapshot()
})
})
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Icon is rendered correctly 1`] = `
.c0 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
padding: calc( / 2);
}
.c0 svg {
width: calc(3 * );
height: calc(3 * );
}
<span
className="c0"
role="img"
size={3}
>
<svg
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
</svg>
</span>
`;
exports[`Icon is rendered correctly with override 1`] = `
.c0 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
padding: calc( / 2);
}
.c0 svg {
width: calc(3 * );
height: calc(3 * );
}
<span
className="c0"
role="img"
size={3}
>
<circle-override />
</span>
`;