vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-14 12:30:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

optimize various base components

Browse Source
This commit is contained in:
jeffvli
2026-01-02 12:46:35 -08:00
parent a66c67e86d
commit d06d1674d1
31 changed files with 669 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/icon/icon.tsx
+18 -10
View File
@@ -1,6 +1,6 @@
import clsx from 'clsx';
import { motion } from 'motion/react';
import { type ComponentType, forwardRef } from 'react';
import { type ComponentType, forwardRef, memo, useMemo } from 'react';
import { IconBaseProps } from 'react-icons';
import { FaLastfmSquare } from 'react-icons/fa';
import {
@@ -278,19 +278,23 @@ type IconColor =
| 'success'
| 'warn';
export const Icon = forwardRef<HTMLDivElement, IconProps>((props, ref) => {
const _Icon = forwardRef<HTMLDivElement, IconProps>((props, ref) => {
const { animate, className, color, fill, icon, size = 'md' } = props;
const IconComponent: ComponentType<any> = AppIcon[icon];
const classNames = clsx(className, {
[styles.fill]: true,
[styles.pulse]: animate === 'pulse',
[styles.spin]: animate === 'spin',
[styles[`color-${color || fill}`]]: color || fill,
[styles[`fill-${fill}`]]: fill,
[styles[`size-${size}`]]: true,
});
const classNames = useMemo(
() =>
clsx(className, {
[styles.fill]: true,
[styles.pulse]: animate === 'pulse',
[styles.spin]: animate === 'spin',
[styles[`color-${color || fill}`]]: color || fill,
[styles[`fill-${fill}`]]: fill,
[styles[`size-${size}`]]: true,
}),
[animate, className, color, fill, size],
);
return (
<IconComponent
@@ -302,6 +306,10 @@ export const Icon = forwardRef<HTMLDivElement, IconProps>((props, ref) => {
);
});
_Icon.displayName = 'Icon';
export const Icon = memo(_Icon);
Icon.displayName = 'Icon';
export const MotionIcon: ComponentType = motion.create(Icon);