[fix] Safari icons (#216)
* Fix icons on Safari, improve padding for UI * fix types * Update SizeMenu.tsx * bumps size of primary buttons * Minor UI tweaks
This commit is contained in:
Steve Ruiz
GitHub
parent
72b6fafcc1
commit
161d69939f
11 changed files with 171 additions and 124 deletions
|
|
@ -4,7 +4,7 @@ import styled from '~styles/stitches.config'
|
|||
import { MenuContent } from '~components/MenuContent'
|
||||
|
||||
export interface DMContentProps {
|
||||
variant?: 'grid' | 'menu'
|
||||
variant?: 'grid' | 'menu' | 'horizontal'
|
||||
align?: 'start' | 'center' | 'end'
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
|
@ -28,6 +28,9 @@ export const StyledContent = styled(MenuContent, {
|
|||
gridTemplateColumns: 'repeat(4, auto)',
|
||||
gap: 0,
|
||||
},
|
||||
horizontal: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
menu: {
|
||||
minWidth: 128,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ export const Panel = styled('div', {
|
|||
backgroundColor: '$panel',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
padding: '0 $2',
|
||||
boxShadow: '$panel',
|
||||
padding: '$2',
|
||||
variants: {
|
||||
side: {
|
||||
center: {
|
||||
|
|
@ -16,12 +16,12 @@ export const Panel = styled('div', {
|
|||
// borderRight: '1px solid $panelBorder',
|
||||
},
|
||||
left: {
|
||||
borderBottomRightRadius: '$4',
|
||||
borderBottomRightRadius: '$3',
|
||||
// borderBottom: '1px solid $panelBorder',
|
||||
// borderRight: '1px solid $panelBorder',
|
||||
},
|
||||
right: {
|
||||
borderBottomLeftRadius: '$4',
|
||||
borderBottomLeftRadius: '$3',
|
||||
// borderBottom: '1px solid $panelBorder',
|
||||
// borderLeft: '1px solid $panelBorder',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -108,6 +108,10 @@ export const StyledRowButton = styled('button', {
|
|||
opacity: 0.3,
|
||||
},
|
||||
|
||||
[`&:focus:not(:disabled) ${StyledRowButtonInner}`]: {
|
||||
backgroundColor: '$hover',
|
||||
},
|
||||
|
||||
variants: {
|
||||
bp: {
|
||||
mobile: {},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import * as React from 'react'
|
||||
import { breakpoints } from '~components/breakpoints'
|
||||
import { Tooltip } from '~components/Tooltip'
|
||||
import styled from '~styles'
|
||||
|
||||
|
|
@ -19,11 +20,10 @@ export const ToolButton = React.forwardRef<HTMLButtonElement, ToolButtonProps>(
|
|||
variant={variant}
|
||||
onPointerDown={onSelect}
|
||||
onDoubleClick={onDoubleClick}
|
||||
bp={breakpoints}
|
||||
{...rest}
|
||||
>
|
||||
<StyledToolButtonInner isActive={isActive} variant={variant}>
|
||||
{children}
|
||||
</StyledToolButtonInner>
|
||||
<StyledToolButtonInner>{children}</StyledToolButtonInner>
|
||||
</StyledToolButton>
|
||||
)
|
||||
}
|
||||
|
|
@ -59,49 +59,15 @@ export const StyledToolButtonInner = styled('div', {
|
|||
userSelect: 'none',
|
||||
boxSizing: 'border-box',
|
||||
border: '1px solid transparent',
|
||||
|
||||
variants: {
|
||||
variant: {
|
||||
primary: {
|
||||
'& svg': {
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
},
|
||||
icon: {
|
||||
display: 'grid',
|
||||
'& > *': {
|
||||
gridRow: 1,
|
||||
gridColumn: 1,
|
||||
},
|
||||
},
|
||||
text: {
|
||||
fontSize: '$1',
|
||||
padding: '0 $3',
|
||||
},
|
||||
circle: {
|
||||
borderRadius: '100%',
|
||||
boxShadow: '$panel',
|
||||
},
|
||||
},
|
||||
isActive: {
|
||||
true: {
|
||||
backgroundColor: '$selected',
|
||||
color: '$panelActive',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const StyledToolButton = styled('button', {
|
||||
position: 'relative',
|
||||
color: '$text',
|
||||
height: '48px',
|
||||
width: '40px',
|
||||
fontSize: '$0',
|
||||
background: 'none',
|
||||
margin: '0',
|
||||
padding: '$3 $2',
|
||||
padding: '$2',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
|
@ -109,24 +75,88 @@ export const StyledToolButton = styled('button', {
|
|||
cursor: 'pointer',
|
||||
pointerEvents: 'all',
|
||||
border: 'none',
|
||||
height: '40px',
|
||||
width: '40px',
|
||||
|
||||
variants: {
|
||||
variant: {
|
||||
primary: {},
|
||||
icon: {},
|
||||
primary: {
|
||||
marginTop: '0',
|
||||
},
|
||||
icon: {
|
||||
[`& ${StyledToolButtonInner}`]: {
|
||||
display: 'grid',
|
||||
'& > *': {
|
||||
gridRow: 1,
|
||||
gridColumn: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
text: {
|
||||
width: 'auto',
|
||||
[`& ${StyledToolButtonInner}`]: {
|
||||
fontSize: '$1',
|
||||
padding: '0 $3',
|
||||
},
|
||||
},
|
||||
circle: {
|
||||
padding: '$2',
|
||||
[`& ${StyledToolButtonInner}`]: {
|
||||
borderRadius: '100%',
|
||||
boxShadow: '$panel',
|
||||
},
|
||||
[`& ${StyledToolButtonInner} > svg`]: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
},
|
||||
},
|
||||
circle: {},
|
||||
},
|
||||
isActive: {
|
||||
true: {},
|
||||
true: {
|
||||
[`${StyledToolButtonInner}`]: {
|
||||
backgroundColor: '$selected',
|
||||
color: '$panelActive',
|
||||
},
|
||||
},
|
||||
false: {
|
||||
[`&:hover:not(:disabled) ${StyledToolButtonInner}`]: {
|
||||
backgroundColor: '$hover',
|
||||
border: '1px solid $panel',
|
||||
},
|
||||
[`&:focus:not(:disabled) ${StyledToolButtonInner}`]: {
|
||||
backgroundColor: '$hover',
|
||||
},
|
||||
},
|
||||
},
|
||||
bp: {
|
||||
mobile: {},
|
||||
small: {},
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
variant: 'primary',
|
||||
bp: 'mobile',
|
||||
css: {
|
||||
height: '40px',
|
||||
width: '40px',
|
||||
[`& ${StyledToolButtonInner} > svg`]: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: 'primary',
|
||||
bp: 'small',
|
||||
css: {
|
||||
height: '44px',
|
||||
width: '44px',
|
||||
[`& ${StyledToolButtonInner} > svg`]: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@ const StyledToolsPanelContainer = styled('div', {
|
|||
gridTemplateRows: 'auto auto',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0',
|
||||
alignItems: 'flex-end',
|
||||
zIndex: 200,
|
||||
pointerEvents: 'none',
|
||||
'& > div > *': {
|
||||
|
|
@ -63,7 +62,7 @@ const StyledCenterWrap = styled('div', {
|
|||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
gap: 12,
|
||||
gap: '$4',
|
||||
})
|
||||
|
||||
const StyledStatusWrap = styled('div', {
|
||||
|
|
@ -74,5 +73,6 @@ const StyledStatusWrap = styled('div', {
|
|||
const StyledPrimaryTools = styled('div', {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '$2',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ import * as React from 'react'
|
|||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
||||
import { useTLDrawContext } from '~hooks'
|
||||
import { DashStyle, Data } from '~types'
|
||||
import { DMContent, DMRadioItem, DMTriggerIcon } from '~components/DropdownMenu'
|
||||
import { DMContent, DMTriggerIcon } from '~components/DropdownMenu'
|
||||
import { ToolButton } from '~components/ToolButton'
|
||||
import { Tooltip } from '~components/Tooltip'
|
||||
import { DashDashedIcon, DashDottedIcon, DashDrawIcon, DashSolidIcon } from '~components/icons'
|
||||
|
||||
const dashes = {
|
||||
[DashStyle.Draw]: <DashDrawIcon />,
|
||||
|
|
@ -23,7 +23,7 @@ export const DashMenu = React.memo((): JSX.Element => {
|
|||
return (
|
||||
<DropdownMenu.Root dir="ltr">
|
||||
<DMTriggerIcon>{dashes[dash]}</DMTriggerIcon>
|
||||
<DMContent>
|
||||
<DMContent variant="horizontal">
|
||||
{Object.keys(DashStyle).map((dashStyle) => (
|
||||
<ToolButton
|
||||
key={dashStyle}
|
||||
|
|
@ -39,62 +39,62 @@ export const DashMenu = React.memo((): JSX.Element => {
|
|||
)
|
||||
})
|
||||
|
||||
function DashSolidIcon(): JSX.Element {
|
||||
return (
|
||||
<svg width="24" height="24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx={12} cy={12} r={8} fill="none" strokeWidth={2} strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
// function DashSolidIcon(): JSX.Element {
|
||||
// return (
|
||||
// <svg width="24" height="24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
// <circle cx={12} cy={12} r={8} fill="none" strokeWidth={2} strokeLinecap="round" />
|
||||
// </svg>
|
||||
// )
|
||||
// }
|
||||
|
||||
function DashDashedIcon(): JSX.Element {
|
||||
return (
|
||||
<svg width="24" height="24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle
|
||||
cx={12}
|
||||
cy={12}
|
||||
r={8}
|
||||
fill="none"
|
||||
strokeWidth={2.5}
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={50.26548 * 0.1}
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
// function DashDashedIcon(): JSX.Element {
|
||||
// return (
|
||||
// <svg width="24" height="24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
// <circle
|
||||
// cx={12}
|
||||
// cy={12}
|
||||
// r={8}
|
||||
// fill="none"
|
||||
// strokeWidth={2.5}
|
||||
// strokeLinecap="round"
|
||||
// strokeDasharray={50.26548 * 0.1}
|
||||
// />
|
||||
// </svg>
|
||||
// )
|
||||
// }
|
||||
|
||||
const dottedDasharray = `${50.26548 * 0.025} ${50.26548 * 0.1}`
|
||||
// const dottedDasharray = `${50.26548 * 0.025} ${50.26548 * 0.1}`
|
||||
|
||||
function DashDottedIcon(): JSX.Element {
|
||||
return (
|
||||
<svg width="24" height="24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle
|
||||
cx={12}
|
||||
cy={12}
|
||||
r={8}
|
||||
fill="none"
|
||||
strokeWidth={2.5}
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={dottedDasharray}
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
// function DashDottedIcon(): JSX.Element {
|
||||
// return (
|
||||
// <svg width="24" height="24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
// <circle
|
||||
// cx={12}
|
||||
// cy={12}
|
||||
// r={8}
|
||||
// fill="none"
|
||||
// strokeWidth={2.5}
|
||||
// strokeLinecap="round"
|
||||
// strokeDasharray={dottedDasharray}
|
||||
// />
|
||||
// </svg>
|
||||
// )
|
||||
// }
|
||||
|
||||
function DashDrawIcon(): JSX.Element {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="1 1.5 21 22"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.0162 19.2768C10.0162 19.2768 9.90679 19.2517 9.6879 19.2017C9.46275 19.1454 9.12816 19.0422 8.68413 18.8921C8.23384 18.7358 7.81482 18.545 7.42707 18.3199C7.03307 18.101 6.62343 17.7883 6.19816 17.3818C5.77289 16.9753 5.33511 16.3718 4.88482 15.5713C4.43453 14.7645 4.1531 13.8545 4.04053 12.8414C3.92795 11.822 4.04991 10.8464 4.40639 9.91451C4.76286 8.98266 5.39452 8.10084 6.30135 7.26906C7.21444 6.44353 8.29325 5.83377 9.5378 5.43976C10.7823 5.05202 11.833 4.92068 12.6898 5.04576C13.5466 5.16459 14.3878 5.43664 15.2133 5.86191C16.0388 6.28718 16.7768 6.8688 17.4272 7.60678C18.0714 8.34475 18.5404 9.21406 18.8344 10.2147C19.1283 11.2153 19.1721 12.2598 18.9657 13.348C18.7593 14.4299 18.2872 15.4337 17.5492 16.3593C16.8112 17.2849 15.9263 18.0072 14.8944 18.5263C13.8624 19.0391 12.9056 19.3174 12.0238 19.3612C11.142 19.405 10.2101 19.2705 9.22823 18.9578C8.24635 18.6451 7.35828 18.151 6.56402 17.4756C5.77601 16.8002 6.08871 16.8658 7.50212 17.6726C8.90927 18.4731 10.1444 18.8484 11.2076 18.7983C12.2645 18.7545 13.2965 18.4825 14.3034 17.9822C15.3102 17.4819 16.1264 16.8221 16.7518 16.0028C17.3772 15.1835 17.7681 14.3111 17.9244 13.3855C18.0808 12.4599 18.0401 11.5781 17.8025 10.74C17.5586 9.902 17.1739 9.15464 16.6486 8.49797C16.1233 7.8413 15.2289 7.27844 13.9656 6.80939C12.7086 6.34034 11.4203 6.20901 10.1007 6.41539C8.78732 6.61552 7.69599 7.06893 6.82669 7.77564C5.96363 8.48859 5.34761 9.26409 4.97863 10.1021C4.60964 10.9402 4.45329 11.8376 4.50958 12.7945C4.56586 13.7513 4.79101 14.6238 5.18501 15.4118C5.57276 16.1998 5.96363 16.8002 6.35764 17.2129C6.75164 17.6257 7.13313 17.9509 7.50212 18.1886C7.87736 18.4325 8.28074 18.642 8.71227 18.8171C9.15005 18.9922 9.47839 19.111 9.69728 19.1736C9.91617 19.2361 10.0256 19.2705 10.0256 19.2768H10.0162Z"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
// function DashDrawIcon(): JSX.Element {
|
||||
// return (
|
||||
// <svg
|
||||
// width="24"
|
||||
// height="24"
|
||||
// viewBox="1 1.5 21 22"
|
||||
// fill="currentColor"
|
||||
// stroke="currentColor"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// >
|
||||
// <path
|
||||
// d="M10.0162 19.2768C10.0162 19.2768 9.90679 19.2517 9.6879 19.2017C9.46275 19.1454 9.12816 19.0422 8.68413 18.8921C8.23384 18.7358 7.81482 18.545 7.42707 18.3199C7.03307 18.101 6.62343 17.7883 6.19816 17.3818C5.77289 16.9753 5.33511 16.3718 4.88482 15.5713C4.43453 14.7645 4.1531 13.8545 4.04053 12.8414C3.92795 11.822 4.04991 10.8464 4.40639 9.91451C4.76286 8.98266 5.39452 8.10084 6.30135 7.26906C7.21444 6.44353 8.29325 5.83377 9.5378 5.43976C10.7823 5.05202 11.833 4.92068 12.6898 5.04576C13.5466 5.16459 14.3878 5.43664 15.2133 5.86191C16.0388 6.28718 16.7768 6.8688 17.4272 7.60678C18.0714 8.34475 18.5404 9.21406 18.8344 10.2147C19.1283 11.2153 19.1721 12.2598 18.9657 13.348C18.7593 14.4299 18.2872 15.4337 17.5492 16.3593C16.8112 17.2849 15.9263 18.0072 14.8944 18.5263C13.8624 19.0391 12.9056 19.3174 12.0238 19.3612C11.142 19.405 10.2101 19.2705 9.22823 18.9578C8.24635 18.6451 7.35828 18.151 6.56402 17.4756C5.77601 16.8002 6.08871 16.8658 7.50212 17.6726C8.90927 18.4731 10.1444 18.8484 11.2076 18.7983C12.2645 18.7545 13.2965 18.4825 14.3034 17.9822C15.3102 17.4819 16.1264 16.8221 16.7518 16.0028C17.3772 15.1835 17.7681 14.3111 17.9244 13.3855C18.0808 12.4599 18.0401 11.5781 17.8025 10.74C17.5586 9.902 17.1739 9.15464 16.6486 8.49797C16.1233 7.8413 15.2289 7.27844 13.9656 6.80939C12.7086 6.34034 11.4203 6.20901 10.1007 6.41539C8.78732 6.61552 7.69599 7.06893 6.82669 7.77564C5.96363 8.48859 5.34761 9.26409 4.97863 10.1021C4.60964 10.9402 4.45329 11.8376 4.50958 12.7945C4.56586 13.7513 4.79101 14.6238 5.18501 15.4118C5.57276 16.1998 5.96363 16.8002 6.35764 17.2129C6.75164 17.6257 7.13313 17.9509 7.50212 18.1886C7.87736 18.4325 8.28074 18.642 8.71227 18.8171C9.15005 18.9922 9.47839 19.111 9.69728 19.1736C9.91617 19.2361 10.0256 19.2705 10.0256 19.2768H10.0162Z"
|
||||
// strokeWidth="2"
|
||||
// />
|
||||
// </svg>
|
||||
// )
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import * as React from 'react'
|
|||
import * as Checkbox from '@radix-ui/react-checkbox'
|
||||
import { useTLDrawContext } from '~hooks'
|
||||
import type { Data } from '~types'
|
||||
import { Tooltip } from '~components/Tooltip'
|
||||
import { BoxIcon, IsFilledIcon } from '~components/icons'
|
||||
import { ToolButton } from '~components/ToolButton'
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { useTLDrawContext } from '~hooks'
|
|||
import { DMContent, DMTriggerIcon } from '~components/DropdownMenu'
|
||||
import { ToolButton } from '~components/ToolButton'
|
||||
import { SizeSmallIcon, SizeMediumIcon, SizeLargeIcon } from '~components/icons'
|
||||
import { Tooltip } from '~components/Tooltip'
|
||||
|
||||
const sizes = {
|
||||
[SizeStyle.Small]: <SizeSmallIcon />,
|
||||
|
|
@ -23,7 +22,7 @@ export const SizeMenu = React.memo((): JSX.Element => {
|
|||
return (
|
||||
<DropdownMenu.Root dir="ltr">
|
||||
<DMTriggerIcon>{sizes[size as SizeStyle]}</DMTriggerIcon>
|
||||
<DMContent>
|
||||
<DMContent variant="horizontal">
|
||||
{Object.keys(SizeStyle).map((sizeStyle: string) => (
|
||||
<ToolButton
|
||||
key={sizeStyle}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,15 @@ import * as React from 'react'
|
|||
|
||||
export function SizeLargeIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
|
||||
return (
|
||||
<svg viewBox="-4 -4 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
d="M7.68191 19C7.53525 19 7.46191 18.9267 7.46191 18.78V5H10.1219C10.2686 5 10.3419 5.07333 10.3419 5.22V16.56H13.4419V15.02H15.7619C15.9086 15.02 15.9819 15.0933 15.9819 15.24V19H7.68191Z"
|
||||
fill="black"
|
||||
/>
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="-2 -2 28 28"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path d="M7.68191 19C7.53525 19 7.46191 18.9267 7.46191 18.78V5H10.1219C10.2686 5 10.3419 5.07333 10.3419 5.22V16.56H13.4419V15.02H15.7619C15.9086 15.02 15.9819 15.0933 15.9819 15.24V19H7.68191Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,15 @@ import * as React from 'react'
|
|||
|
||||
export function SizeMediumIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
|
||||
return (
|
||||
<svg viewBox="-4 -4 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
d="M8.16191 19H5.68191C5.53525 19 5.46191 18.9267 5.46191 18.78V5H8.76191C8.88191 5 8.97525 5.03333 9.04191 5.1C9.10858 5.15333 9.17525 5.27333 9.24191 5.46C9.72191 6.59333 10.1686 7.7 10.5819 8.78C11.0086 9.84667 11.4352 10.98 11.8619 12.18H12.1619C12.6019 10.9667 13.0352 9.79333 13.4619 8.66C13.8886 7.52667 14.3552 6.30667 14.8619 5H18.3219C18.4686 5 18.5419 5.07333 18.5419 5.22V19H16.0619C15.9152 19 15.8419 18.9267 15.8419 18.78V16.26C15.8419 15.5267 15.8486 14.8133 15.8619 14.12C15.8886 13.4267 15.9286 12.6867 15.9819 11.9C16.0486 11.1 16.1419 10.1933 16.2619 9.18H15.9019C15.4352 10.3533 14.9486 11.5667 14.4419 12.82C13.9486 14.06 13.4819 15.2333 13.0419 16.34H11.1019C11.0619 16.34 11.0152 16.3333 10.9619 16.32C10.9219 16.2933 10.8886 16.2467 10.8619 16.18C10.4619 15.18 10.0086 14.06 9.50191 12.82C9.00858 11.58 8.53525 10.3667 8.08191 9.18H7.70191C7.83525 10.18 7.93525 11.0733 8.00191 11.86C8.06858 12.6467 8.10858 13.3933 8.12191 14.1C8.14858 14.8067 8.16191 15.5267 8.16191 16.26V19Z"
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="-2 -2 28 28"
|
||||
fill="currentColor"
|
||||
/>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path d="M8.16191 19H5.68191C5.53525 19 5.46191 18.9267 5.46191 18.78V5H8.76191C8.88191 5 8.97525 5.03333 9.04191 5.1C9.10858 5.15333 9.17525 5.27333 9.24191 5.46C9.72191 6.59333 10.1686 7.7 10.5819 8.78C11.0086 9.84667 11.4352 10.98 11.8619 12.18H12.1619C12.6019 10.9667 13.0352 9.79333 13.4619 8.66C13.8886 7.52667 14.3552 6.30667 14.8619 5H18.3219C18.4686 5 18.5419 5.07333 18.5419 5.22V19H16.0619C15.9152 19 15.8419 18.9267 15.8419 18.78V16.26C15.8419 15.5267 15.8486 14.8133 15.8619 14.12C15.8886 13.4267 15.9286 12.6867 15.9819 11.9C16.0486 11.1 16.1419 10.1933 16.2619 9.18H15.9019C15.4352 10.3533 14.9486 11.5667 14.4419 12.82C13.9486 14.06 13.4819 15.2333 13.0419 16.34H11.1019C11.0619 16.34 11.0152 16.3333 10.9619 16.32C10.9219 16.2933 10.8886 16.2467 10.8619 16.18C10.4619 15.18 10.0086 14.06 9.50191 12.82C9.00858 11.58 8.53525 10.3667 8.08191 9.18H7.70191C7.83525 10.18 7.93525 11.0733 8.00191 11.86C8.06858 12.6467 8.10858 13.3933 8.12191 14.1C8.14858 14.8067 8.16191 15.5267 8.16191 16.26V19Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,15 @@ import * as React from 'react'
|
|||
|
||||
export function SizeSmallIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
|
||||
return (
|
||||
<svg viewBox="-4 -4 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
d="M12.4239 4.62C13.3572 4.62 14.1572 4.73333 14.8239 4.96C15.4906 5.17333 15.9772 5.43333 16.2839 5.74C16.3639 5.82 16.4039 5.94 16.4039 6.1V8.86H14.0639C13.9172 8.86 13.8439 8.78666 13.8439 8.64V7.26C13.4306 7.12666 12.9572 7.06 12.4239 7.06C11.6506 7.06 11.0639 7.18 10.6639 7.42C10.2639 7.66 10.0639 8.04666 10.0639 8.58V9C10.0639 9.38666 10.1639 9.69333 10.3639 9.92C10.5772 10.1333 11.0306 10.3467 11.7239 10.56L13.6439 11.14C14.4706 11.38 15.1172 11.66 15.5839 11.98C16.0506 12.3 16.3772 12.68 16.5639 13.12C16.7639 13.5467 16.8639 14.0733 16.8639 14.7V15.62C16.8639 16.7933 16.4039 17.7133 15.4839 18.38C14.5639 19.0467 13.2839 19.38 11.6439 19.38C10.6706 19.38 9.79723 19.2867 9.0239 19.1C8.2639 18.9133 7.71056 18.6533 7.3639 18.32C7.3239 18.28 7.29056 18.24 7.2639 18.2C7.25056 18.1467 7.2439 18.06 7.2439 17.94V15.74H7.6239C8.2239 16.1533 8.85056 16.4533 9.5039 16.64C10.1572 16.8267 10.9306 16.92 11.8239 16.92C12.6506 16.92 13.2506 16.7867 13.6239 16.52C14.0106 16.2533 14.2039 15.9333 14.2039 15.56V14.88C14.2039 14.6667 14.1639 14.48 14.0839 14.32C14.0172 14.16 13.8706 14.0133 13.6439 13.88C13.4172 13.7467 13.0572 13.6067 12.5639 13.46L10.6639 12.88C9.7839 12.6133 9.11056 12.3 8.6439 11.94C8.17723 11.58 7.85056 11.18 7.6639 10.74C7.49056 10.3 7.4039 9.83333 7.4039 9.34V8.38C7.4039 7.64666 7.61056 7 8.0239 6.44C8.43723 5.88 9.01723 5.44 9.7639 5.12C10.5239 4.78666 11.4106 4.62 12.4239 4.62Z"
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="-2 -2 28 28"
|
||||
fill="currentColor"
|
||||
/>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path d="M12.4239 4.62C13.3572 4.62 14.1572 4.73333 14.8239 4.96C15.4906 5.17333 15.9772 5.43333 16.2839 5.74C16.3639 5.82 16.4039 5.94 16.4039 6.1V8.86H14.0639C13.9172 8.86 13.8439 8.78666 13.8439 8.64V7.26C13.4306 7.12666 12.9572 7.06 12.4239 7.06C11.6506 7.06 11.0639 7.18 10.6639 7.42C10.2639 7.66 10.0639 8.04666 10.0639 8.58V9C10.0639 9.38666 10.1639 9.69333 10.3639 9.92C10.5772 10.1333 11.0306 10.3467 11.7239 10.56L13.6439 11.14C14.4706 11.38 15.1172 11.66 15.5839 11.98C16.0506 12.3 16.3772 12.68 16.5639 13.12C16.7639 13.5467 16.8639 14.0733 16.8639 14.7V15.62C16.8639 16.7933 16.4039 17.7133 15.4839 18.38C14.5639 19.0467 13.2839 19.38 11.6439 19.38C10.6706 19.38 9.79723 19.2867 9.0239 19.1C8.2639 18.9133 7.71056 18.6533 7.3639 18.32C7.3239 18.28 7.29056 18.24 7.2639 18.2C7.25056 18.1467 7.2439 18.06 7.2439 17.94V15.74H7.6239C8.2239 16.1533 8.85056 16.4533 9.5039 16.64C10.1572 16.8267 10.9306 16.92 11.8239 16.92C12.6506 16.92 13.2506 16.7867 13.6239 16.52C14.0106 16.2533 14.2039 15.9333 14.2039 15.56V14.88C14.2039 14.6667 14.1639 14.48 14.0839 14.32C14.0172 14.16 13.8706 14.0133 13.6439 13.88C13.4172 13.7467 13.0572 13.6067 12.5639 13.46L10.6639 12.88C9.7839 12.6133 9.11056 12.3 8.6439 11.94C8.17723 11.58 7.85056 11.18 7.6639 10.74C7.49056 10.3 7.4039 9.83333 7.4039 9.34V8.38C7.4039 7.64666 7.61056 7 8.0239 6.44C8.43723 5.88 9.01723 5.44 9.7639 5.12C10.5239 4.78666 11.4106 4.62 12.4239 4.62Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue