Next.js Discord

Discord Forum

Why I use "use client" when I import the svg

Unanswered
Scaly-naped Pigeon posted this in #help-forum
Open in Discord
Scaly-naped PigeonOP
'use client';

import InquirySvg from '@/components/units/MyPage/assets/inquiry.svg';

const IconInquiry = () => {
    return <InquirySvg />;
};

export default IconInquiry;


I don`t know why I use "use client", when import the svg
Can I use the SVG as ServerComponent?

14 Replies

@Scaly-naped Pigeon tsx 'use client'; import InquirySvg from '@/components/units/MyPage/assets/inquiry.svg'; const IconInquiry = () => { return <InquirySvg />; }; export default IconInquiry; I don`t know why I use "use client", when import the svg Can I use the SVG as ServerComponent?
joulev
1. you don't have to use use client, either way use client has no effect here

2. by default, InquirySvg is an object and you can use InquirySvg.src to get the URL of the svg which can then be used in Image or img tags

3. only when you configure nextjs to work with svgr would your InquirySvg become a react component. check tutorials on how to do this
Scaly-naped PigeonOP
Should React Component be used as a client component?
I configured svgr
@Scaly-naped Pigeon Should `React Component` be used as a client component?
joulev
It can be used as both server and client components
Scaly-naped PigeonOP
hmm..
I faced this error.
And then I specified "use client".
So I solved this error.
But I don't know the cause. TT
joulev
I don’t use svgr so I can’t help here
Ojos Azules
I think you should make the svg into a react component
The error looks like a webpack loader error
I guess u were trying to import the svg in react component
u can try to do something like this
and use the Icons like this
Scaly-naped PigeonOP
Thankyou! It is a Good code