如何使用道具渲染 SVG 组件？

Question

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>
  );
}

Answer 1

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>
  );
}

Answer 2

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

Answer 3

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" />;
}