Next/Image component as svg
Answered
Cape horse mackerel posted this in #help-forum
Cape horse mackerelOP
I want to use locally available svgs within my app by utilizing
Let's say that my svg file looks like this
I want to make an Icon component, like
The thing is that I have to be able to change a color of the icon, but don't know how to do it.
Any idea?
<Image /> component.Let's say that my svg file looks like this
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.111 21.12C9.154 18.712 4.8 12.877 4.8 9.6a7.2 7.2 0 1 1 14.4 0c0 3.277-4.387 9.112-6.311 11.52a1.133 1.133 0 0 1-1.778 0ZM12 12c1.324 0 2.4-1.076 2.4-2.4 0-1.324-1.076-2.4-2.4-2.4a2.402 2.402 0 0 0-2.4 2.4c0 1.324 1.076 2.4 2.4 2.4Z"/></svg>I want to make an Icon component, like
import Image from "next/image";
type Icons =
| "MyIcon"
| "MyIconTwo"
type IconSize = "16" | "20" | "24";
type Props = {
name: Icons;
size?: IconSize;
};
export default function Icon({ name, size = "24" }: Props) {
return (
<Image
src={`/icons/${name}.svg`}
alt={name}
width={size}
height={size}
/>
);
}The thing is that I have to be able to change a color of the icon, but don't know how to do it.
Any idea?
Answered by not-milo.tsx
You won't be able to do it like that. Either use the svg directly as a component and control its color using props or add css classes to it and customize its look with css. I'd go with the first option since the second is more verbose and tricky.
1 Reply
You won't be able to do it like that. Either use the svg directly as a component and control its color using props or add css classes to it and customize its look with css. I'd go with the first option since the second is more verbose and tricky.
Answer