How to render SVG component using props?

user_19098865 0
Viewed 59

I'm trying to render an SVG using props of a function. Any help on how to achieve this?

Here is the code:

import React from "react";
import Camera from "../icons/Camera.svg";

export default function Button(props) {
  console.log(props.icon);
  return (
    <button
      type="button"
      className="mx-auto mb-2.5 flex items-center gap-2 rounded-lg border border-gray-300 px-3.5 py-2 text-sm font-medium text-gray-700 drop-shadow-sm"
    >
      {props.icon} /* SVG ICONS GOES HERE*/
      {props.label}
    </button>
  );
}
react-props reactjs javascript
3 Answers

Could try:

import React from "react";
import Camera from "../icons/Camera.svg";

export default function Button({icon, label}) {
  return (
    <button
      type="button"
      className="mx-auto mb-2.5 flex items-center gap-2 rounded-lg border border-gray-300 px-3.5 py-2 text-sm font-medium text-gray-700 drop-shadow-sm"
    >
      {icon && <img src={Camera} alt={label} />}
    </button>
  );
}
user_19522870

Here is how you can add an Icon https://codesandbox.io/s/react-playground-forked-x4vsge?file=/index.js

However, a few things when you are creating these components.

  1. If the Icons source is an API (CMS) then you should have some predefined icons and should have your icons library build and pass just icon names.
  2. If you have very limited icons build SVG icons as components and use them
user_11126910

When you use your Button component just use the SVG as a JSX

import Camera from "../icons/Camera.svg";

export default function App() {
  return <Button icon={<Camera />} label="Click Me" />;
}
user_140078660
Related