#Icon in Server Component

4 messages · Page 1 of 1 (latest)

clever adder
#
import Link from 'next/link';
import PaddingWrapper from '@/shared/components/PaddingWrapper';
import Icon from '@/shared/components/icons';

const HomeLogoSection = () => (
  <PaddingWrapper className="pt-[10px] pb-[0px] bg-white">
    <h1>
      <Link href="/">
        <Icon.Bbangle shape="horizontal-name" />
      </Link>
    </h1>
  </PaddingWrapper>
);

export default HomeLogoSection;

'use client';

import Plus from '@public/assets/icons/plus.svg';
import Close from '@public/assets/icons/btn-remove.svg';
import Heart from './HeartIcon';
import Bbangle from './BbangleIcon';

const Icon = {
  Plus,
  Close,
  Heart,
  Bbangle
};

export default Icon;
'use client';

import BbangleSmileIcon from '@public/assets/icons/bbangle-smile.svg';
import BbangleCryIcon from '@public/assets/icons/bbangle-cry.svg';
import BbanglVerticalNameIcon from '@public/assets/icons/bbangle-vertical-name.svg';
import BbangleHorizontalNameIcon from '@public/assets/icons/bbangle-horizontal-name.svg';

interface Props {
  shape: 'vertical-name' | 'horizontal-name' | 'smile' | 'cry';
  className?: string;
}

const BbangleIcon = ({ shape, className }: Props) => {
  switch (shape) {
    case 'vertical-name':
      return <BbanglVerticalNameIcon />;
    case 'horizontal-name':
      return <BbangleHorizontalNameIcon />;
    case 'smile':
      return <BbangleSmileIcon className={className} />;
    case 'cry':
      return <BbangleCryIcon />;
    default:
      return <BbangleSmileIcon />;
  }
};

export default BbangleIcon;

why next throw error when i import svg icons
I use svgr

terse rampartBOT
#

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

plush oak
#

Did you export Icon?

clever adder
#

yes!
export default Icon