Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(elements)!: convert Icon size prop from rem to px #131

Merged
merged 1 commit into from
Dec 14, 2022
Merged

feat(elements)!: convert Icon size prop from rem to px #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scripts/icons/iconTemplate.tsxt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { IconBox } from '../elements/IconBox'
import type { IconProps } from '../types'

export const /*ICON_NAME*/ = ({ color, size, ...nativeProps}: IconProps) => (
<IconBox $size={size} color={color}>
<IconBox $size={size} $color={color}>
/*ICON_SVG_SOURCE*/
</IconBox>
)
13 changes: 8 additions & 5 deletions src/elements/IconBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import styled from 'styled-components'

export type IconBoxProps = {
/** In REM */
$color?: string
/** In pixels */
$size?: number
color?: string
}
/**
* Internal component used to wrap SVG icon components
*/
export const IconBox = styled.div<IconBoxProps>`
display: inline-block;
color: ${p => p.color ?? 'inherit'};
color: ${p => p.$color ?? 'inherit'};

> svg {
display: block;
height: ${p => p.$size ?? 1}rem;
width: ${p => p.$size ?? 1}rem;
height: ${p => p.$size ?? 16}px;
width: ${p => p.$size ?? 16}px;
}
`
12 changes: 6 additions & 6 deletions src/elements/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ import { PrimaryButton, SecondaryButton } from './Button'
import type { IconProps } from '../types'
import type { ButtonHTMLAttributes, FunctionComponent } from 'react'

const ICON_SIZE: Record<Size, number> = {
[Size.LARGE]: 1.625,
[Size.NORMAL]: 1.25,
[Size.SMALL]: 0.875
const ICON_SIZE_IN_PX: Record<Size, number> = {
[Size.LARGE]: 26,
[Size.NORMAL]: 20,
[Size.SMALL]: 14
}

export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
Icon: FunctionComponent<IconProps>
accent?: Accent
color?: string
/** In REM, override `size` prop default values */
/** In pixels, override `size` prop default values */
iconSize?: number
size?: Size
}
Expand All @@ -31,7 +31,7 @@ export function IconButton({
...nativeProps
}: IconButtonProps) {
const children = useMemo(
() => <Icon color={color} size={iconSize || ICON_SIZE[size]} />,
() => <Icon color={color} size={iconSize || ICON_SIZE_IN_PX[size]} />,
[color, Icon, iconSize, size]
)
const commonProps = useMemo(
Expand Down
2 changes: 1 addition & 1 deletion src/icons/ActivityFeed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function ActivityFeed({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(40 -41)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Alert({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(-220 -208)">
<path
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Anchor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Anchor({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<rect fill="none" height="20" width="20" />
<path
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Archive.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Archive({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(-120)">
<path d="M138,2H122V8h1V18h14V8h1ZM124,4h12V6H124Zm11,12H125V8h10Z" fill="currentColor" />
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Attention.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Attention({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(200 -82)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Calendar({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(280 -41)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Check.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Check({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(40 -82)">
<g fill="none" strokeMiterlimit="10">
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Chevron.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Chevron({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(0 -82)">
<g fill="none" strokeMiterlimit="10">
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Clock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Clock({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(240 -41)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Close.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Close({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(160 -82)">
<g fill="none" strokeMiterlimit="10">
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Confirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Confirm({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(-40)">
<path d="M50,1a9,9,0,1,0,9,9A9,9,0,0,0,50,1Zm0,16a7,7,0,1,1,7-7A7,7,0,0,1,50,17Z" fill="currentColor" />
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Control({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<defs>
<clipPath>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Delete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Delete({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(-23.798 -14.096)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Display.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Display({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(0 -40)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/DoubleChevron.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function DoubleChevron({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g>
<g fill="none" strokeMiterlimit="10">
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Download.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Download({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(-80)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Drapeau.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Drapeau({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<rect fill="#000091" height="12" transform="translate(1 4)" width="6" />
<rect fill="#e1000f" height="12" transform="translate(13 4)" width="6" />
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Duplicate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Duplicate({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<path d="M6,2V5H3V18H14V15h3V2Zm6,14H5V7h7Zm3-3H14V5H8V4h7Z" fill="currentColor" />
<rect fill="none" height="20" width="20" />
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Edit({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(-80)">
<path
Expand Down
2 changes: 1 addition & 1 deletion src/icons/EditBis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function EditBis({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(-80)">
<path
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Favorite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Favorite({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(-300 -208)">
<path
Expand Down
2 changes: 1 addition & 1 deletion src/icons/FilledArrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function FilledArrow({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(320 -41)">
<path d="M-313,43V59l8-8Z" fill="currentColor" />
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Filter({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(-930 -294)">
<path
Expand Down
2 changes: 1 addition & 1 deletion src/icons/FilterBis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function FilterBis({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g>
<rect fill="none" height="20" width="20" />
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Fishery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Fishery({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(80 -41)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/FishingEngine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function FishingEngine({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(0 -41)">
<path
Expand Down
2 changes: 1 addition & 1 deletion src/icons/FleetSegment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function FleetSegment({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(280 -82)">
<path
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Focus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Focus({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(320 -82)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/FocusVessel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function FocusVessel({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<path
d="M8.666,14.994a.138.138,0,0,1-.054-.034.142.142,0,0,1-.04-.081l-.4-3.05-3.05-.4a.139.139,0,0,1-.114-.094.137.137,0,0,1,.033-.144L9.3,6.934A.139.139,0,0,1,9.351,6.9l5.463-1.893a.14.14,0,0,1,.178.178L13.1,10.649a.139.139,0,0,1-.033.053L8.809,14.959a.141.141,0,0,1-.1.041A.161.161,0,0,1,8.666,14.994Z"
Expand Down
2 changes: 1 addition & 1 deletion src/icons/FocusZones.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function FocusZones({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g>
<path
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Hide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Hide({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<path
d="M15.635,5.779l2.143-2.143L16.364,2.222l-2.55,2.55A9.786,9.786,0,0,0,10,4a9.674,9.674,0,0,0-9,6,9.532,9.532,0,0,0,3.365,4.22L2.222,16.364l1.414,1.414,2.55-2.55A9.786,9.786,0,0,0,10,16a9.674,9.674,0,0,0,9-6A9.541,9.541,0,0,0,15.635,5.779ZM6,10a4,4,0,0,1,4-4,3.96,3.96,0,0,1,2.02.566L10.71,7.875A2.225,2.225,0,0,0,10,7.75,2.25,2.25,0,0,0,7.75,10a2.225,2.225,0,0,0,.125.71L6.566,12.02A3.96,3.96,0,0,1,6,10Zm4,4a3.96,3.96,0,0,1-2.02-.566l1.31-1.309a2.225,2.225,0,0,0,.71.125A2.25,2.25,0,0,0,12.25,10a2.225,2.225,0,0,0-.125-.71l1.309-1.31A3.96,3.96,0,0,1,14,10,4,4,0,0,1,10,14Z"
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Info({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(240 -82)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Infringement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Infringement({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(40 -41)">
<path
Expand Down
2 changes: 1 addition & 1 deletion src/icons/Landmark.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function Landmark({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(120 -82)">
<rect fill="currentColor" height="15" transform="translate(-114 99) rotate(180)" width="2" />
Expand Down
2 changes: 1 addition & 1 deletion src/icons/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function List({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(160 -41)">
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/MapLayers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function MapLayers({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<rect fill="none" height="20" width="20" />
<g>
Expand Down
2 changes: 1 addition & 1 deletion src/icons/MeasureAngle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { IconProps } from '../types'

export function MeasureAngle({ color, size, ...nativeProps }: IconProps) {
return (
<IconBox $size={size} color={color}>
<IconBox $color={color} $size={size}>
<svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
<g transform="translate(200 -82)">
<g>
Expand Down
Loading