kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-29 12:45:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: use zeit-icons instead of svg icons

Browse Source
This commit is contained in:
unix
2020-04-27 16:13:29 +08:00
parent 51d0f57a24
commit 2cf5dd9572
17 changed files with 48 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
lib/components/icons/arrow.tsx
View File

@@ -1,30 +0,0 @@
import React from 'react'
import { useTheme } from 'components/index'
export interface ArrowProps {
rotate?: number
}
export const ArrowIcon: React.FC<ArrowProps> = React.memo(({ rotate }) => {
const theme = useTheme()
return (
<svg viewBox="0 0 24 24"
width="14" height="14"
stroke={theme.palette.accents_5}
strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"
shapeRendering="geometricPrecision"
className="arrow"
>
<path d="M9 18l6-6-6-6" />
<style jsx>{`
.arrow {
color: ${theme.palette.accents_5};
transition: all .2s ease-in-out;
transform: rotate(${rotate}deg);
}
`}</style>
</svg>
)
})
export default ArrowIcon

42
lib/components/icons/copy.tsx
View File

@@ -1,42 +0,0 @@
import React from 'react'
import withDefaults from 'components/utils/with-defaults'
import useTheme from 'components/styles/use-theme'
interface Props {
width: number
height: number
}
const defaultProps = {
width: 20,
height: 20,
}
export type CopyIconProps = Props & typeof defaultProps & React.SVGAttributes<any>
const CopyIcon: React.FC<CopyIconProps> = React.memo(({
width, height, ...props
}) => {
const theme = useTheme()
return (
<svg {...props} viewBox="0 0 24 24" width={width} height={height} strokeWidth="1.5"
strokeLinecap="round" strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision">
<path d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z"/>
<style jsx>{`
svg {
color: ${theme.palette.accents_5};
stroke: ${theme.palette.accents_5};
padding: 5px 10px;
transition: all .2s ease;
}
svg:hover {
color: ${theme.palette.accents_3};
stroke: ${theme.palette.accents_3};
}
`}</style>
</svg>
)
})
export default withDefaults(CopyIcon, defaultProps)

28
lib/components/icons/full-screen-close.tsx
View File

@@ -1,28 +0,0 @@
import React from 'react'
import withDefaults from 'components/utils/with-defaults'
interface Props {
width: number
height: number
}
const defaultProps = {
width: 20,
height: 20,
}
export type FullScreenCloseIconProps = Props & typeof defaultProps & React.SVGAttributes<any>
const FullScreenCloseIcon: React.FC<React.PropsWithChildren<FullScreenCloseIconProps>> = ({
width, height, ...props
}) => {
return (
<svg viewBox="0 0 24 24" width={width} height={height} {...props} stroke="currentColor" strokeWidth="1.5"
strokeLinecap="round" strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision"
style={{ color: 'currentColor' }}>
<path d="M4 14h6m0 0v6m0-6l-7 7m17-11h-6m0 0V4m0 6l7-7m-7 17v-6m0 0h6m-6 0l7 7M10 4v6m0 0H4m6 0L3 3"/>
</svg>
)
}
export default withDefaults(FullScreenCloseIcon, defaultProps)

27
lib/components/icons/full-screen.tsx
View File

@@ -1,27 +0,0 @@
import React from 'react'
import withDefaults from 'components/utils/with-defaults'
interface Props {
width: number
height: number
}
const defaultProps = {
width: 20,
height: 20,
}
export type FullScreenIconProps = Props & typeof defaultProps & React.SVGAttributes<any>
const FullScreenIcon: React.FC<React.PropsWithChildren<FullScreenIconProps>> = ({
width, height, ...props
}) => {
return (
<svg viewBox="0 0 24 24" width={width} height={height} {...props} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision" style={{ color: 'currentColor' }}>
<path d="M15 3h6m0 0v6m0-6l-7 7M9 21H3m0 0v-6m0 6l7-7M3 9V3m0 0h6M3 3l7 7m11 5v6m0 0h-6m6 0l-7-7"/>
</svg>
)
}
export default withDefaults(FullScreenIcon, defaultProps)

32
lib/components/icons/github.tsx
View File

@@ -1,32 +0,0 @@
import React from 'react'
import withDefaults from 'components/utils/with-defaults'
import useTheme from 'components/styles/use-theme'
interface Props {
width: number
height: number
}
const defaultProps = {
width: 24,
height: 24,
}
export type SunIconProps = Props & typeof defaultProps
const SunIcon: React.FC<SunIconProps> = React.memo(({
width, height, ...props
}) => {
const theme = useTheme()
return (
<svg width={width} height={height} {...props}
viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5"
strokeLinecap="round" strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision"
style={{ color: theme.palette.accents_5 }}>
<path
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22" />
</svg>
)
})
export default withDefaults(SunIcon, defaultProps)

31
lib/components/icons/moon.tsx
View File

@@ -1,31 +0,0 @@
import React from 'react'
import withDefaults from 'components/utils/with-defaults'
import useTheme from 'components/styles/use-theme'
interface Props {
width: number
height: number
}
const defaultProps = {
width: 24,
height: 24,
}
export type MoonIconProps = Props & typeof defaultProps
const MoonIcon: React.FC<MoonIconProps> = React.memo(({
width, height, ...props
}) => {
const theme = useTheme()
return (
<svg {...props} width={width} height={height}
viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5"
strokeLinecap="round" strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision"
style={{ color: theme.palette.accents_5 }}>
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg>
)
})
export default withDefaults(MoonIcon, defaultProps)

31
lib/components/icons/react.tsx
View File

File diff suppressed because one or more lines are too long

44
lib/components/icons/refresh.tsx
View File

@@ -1,44 +0,0 @@
import React from 'react'
import withDefaults from 'components/utils/with-defaults'
import useTheme from 'components/styles/use-theme'
interface Props {
width: number
height: number
}
const defaultProps = {
width: 16,
height: 16,
}
export type RefreshIconProps = Props & typeof defaultProps & React.SVGAttributes<any>
const RefreshIcon: React.FC<RefreshIconProps> = React.memo(({
width, height, ...props
}) => {
const theme = useTheme()
return (
<svg {...props} viewBox="0 0 24 24" width={width} height={height} stroke={theme.palette.accents_5}
strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"
shapeRendering="geometricPrecision">
<path d="M23 4v6h-6" />
<path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/>
<style jsx>{`
svg {
color: ${theme.palette.accents_5};
stroke: ${theme.palette.accents_5};
padding: 5px 10px;
transition: all .2s ease;
}
svg:hover {
color: ${theme.palette.accents_3};
stroke: ${theme.palette.accents_3};
}
`}</style>
</svg>
)
})
export default withDefaults(RefreshIcon, defaultProps)

37
lib/components/icons/right.tsx
View File

@@ -1,37 +0,0 @@
import React from 'react'
import withDefaults from 'components/utils/with-defaults'
import useTheme from 'components/styles/use-theme'
interface Props {
width: number
height: number
active?: boolean
}
const defaultProps = {
width: 14,
height: 14,
active: false
}
export type RightIconProps = Props & typeof defaultProps
const RightIcon: React.FC<RightIconProps> = React.memo(({
width, height, active, ...props
}) => {
const theme = useTheme()
return (
<svg {...props} viewBox="0 0 24 24" width={width} height={height} stroke={theme.palette.accents_5} strokeWidth="1.5" strokeLinecap="round"
strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision" style={{ color: theme.palette.accents_5 }}>
<path d="M9 18l6-6-6-6" />
<style jsx>{`
svg {
transition: all .2s ease;
transform: rotate(${active ? 90 : 0}deg);
}
`}</style>
</svg>
)
})
export default withDefaults(RightIcon, defaultProps)

40
lib/components/icons/sun.tsx
View File

@@ -1,40 +0,0 @@
import React from 'react'
import withDefaults from 'components/utils/with-defaults'
import useTheme from 'components/styles/use-theme'
interface Props {
width: number
height: number
}
const defaultProps = {
width: 24,
height: 24,
}
export type SunIconProps = Props & typeof defaultProps
const SunIcon: React.FC<SunIconProps> = React.memo(({
width, height, ...props
}) => {
const theme = useTheme()
return (
<svg {...props} width={width} height={height}
viewBox="0 0 24 24" stroke="currentColor"
strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
fill="none" shapeRendering="geometricPrecision"
style={{ color: theme.palette.accents_5 }}>
<circle cx="12" cy="12" r="5" />
<path d="M12 1v2" />
<path d="M12 21v2" />
<path d="M4.22 4.22l1.42 1.42" />
<path d="M18.36 18.36l1.42 1.42" />
<path d="M1 12h2" />
<path d="M21 12h2" />
<path d="M4.22 19.78l1.42-1.42" />
<path d="M18.36 5.64l1.42-1.42" />
</svg>
)
})
export default withDefaults(SunIcon, defaultProps)

45
lib/components/icons/toggle.tsx
View File

@@ -1,45 +0,0 @@
import React from 'react'
import withDefaults from 'components/utils/with-defaults'
import useTheme from 'components/styles/use-theme'
interface Props {
width?: number
height?: number
color?: string
}
const defaultProps = {
width: 15,
height: 15,
}
export type ToggleIconProps = Props & typeof defaultProps & React.SVGAttributes<any>
const ToggleIcon: React.FC<ToggleIconProps> = React.memo(({
width, height, color, ...props
}) => {
const theme = useTheme()
return (
<svg width={width} height={height} {...props} viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5"
strokeLinecap="round" strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision"
className="bar-toggle">
<path d="M4 21v-7" />
<path d="M4 10V3" />
<path d="M12 21v-9" />
<path d="M12 8V3" />
<path d="M20 21v-5" />
<path d="M20 12V3" />
<path d="M1 14h6" />
<path d="M9 8h6" />
<path d="M17 16h6" />
<style jsx>{`
svg {
color: ${color || theme.palette.foreground};
}
`}</style>
</svg>
)
})
export default withDefaults(ToggleIcon, defaultProps)

40
lib/components/icons/zeit.tsx
View File

@@ -1,40 +0,0 @@
import React from 'react'
import withDefaults from 'components/utils/with-defaults'
import useTheme from 'components/styles/use-theme'
interface Props {
width: number
height: number
}
const defaultProps = {
width: 24,
height: 24,
}
export type ZEITIconProps = Props & typeof defaultProps
const ZEITIcon: React.FC<ZEITIconProps> = React.memo(({
width, height, ...props
}) => {
const theme = useTheme()
return (
<svg viewBox="0 0 226 200" aria-label="zeit" {...props}>
<defs>
<linearGradient x1="196.572%" y1="228.815%" x2="50%" y2="50%" id="logo-119">
<stop offset="0%" stopColor={theme.palette.background} />
<stop offset="100%" stopColor={theme.palette.foreground} />
</linearGradient>
</defs>
<path fill="url(#logo-119)" d="M254 156.46L367 356H141z" transform="translate(-141 -156)" />
<style jsx>{`
svg {
width: ${width}px;
height: ${height}px;
}
`}</style>
</svg>
)
})
export default withDefaults(ZEITIcon, defaultProps)