diff --git a/package.json b/package.json index d5a010e..968f06e 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,6 @@ }, "dependencies": { "@babel/runtime": "^7", - "polished": "^4", "react-layout-kit": "^1" }, "devDependencies": { diff --git a/src/ChatGLM/components/Avatar.tsx b/src/ChatGLM/components/Avatar.tsx new file mode 100644 index 0000000..e3f3b1e --- /dev/null +++ b/src/ChatGLM/components/Avatar.tsx @@ -0,0 +1,17 @@ +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; + +import { COLOR_PRIMARY } from '../style'; +import Mono from './Mono'; + +const Avatar = memo(({ size = 24, style, background, ...rest }) => { + const bg = background || COLOR_PRIMARY; + return ( + + + + ); +}); + +export default Avatar; diff --git a/src/ChatGLM/components/Color.tsx b/src/ChatGLM/components/Color.tsx new file mode 100644 index 0000000..575707c --- /dev/null +++ b/src/ChatGLM/components/Color.tsx @@ -0,0 +1,31 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/ChatGLM/components/Combine.tsx b/src/ChatGLM/components/Combine.tsx new file mode 100644 index 0000000..00b4497 --- /dev/null +++ b/src/ChatGLM/components/Combine.tsx @@ -0,0 +1,24 @@ +import { memo } from 'react'; +import { Flexbox, type FlexboxProps } from 'react-layout-kit'; + +import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style'; +import Color from './Color'; +import Mono from './Mono'; +import Text from './Text'; + +export interface CombineProps extends FlexboxProps { + size?: number; + type?: 'color' | 'mono'; +} +const Combine = memo(({ type = 'mono', size = 24, ...rest }) => { + const Icon = type === 'color' ? Color : Mono; + + return ( + + + + + ); +}); + +export default Combine; diff --git a/src/ChatGLM/components/Mono.tsx b/src/ChatGLM/components/Mono.tsx new file mode 100644 index 0000000..797f134 --- /dev/null +++ b/src/ChatGLM/components/Mono.tsx @@ -0,0 +1,23 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/ChatGLM/components/Text.tsx b/src/ChatGLM/components/Text.tsx new file mode 100644 index 0000000..e92cda2 --- /dev/null +++ b/src/ChatGLM/components/Text.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/ChatGLM/index.md b/src/ChatGLM/index.md new file mode 100644 index 0000000..70ea843 --- /dev/null +++ b/src/ChatGLM/index.md @@ -0,0 +1,68 @@ +--- +nav: Components +group: Icons +title: ChatGLM +--- + +## Icons + +```tsx +import { ChatGLM } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Text + +```tsx +import { ChatGLM } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { ChatGLM } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { ChatGLM } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +/** + * inline: true + */ +import { ChatGLM } from '@lobehub/icons'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ; +``` diff --git a/src/ChatGLM/index.ts b/src/ChatGLM/index.ts new file mode 100644 index 0000000..8e82191 --- /dev/null +++ b/src/ChatGLM/index.ts @@ -0,0 +1,24 @@ +import Avatar from './components/Avatar'; +import Color from './components/Color'; +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_PRIMARY } from './style'; + +type CompoundedComponent = typeof Mono & { + Avatar: typeof Avatar; + Color: typeof Color; + Combine: typeof Combine; + Mono: typeof Mono; + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedComponent; +Icons.Color = Color; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; + +export default Icons; diff --git a/src/ChatGLM/style.ts b/src/ChatGLM/style.ts new file mode 100644 index 0000000..7d5996e --- /dev/null +++ b/src/ChatGLM/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.75; +export const SPACE_MULTIPLE = 0.1; +export const COLOR_PRIMARY = '#4268FA'; diff --git a/src/Tongyi/components/Avatar.tsx b/src/Tongyi/components/Avatar.tsx new file mode 100644 index 0000000..0fe10ac --- /dev/null +++ b/src/Tongyi/components/Avatar.tsx @@ -0,0 +1,17 @@ +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; + +import { COLOR_PRIMARY } from '../style'; +import Mono from './Mono'; + +const Avatar = memo(({ size = 24, style, background, ...rest }) => { + const bg = background || COLOR_PRIMARY; + return ( + + + + ); +}); + +export default Avatar; diff --git a/src/Tongyi/components/Color.tsx b/src/Tongyi/components/Color.tsx new file mode 100644 index 0000000..3df9e6f --- /dev/null +++ b/src/Tongyi/components/Color.tsx @@ -0,0 +1,31 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/Tongyi/components/Combine.tsx b/src/Tongyi/components/Combine.tsx new file mode 100644 index 0000000..00b4497 --- /dev/null +++ b/src/Tongyi/components/Combine.tsx @@ -0,0 +1,24 @@ +import { memo } from 'react'; +import { Flexbox, type FlexboxProps } from 'react-layout-kit'; + +import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style'; +import Color from './Color'; +import Mono from './Mono'; +import Text from './Text'; + +export interface CombineProps extends FlexboxProps { + size?: number; + type?: 'color' | 'mono'; +} +const Combine = memo(({ type = 'mono', size = 24, ...rest }) => { + const Icon = type === 'color' ? Color : Mono; + + return ( + + + + + ); +}); + +export default Combine; diff --git a/src/Tongyi/components/Mono.tsx b/src/Tongyi/components/Mono.tsx new file mode 100644 index 0000000..3f08fd3 --- /dev/null +++ b/src/Tongyi/components/Mono.tsx @@ -0,0 +1,23 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Tongyi/components/Text.tsx b/src/Tongyi/components/Text.tsx new file mode 100644 index 0000000..a0bcf60 --- /dev/null +++ b/src/Tongyi/components/Text.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Tongyi/index.md b/src/Tongyi/index.md new file mode 100644 index 0000000..6bc3602 --- /dev/null +++ b/src/Tongyi/index.md @@ -0,0 +1,69 @@ +--- +nav: Components +group: Icons +title: 通义 +atomId: Tongyi +--- + +## Icons + +```tsx +import { Tongyi } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Text + +```tsx +import { Tongyi } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { Tongyi } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { Tongyi } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +/** + * inline: true + */ +import { Tongyi } from '@lobehub/icons'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ; +``` diff --git a/src/Tongyi/index.ts b/src/Tongyi/index.ts new file mode 100644 index 0000000..8e82191 --- /dev/null +++ b/src/Tongyi/index.ts @@ -0,0 +1,24 @@ +import Avatar from './components/Avatar'; +import Color from './components/Color'; +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_PRIMARY } from './style'; + +type CompoundedComponent = typeof Mono & { + Avatar: typeof Avatar; + Color: typeof Color; + Combine: typeof Combine; + Mono: typeof Mono; + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedComponent; +Icons.Color = Color; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; + +export default Icons; diff --git a/src/Tongyi/style.ts b/src/Tongyi/style.ts new file mode 100644 index 0000000..08bbd3f --- /dev/null +++ b/src/Tongyi/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.75; +export const SPACE_MULTIPLE = 0.2; +export const COLOR_PRIMARY = '#615ced'; diff --git a/src/Wenxin/components/Avatar.tsx b/src/Wenxin/components/Avatar.tsx new file mode 100644 index 0000000..0fe10ac --- /dev/null +++ b/src/Wenxin/components/Avatar.tsx @@ -0,0 +1,17 @@ +import { memo } from 'react'; + +import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; + +import { COLOR_PRIMARY } from '../style'; +import Mono from './Mono'; + +const Avatar = memo(({ size = 24, style, background, ...rest }) => { + const bg = background || COLOR_PRIMARY; + return ( + + + + ); +}); + +export default Avatar; diff --git a/src/Wenxin/components/Color.tsx b/src/Wenxin/components/Color.tsx new file mode 100644 index 0000000..0bad781 --- /dev/null +++ b/src/Wenxin/components/Color.tsx @@ -0,0 +1,36 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/Wenxin/components/Combine.tsx b/src/Wenxin/components/Combine.tsx new file mode 100644 index 0000000..00b4497 --- /dev/null +++ b/src/Wenxin/components/Combine.tsx @@ -0,0 +1,24 @@ +import { memo } from 'react'; +import { Flexbox, type FlexboxProps } from 'react-layout-kit'; + +import { SPACE_MULTIPLE, TEXT_MULTIPLE } from '../style'; +import Color from './Color'; +import Mono from './Mono'; +import Text from './Text'; + +export interface CombineProps extends FlexboxProps { + size?: number; + type?: 'color' | 'mono'; +} +const Combine = memo(({ type = 'mono', size = 24, ...rest }) => { + const Icon = type === 'color' ? Color : Mono; + + return ( + + + + + ); +}); + +export default Combine; diff --git a/src/Wenxin/components/Mono.tsx b/src/Wenxin/components/Mono.tsx new file mode 100644 index 0000000..ccf2355 --- /dev/null +++ b/src/Wenxin/components/Mono.tsx @@ -0,0 +1,29 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + + + + + + + ); +}); + +export default Icon; diff --git a/src/Wenxin/components/Text.tsx b/src/Wenxin/components/Text.tsx new file mode 100644 index 0000000..d61a3c6 --- /dev/null +++ b/src/Wenxin/components/Text.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; + +import type { IconType } from '@/types'; + +const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => { + return ( + + + + ); +}); + +export default Icon; diff --git a/src/Wenxin/index.md b/src/Wenxin/index.md new file mode 100644 index 0000000..8330c53 --- /dev/null +++ b/src/Wenxin/index.md @@ -0,0 +1,69 @@ +--- +nav: Components +group: Icons +title: 文新 +atomId: Wenxin +--- + +## Icons + +```tsx +import { Wenxin } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Text + +```tsx +import { Wenxin } from '@lobehub/icons'; + +export default () => ; +``` + +## Combine + +```tsx +import { Wenxin } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Avatars + +```tsx +import { Wenxin } from '@lobehub/icons'; +import { Flexbox } from 'react-layout-kit'; + +export default () => ( + + + + +); +``` + +## Colors + +```tsx +/** + * inline: true + */ +import { Wenxin } from '@lobehub/icons'; + +import ColorPreview from '../components/ColorPreview'; + +export default () => ; +``` diff --git a/src/Wenxin/index.ts b/src/Wenxin/index.ts new file mode 100644 index 0000000..8e82191 --- /dev/null +++ b/src/Wenxin/index.ts @@ -0,0 +1,24 @@ +import Avatar from './components/Avatar'; +import Color from './components/Color'; +import Combine from './components/Combine'; +import Mono from './components/Mono'; +import Text from './components/Text'; +import { COLOR_PRIMARY } from './style'; + +type CompoundedComponent = typeof Mono & { + Avatar: typeof Avatar; + Color: typeof Color; + Combine: typeof Combine; + Mono: typeof Mono; + Text: typeof Text; + colorPrimary: string; +}; + +const Icons = Mono as CompoundedComponent; +Icons.Color = Color; +Icons.Text = Text; +Icons.Combine = Combine; +Icons.Avatar = Avatar; +Icons.colorPrimary = COLOR_PRIMARY; + +export default Icons; diff --git a/src/Wenxin/style.ts b/src/Wenxin/style.ts new file mode 100644 index 0000000..39c5055 --- /dev/null +++ b/src/Wenxin/style.ts @@ -0,0 +1,3 @@ +export const TEXT_MULTIPLE = 0.75; +export const SPACE_MULTIPLE = 0.2; +export const COLOR_PRIMARY = '#167ADF'; diff --git a/src/Zhipu/components/Avatar.tsx b/src/Zhipu/components/Avatar.tsx index 27d2195..0fe10ac 100644 --- a/src/Zhipu/components/Avatar.tsx +++ b/src/Zhipu/components/Avatar.tsx @@ -1,4 +1,3 @@ -import { readableColor } from 'polished'; import { memo } from 'react'; import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; @@ -6,15 +5,10 @@ import IconAvatar, { type IconAvatarProps } from '@/IconAvatar'; import { COLOR_PRIMARY } from '../style'; import Mono from './Mono'; -const Avatar = memo(({ size = 64, style, background, ...rest }) => { +const Avatar = memo(({ size = 24, style, background, ...rest }) => { const bg = background || COLOR_PRIMARY; return ( - + ); diff --git a/src/Zhipu/components/Combine.tsx b/src/Zhipu/components/Combine.tsx index 99a2951..00b4497 100644 --- a/src/Zhipu/components/Combine.tsx +++ b/src/Zhipu/components/Combine.tsx @@ -10,7 +10,7 @@ export interface CombineProps extends FlexboxProps { size?: number; type?: 'color' | 'mono'; } -const Combine = memo(({ type = 'color', size = 64, ...rest }) => { +const Combine = memo(({ type = 'mono', size = 24, ...rest }) => { const Icon = type === 'color' ? Color : Mono; return ( diff --git a/src/Zhipu/index.md b/src/Zhipu/index.md index 81c4442..abf059c 100644 --- a/src/Zhipu/index.md +++ b/src/Zhipu/index.md @@ -1,6 +1,8 @@ --- nav: Components group: Icons +title: 智谱清言 +atomId: Zhipu --- ## Icons @@ -22,7 +24,7 @@ export default () => ( ```tsx import { Zhipu } from '@lobehub/icons'; -export default () => ; +export default () => ; ``` ## Combine @@ -33,8 +35,8 @@ import { Flexbox } from 'react-layout-kit'; export default () => ( - + ); ``` diff --git a/src/components/ColorPreview/index.tsx b/src/components/ColorPreview/index.tsx index c33d1f5..01d73f2 100644 --- a/src/components/ColorPreview/index.tsx +++ b/src/components/ColorPreview/index.tsx @@ -1,6 +1,5 @@ import { CopyButton } from '@lobehub/ui'; import { createStyles } from 'antd-style'; -import { readableColor } from 'polished'; import { memo } from 'react'; import { Flexbox } from 'react-layout-kit'; @@ -53,7 +52,7 @@ const IconPreview = memo(({ color }) => { justify={'center'} style={{ background: color }} > -
{color}
+
{color}
); diff --git a/src/components/Editor/Preview.tsx b/src/components/Editor/Preview.tsx index 0afc889..15c0f92 100644 --- a/src/components/Editor/Preview.tsx +++ b/src/components/Editor/Preview.tsx @@ -8,6 +8,7 @@ import IconPreview from '@/components/IconPreview'; const useStyles = createStyles(({ css }) => { return { code: css` + flex: 1; height: 96px; pre { @@ -39,7 +40,7 @@ const Preview = forwardRef(({ svg, title, precent {svg} - + {svg} diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx index c280991..9eb4ccf 100644 --- a/src/components/Editor/index.tsx +++ b/src/components/Editor/index.tsx @@ -57,16 +57,16 @@ export default () => { useEffect(() => { if (mono.isLoading) return setMonoSvg('loading...'); setMonoSvg(monoRef?.current?.querySelector('svg')?.innerHTML || ''); - }, [mono.isLoading]); + }, [mono]); useEffect(() => { if (compression.isLoading) return setColorSvg('loading...'); - setColorSvg(monoRef?.current?.querySelector('svg')?.innerHTML || ''); - const viewBox = monoRef?.current?.querySelector('svg')?.viewBox.baseVal; + setColorSvg(colorRef?.current?.querySelector('svg')?.innerHTML || ''); + const viewBox = colorRef?.current?.querySelector('svg')?.viewBox.baseVal; if (viewBox) { setViewbox(`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`); } - }, [compression.isLoading]); + }, [compression]); return ( diff --git a/src/components/IconPreview/ColorPreview.tsx b/src/components/IconPreview/ColorPreview.tsx index c33d1f5..01d73f2 100644 --- a/src/components/IconPreview/ColorPreview.tsx +++ b/src/components/IconPreview/ColorPreview.tsx @@ -1,6 +1,5 @@ import { CopyButton } from '@lobehub/ui'; import { createStyles } from 'antd-style'; -import { readableColor } from 'polished'; import { memo } from 'react'; import { Flexbox } from 'react-layout-kit'; @@ -53,7 +52,7 @@ const IconPreview = memo(({ color }) => { justify={'center'} style={{ background: color }} > -
{color}
+
{color}
); diff --git a/src/index.ts b/src/index.ts index 810dc39..0ed28d3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1 +1,5 @@ +export { default as ChatGLM } from './ChatGLM'; +export { default as Tongyi } from './Tongyi'; +export type { IconType } from './types'; +export { default as Wenxin } from './Wenxin'; export { default as Zhipu } from './Zhipu';