acid-info
/
lsd
mirror of https://github.com/acid-info/lsd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: implement icon components

This commit is contained in:
Hossein Mehrabi 2023-02-13 13:20:28 +03:30
parent a6b437f26f
commit 87956f78af
41 changed files with 463 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
View File

@ -1,10 +1,11 @@
import { Global, SerializedStyles } from '@emotion/react'
import React, { useMemo } from 'react'
import { ButtonStyles } from '../Button/Button.styles'
import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles'
import { defaultThemes, Theme, withTheme } from '../Theme'
const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
[ButtonStyles]
[ButtonStyles, LsdIconStyles]
export const CSSBaseline: React.FC<{ theme?: Theme }> = ({
theme = defaultThemes.light,

17
packages/lsd-react/src/components/Icons/AddIcon/AddIcon.tsx Normal file
View File

@ -0,0 +1,17 @@
import { LsdIcon } from '../LsdIcon'
export const AddIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M11.6666 7.58334H7.58325V11.6667H6.41659V7.58334H2.33325V6.41668H6.41659V2.33334H7.58325V6.41668H11.6666V7.58334Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/AddIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './AddIcon'

22
packages/lsd-react/src/components/Icons/ArrowDownIcon/ArrowDownIcon.tsx Normal file
View File

@ -0,0 +1,22 @@
import { LsdIcon } from '../LsdIcon'
export const ArrowDownIcon = LsdIcon(
(props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M10.5 5.66125L9.6775 4.83875L7 7.51041L4.3225 4.83874L3.5 5.66125L7 9.16125L10.5 5.66125Z"
fill="black"
/>
</svg>
),
{
filled: true,
},
)

1
packages/lsd-react/src/components/Icons/ArrowDownIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './ArrowDownIcon'

17
packages/lsd-react/src/components/Icons/ArrowForwardIcon/ArrowForwardIcon.tsx Normal file
View File

@ -0,0 +1,17 @@
import { LsdIcon } from '../LsdIcon'
export const ArrowForwardIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M6.99992 2.33334L6.17742 3.15584L9.43242 6.41668H2.33325V7.58334H9.43242L6.17742 10.8442L6.99992 11.6667L11.6666 7.00001L6.99992 2.33334Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/ArrowForwardIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './ArrowForwardIcon'

22
packages/lsd-react/src/components/Icons/ArrowUpIcon/ArrowUpIcon.tsx Normal file
View File

@ -0,0 +1,22 @@
import { LsdIcon } from '../LsdIcon'
export const ArrowUpIcon = LsdIcon(
(props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M3.5 8.33875L4.3225 9.16125L7 6.48959L9.6775 9.16125L10.5 8.33875L7 4.83875L3.5 8.33875Z"
fill="black"
/>
</svg>
),
{
filled: true,
},
)

1
packages/lsd-react/src/components/Icons/ArrowUpIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './ArrowUpIcon'

17
packages/lsd-react/src/components/Icons/CheckIcon/CheckIcon.tsx Normal file
View File

@ -0,0 +1,17 @@
import { LsdIcon } from '../LsdIcon'
export const CheckIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M11.0833 2.91667V11.0833H2.91667V2.91667H11.0833ZM11.0833 1.75H2.91667C2.275 1.75 1.75 2.275 1.75 2.91667V11.0833C1.75 11.725 2.275 12.25 2.91667 12.25H11.0833C11.725 12.25 12.25 11.725 12.25 11.0833V2.91667C12.25 2.275 11.725 1.75 11.0833 1.75Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/CheckIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './CheckIcon'

24
packages/lsd-react/src/components/Icons/CheckboxFilledIcon/CheckboxFilledIcon.tsx Normal file
View File

@ -0,0 +1,24 @@
import { LsdIcon } from '../LsdIcon'
export const CheckboxFilledIcon = LsdIcon(
(props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2.91667 1.75H11.0833C11.725 1.75 12.25 2.275 12.25 2.91667V11.0833C12.25 11.725 11.725 12.25 11.0833 12.25H2.91667C2.275 12.25 1.75 11.725 1.75 11.0833V2.91667C1.75 2.275 2.275 1.75 2.91667 1.75ZM9.68333 4.43333L10.5 5.25L5.83333 9.91667L3.5 7.58333L4.31667 6.76667L5.83333 8.28333L9.68333 4.43333Z"
fill="black"
/>
</svg>
),
{
filled: true,
},
)

1
packages/lsd-react/src/components/Icons/CheckboxFilledIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './CheckboxFilledIcon'

22
packages/lsd-react/src/components/Icons/CheckboxIcon/CheckboxIcon.tsx Normal file
View File

@ -0,0 +1,22 @@
import { LsdIcon } from '../LsdIcon'
export const CheckboxIcon = LsdIcon(
(props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M11.0833 2.91667V11.0833H2.91667V2.91667H11.0833ZM11.0833 1.75H2.91667C2.275 1.75 1.75 2.275 1.75 2.91667V11.0833C1.75 11.725 2.275 12.25 2.91667 12.25H11.0833C11.725 12.25 12.25 11.725 12.25 11.0833V2.91667C12.25 2.275 11.725 1.75 11.0833 1.75Z"
fill="black"
/>
</svg>
),
{
filled: true,
},
)

1
packages/lsd-react/src/components/Icons/CheckboxIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './CheckboxIcon'

17
packages/lsd-react/src/components/Icons/CloseIcon/CloseIcon.tsx Normal file
View File

@ -0,0 +1,17 @@
import { LsdIcon } from '../LsdIcon'
export const CloseIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M11.0834 3.73916L10.2609 2.91666L7.00008 6.17749L3.73925 2.91666L2.91675 3.73916L6.17758 6.99999L2.91675 10.2608L3.73925 11.0833L7.00008 7.82249L10.2609 11.0833L11.0834 10.2608L7.82258 6.99999L11.0834 3.73916Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/CloseIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './CloseIcon'

24
packages/lsd-react/src/components/Icons/ErrorIcon/ErrorIcon.tsx Normal file
View File

@ -0,0 +1,24 @@
import { LsdIcon } from '../LsdIcon'
export const ErrorIcon = LsdIcon(
(props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.00008 1.16666C3.78008 1.16666 1.16675 3.77999 1.16675 6.99999C1.16675 10.22 3.78008 12.8333 7.00008 12.8333C10.2201 12.8333 12.8334 10.22 12.8334 6.99999C12.8334 3.77999 10.2201 1.16666 7.00008 1.16666ZM6.41675 9.91666V8.74999H7.58342V9.91666H6.41675ZM6.41675 4.08332V7.58332H7.58342V4.08332H6.41675Z"
fill="black"
/>
</svg>
),
{
filled: true,
},
)

1
packages/lsd-react/src/components/Icons/ErrorIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './ErrorIcon'

17
packages/lsd-react/src/components/Icons/FolderIcon/FolderIcon.tsx Normal file
View File

@ -0,0 +1,17 @@
import { LsdIcon } from '../LsdIcon'
export const FolderIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M5.34925 3.50001L6.51591 4.66668H11.6667V10.5H2.33341V3.50001H5.34925ZM5.83341 2.33334H2.33341C1.69175 2.33334 1.17258 2.85834 1.17258 3.50001L1.16675 10.5C1.16675 11.1417 1.69175 11.6667 2.33341 11.6667H11.6667C12.3084 11.6667 12.8334 11.1417 12.8334 10.5V4.66668C12.8334 4.02501 12.3084 3.50001 11.6667 3.50001H7.00008L5.83341 2.33334Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/FolderIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './FolderIcon'

17
packages/lsd-react/src/components/Icons/KeyboardReturnIcon/KeyboardReturnIcon.tsx Normal file
View File

@ -0,0 +1,17 @@
import { LsdIcon } from '../LsdIcon'
export const KeyboardReturnIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M11.0833 4.08333V6.41667H3.98417L6.0725 4.3225L5.25 3.5L1.75 7L5.25 10.5L6.0725 9.6775L3.98417 7.58333H12.25V4.08333H11.0833Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/KeyboardReturnIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './KeyboardReturnIcon'

8
packages/lsd-react/src/components/Icons/LsdIcon/LsdIcon.classes.ts Normal file
View File

@ -0,0 +1,8 @@
export const lsdIconClasses = {
root: 'lsd-icon',
small: 'lsd-icon--small',
filled: 'lsd-icon--filled',
stroked: 'lsd-icon--stroked',
primary: 'lsd-icon--primary',
secondary: 'lsd-icon--secondary',
}

39
packages/lsd-react/src/components/Icons/LsdIcon/LsdIcon.styles.ts Normal file
View File

@ -0,0 +1,39 @@
import { css } from '@emotion/react'
import { lsdIconClasses } from './LsdIcon.classes'
export const LsdIconStyles = css`
.${lsdIconClasses.root} {
}
.${lsdIconClasses.primary} {
&.${lsdIconClasses.filled} {
&,
* {
fill: rgb(var(--lsd-icon-primary));
}
}
$.${lsdIconClasses.stroked} {
&,
* {
fill: rgb(var(--lsd-icon-primary));
}
}
}
.${lsdIconClasses.secondary} {
&.${lsdIconClasses.filled} {
&,
* {
fill: rgb(var(--lsd-icon-secondary));
}
}
$.${lsdIconClasses.stroked} {
&,
* {
fill: rgb(var(--lsd-icon-secondary));
}
}
}
`

46
packages/lsd-react/src/components/Icons/LsdIcon/LsdIcon.tsx Normal file
View File

@ -0,0 +1,46 @@
import clsx from 'clsx'
import React from 'react'
import { lsdIconClasses } from './LsdIcon.classes'
export type LsdIconProps = React.SVGAttributes<SVGElement> & {
size?: 'small'
color?: 'primary' | 'secondary'
}
type LsdIconComponent = React.FC<LsdIconProps> & {
classes: typeof lsdIconClasses
}
export const LsdIcon = (
Component: React.ComponentType<React.SVGAttributes<SVGElement>>,
metadata?: {
filled?: boolean
stroked?: boolean
},
): LsdIconComponent => {
const IconComponent: LsdIconComponent = ({
color,
size = 'small',
className,
...props
}) => {
return (
<Component
className={clsx(
className,
lsdIconClasses.root,
lsdIconClasses[size],
color && lsdIconClasses[color],
metadata?.filled && lsdIconClasses.filled,
metadata?.stroked && lsdIconClasses.stroked,
)}
{...props}
/>
)
}
IconComponent.displayName = Component.displayName
IconComponent.classes = lsdIconClasses
return IconComponent
}

1
packages/lsd-react/src/components/Icons/LsdIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './LsdIcon'

24
packages/lsd-react/src/components/Icons/MenuIcon/MenuIcon.tsx Normal file
View File

@ -0,0 +1,24 @@
import { LsdIcon } from '../LsdIcon'
export const MenuIcon = LsdIcon(
(props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.75 4.66667V3.5H12.25V4.66667H1.75ZM1.75 7.58333H12.25V6.41667H1.75V7.58333ZM1.75 10.5H12.25V9.33333H1.75V10.5Z"
fill="black"
/>
</svg>
),
{
filled: true,
},
)

1
packages/lsd-react/src/components/Icons/MenuIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './MenuIcon'

19
packages/lsd-react/src/components/Icons/MoreIcon/MoreIcon.tsx Normal file
View File

@ -0,0 +1,19 @@
import { LsdIcon } from '../LsdIcon'
export const MoreIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.49992 5.83334C2.85825 5.83334 2.33325 6.35834 2.33325 7.00001C2.33325 7.64168 2.85825 8.16668 3.49992 8.16668C4.14159 8.16668 4.66659 7.64168 4.66659 7.00001C4.66659 6.35834 4.14159 5.83334 3.49992 5.83334ZM10.4999 5.83334C9.85825 5.83334 9.33325 6.35834 9.33325 7.00001C9.33325 7.64168 9.85825 8.16668 10.4999 8.16668C11.1416 8.16668 11.6666 7.64168 11.6666 7.00001C11.6666 6.35834 11.1416 5.83334 10.4999 5.83334ZM5.83325 7.00001C5.83325 6.35834 6.35825 5.83334 6.99992 5.83334C7.64159 5.83334 8.16659 6.35834 8.16659 7.00001C8.16659 7.64168 7.64159 8.16668 6.99992 8.16668C6.35825 8.16668 5.83325 7.64168 5.83325 7.00001Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/MoreIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './MoreIcon'

17
packages/lsd-react/src/components/Icons/NavigateBeforeIcon/NavigateBeforeIcon.tsx Normal file
View File

@ -0,0 +1,17 @@
import { LsdIcon } from '../LsdIcon'
export const NavigateBeforeIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M9.16137 4.3225L8.33887 3.5L4.83887 7L8.33887 10.5L9.16137 9.6775L6.4897 7L9.16137 4.3225Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/NavigateBeforeIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './NavigateBeforeIcon'

17
packages/lsd-react/src/components/Icons/NavigateNextIcon/NavigateNextIcon.tsx Normal file
View File

@ -0,0 +1,17 @@
import { LsdIcon } from '../LsdIcon'
export const NavigateNextIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M5.66137 3.5L4.83887 4.3225L7.51053 7L4.83887 9.6775L5.66137 10.5L9.16137 7L5.66137 3.5Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/NavigateNextIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './NavigateNextIcon'

19
packages/lsd-react/src/components/Icons/NewPageIcon/NewPageIcon.tsx Normal file
View File

@ -0,0 +1,19 @@
import { LsdIcon } from '../LsdIcon'
export const NewPageIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.79293 3.5H3.00004V2.5H11.5V11H10.5V4.20711L3.35359 11.3536L2.64648 10.6464L9.79293 3.5Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/NewPageIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './NewPageIcon'

19
packages/lsd-react/src/components/Icons/SearchIcon/SearchIcon.tsx Normal file
View File

@ -0,0 +1,19 @@
import { LsdIcon } from '../LsdIcon'
export const SearchIcon = LsdIcon((props) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.61 7.74083L11.9525 11.0833L11.0833 11.9525L7.74083 8.61C7.11667 9.05917 6.36417 9.33333 5.54167 9.33333C3.4475 9.33333 1.75 7.63583 1.75 5.54167C1.75 3.4475 3.4475 1.75 5.54167 1.75C7.63583 1.75 9.33333 3.4475 9.33333 5.54167C9.33333 6.36417 9.05917 7.11667 8.61 7.74083ZM5.54167 2.91667C4.08917 2.91667 2.91667 4.08917 2.91667 5.54167C2.91667 6.99417 4.08917 8.16667 5.54167 8.16667C6.99417 8.16667 8.16667 6.99417 8.16667 5.54167C8.16667 4.08917 6.99417 2.91667 5.54167 2.91667Z"
fill="black"
/>
</svg>
))

1
packages/lsd-react/src/components/Icons/SearchIcon/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './SearchIcon'

18
packages/lsd-react/src/components/Icons/index.ts Normal file
View File

@ -0,0 +1,18 @@
export * from './AddIcon'
export * from './ArrowDownIcon'
export * from './ArrowForwardIcon'
export * from './ArrowUpIcon'
export * from './CheckboxFilledIcon'
export * from './CheckboxIcon'
export * from './CheckIcon'
export * from './CloseIcon'
export * from './ErrorIcon'
export * from './FolderIcon'
export * from './KeyboardReturnIcon'
export * from './LsdIcon'
export * from './MenuIcon'
export * from './MoreIcon'
export * from './NavigateBeforeIcon'
export * from './NavigateNextIcon'
export * from './NewPageIcon'
export * from './SearchIcon'

1
packages/lsd-react/src/index.ts
View File

@ -1,2 +1,3 @@
export * from './components/Button'
export * from './components/Icons'
export * from './components/Theme'