PRIAPI-73: SVG spriting, icons #5
Conversation
| @@ -23,6 +24,7 @@ function Button(props) { | |||
| className={`${styles[buttonClass]} ${className}`} | |||
| onClick={onClick} | |||
| > | |||
| {icon ? <Icon svg={icon} /> : null} | |||
There was a problem hiding this comment.
What about just { icon && <Icon svg={icon} /> }?
| */ | ||
| function Icon(props) { | ||
| const { svg } = props; | ||
| const icon = require(`./svg/${svg}.svg`); // eslint-disable-line |
There was a problem hiding this comment.
I would take a look at this
I have no real knowledge of how best to handle this – it's a bit out of my wheel house
| /** | ||
| * Component that renders a link, or a button with a click handler. | ||
| */ | ||
| function Icon(props) { |
There was a problem hiding this comment.
@flipactual correct me if I'm wrong but I think it's safe to use an arrow function here:
const Icon = (props) => {};There was a problem hiding this comment.
Likely should do this in the Button component as well for maximum consistency 💯
| import Icon from './Icon.component'; | ||
|
|
||
| describe('<Icon />', () => { | ||
| const icon = 'heart'; |
There was a problem hiding this comment.
No need for this to be a separate variable since it's only being used once.
There was a problem hiding this comment.
I think this is because I am telling jest to ignore SVGs. Let's maybe take a stab at this separately.
| className={styles.inlineSvg} | ||
| fill="currentcolor" | ||
| > | ||
| <use xlinkHref={`#${icon.default.id}`} /> |
There was a problem hiding this comment.
This is undefined in the snapshot test...
| const icon = require(`./svg/${svg}.svg`); // eslint-disable-line | ||
| return ( | ||
| <svg | ||
| viewBox={icon.default.viewBox} |
There was a problem hiding this comment.
This is undefined in the snapshot test...
| @@ -23,6 +24,7 @@ function Button(props) { | |||
| className={`${styles[buttonClass]} ${className}`} | |||
| onClick={onClick} | |||
| > | |||
| {icon && <Icon svg={icon} />} | |||
There was a problem hiding this comment.
Why not just pass the <Icon> directly?
There was a problem hiding this comment.
this checks whether the icon exists
| } | ||
|
|
||
| Icon.propTypes = { | ||
| svg: PropTypes.string.isRequired |
There was a problem hiding this comment.
PropTypes.oneOf(['heart', 'envelope'])
|
🎉 This PR is included in version 1.2.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
PRIAPI-73: SVG spriting, icon system
This PR does the following:
*.svgfilesTo Review:
yarn startand view the icon button and Orange dropdown for examples.Questions/Concerns