Skip to content

Instantly share code, notes, and snippets.

@davo

davo/MaterialIcon.tsx

Last active Aug 17, 2018
Embed
What would you like to do?
Framer X - Material Icon Component via Styled Components
import * as React from 'react'
import { ControlType } from 'framer'
import styled, { injectGlobal } from 'styled-components'
injectGlobal`
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
`
interface iconProps {
stretch: boolean
height: number
}
const StyledIconFrame = styled<iconProps, any>('div')`
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
i {
font-size: ${props => (props.stretch ? props.height : 24)}px !important;
}
`
interface MaterialIconProps {
icon: string
color: string
stretch: boolean
height: number
}
export class MaterialIcon extends React.Component<MaterialIconProps> {
static defaultProps = {
icon: 'favorite',
color: '#6200ee',
stretch: false,
width: 24,
height: 24
}
static propertyControls = {
icon: { type: ControlType.String, title: 'Icon name' },
color: { type: ControlType.Color, title: 'Color' },
stretch: { type: ControlType.Boolean, title: 'Stretch' }
}
render() {
return (
<StyledIconFrame height={this.props.height} stretch={this.props.stretch}>
<i className="material-icons mdc-button__icon" aria-hidden="true" style={{ color: this.props.color }}>
{this.props.icon}
</i>
</StyledIconFrame>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment