<FlexParent />
alignItems?: string
justifyContent?: string
wrap?: boolean
column?: boolean
reverse?: boolean
fillHeight?: boolean
noFontSize?: boolean
isInline?: boolean
height?: string
minHeight?: string
background?: string
backgroundColor?: string
isRelative?: boolean
withPointer?: boolean
fullWidth?: boolean
maxWidth?: string
width?: string
sTop?: boolean | 'big' | 'default' | 'small' | string
sRight?: boolean | 'big' | 'default' | 'small' | string
sBottom?: boolean | 'big' | 'default' | 'small' | string
sLeft?: boolean | 'big' | 'default' | 'small' | string
sAll?: boolean | 'big' | 'default' | 'small' | string
sVertical?: boolean | 'big' | 'default' | 'small' | string
sHorizontal?: boolean | 'big' | 'default' | 'small' | string
withBottomMargin?: boolean | 'big' | 'default' | 'small' | string
withTransition?: boolean | {
transitionProperties?: string | Array<string>
transitionOptions?: {
timing?: string
durationInMs?: number
willChange?: boolean
}
disableTransitions?: boolean
}
+ common <div> element attributes
+ styled components props, e.g `as` => https://www.styled-components.com/docs/api
<FlexChild />
grow?: boolean | number
shrink?: boolean | number
flexBasis?: string
fullWidth?: boolean
noFontSize?: boolean
justifySelfEnd?: boolean
height?: string
minHeight?: string
background?: string
backgroundColor?: string
isRelative?: boolean
withPointer?: boolean
sTop?: boolean | 'big' | 'default' | 'small' | string
sRight?: boolean | 'big' | 'default' | 'small' | string
sBottom?: boolean | 'big' | 'default' | 'small' | string
sLeft?: boolean | 'big' | 'default' | 'small' | string
sAll?: boolean | 'big' | 'default' | 'small' | string
sVertical?: boolean | 'big' | 'default' | 'small' | string
sHorizontal?: boolean | 'big' | 'default' | 'small' | string
withTransition?: boolean | {
transitionProperties?: string | Array<string>
transitionOptions?: {
timing?: string
durationInMs?: number
willChange?: boolean
}
disableTransitions?: boolean
}
+ common <div> element attributes
+ styled components props, e.g `as` => https://www.styled-components.com/docs/api
<SimpleWrapper />
center?: boolean
isInline?: boolean
height?: string
minHeight?: string
background?: string
backgroundColor?: string
isRelative?: boolean
withPointer?: boolean
fullWidth?: boolean
noFontSize?: boolean
maxWidth?: string
width?: string
withBefore?: CSSObject
withAfter?: CSSObject
sTop?: boolean | 'big' | 'default' | 'small' | string
sRight?: boolean | 'big' | 'default' | 'small' | string
sBottom?: boolean | 'big' | 'default' | 'small' | string
sLeft?: boolean | 'big' | 'default' | 'small' | string
sAll?: boolean | 'big' | 'default' | 'small' | string
sVertical?: boolean | 'big' | 'default' | 'small' | string
sHorizontal?: boolean | 'big' | 'default' | 'small' | string
withBottomMargin?: boolean | 'big' | 'default' | 'small' | string
withTransition?: boolean | {
transitionProperties?: string | Array<string>
transitionOptions?: {
timing?: string
durationInMs?: number
willChange?: boolean
}
disableTransitions?: boolean
}
+ common <div> element attributes
+ styled components props, e.g `as` => https://www.styled-components.com/docs/api
<Positioned />
top?: boolean | string
right?: boolean | string
bottom?: boolean | string
left?: boolean | string
all?: boolean | string
vertical?: boolean | string
horizontal?: boolean | string
zIndex?: number
position?: 'absolute' | 'fixed' | 'relative'
withTransition?: boolean | {
transitionProperties?: string | Array<string>
transitionOptions?: {
timing?: string
durationInMs?: number
willChange?: boolean
}
disableTransitions?: boolean
}
+ common <div> element attributes
+ styled components props, e.g `as` => https://www.styled-components.com/docs/api
<Spacer />
sTop?: boolean | 'big' | 'default' | 'small' | string
sRight?: boolean | 'big' | 'default' | 'small' | string
sBottom?: boolean | 'big' | 'default' | 'small' | string
sLeft?: boolean | 'big' | 'default' | 'small' | string
sAll?: boolean | 'big' | 'default' | 'small' | string
sVertical?: boolean | 'big' | 'default' | 'small' | string
sHorizontal?: boolean | 'big' | 'default' | 'small' | string
+ common <div> element attributes
+ styled components props e.g `as` => https://www.styled-components.com/docs/api
<Image />
+ common <div> element attributes
+ styled components props e.g `as` => https://www.styled-components.com/docs/api
- It's responsive by default. Fixed width is meant to be defined by it's wrapper, e.g.
<SimpleWrapper maxWidth="30px">
<Image src="path_to_image">
</SimpleWrapper>
<Svg />
props:
viewBoxSize?: number - must be defined if viewBoxWidth and viewBoxHeight are not
viewBoxWidth?: number - must be defined if viewBoxSize is not
viewBoxHeight?: number - must be defined if viewBoxSize is not
size?: number
overflowFixScaleRatio?: number
overflowFixPosition?: number
children: ReactNode
props in detail:
-
viewBoxSize
- you copy it from original svg element
- never change this value!! - paths inside svg are calculations based on
viewBox
- when
viewBoxWidth
and viewBoxHeight
are the same -> you don't have to define viewBoxWidth
& viewBoxHeight
then
-
viewBoxWidth
- you copy it from original svg element
- never change this value!! - paths inside svg are calculations based on
viewBox
- don't define it if you defined
viewBoxSize
-
viewBoxHeight
- you copy it from original svg element - never change this value!! - paths inside svg are calculations based on
viewBox
- don't define it if you defined
viewBoxSize
-
size
- if not defined, it takes
(viewBoxWidth && viewBoxHeight) || viewBoxSize
as it's width and height parameters
- if width and height are not the same, it defines the longer side length -> the other side is ratio calculated
-
overflowFixScaleRatio
- useful for charts => when you define a stroke, it can overflow the
viewBox
, making part of the svg invisible
-
overflowFixPosition
- useful for charts => when you use
overflowFixScaleRatio
, the paths inside viewBox might need a little adjustment nudge
-
children
- all other svg elements but
<svg />