使用 SVG 响应图标组件

Question

我有一个icons包含很多 SVG 文件的文件夹名称。每个文件都是一个独立的图标，如下所示：

icon/heart.svg（我想避免将其转换为 JS）

<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M22.178 13.583l-9.131 8.992a1.502 1.502 0 0 1-2.094 0l-9.131-8.992a6.192 6.192 0 0 1 0-8.773c2.439-2.413 6.395-2.413 8.834 0L12 6.154l1.344-1.344c2.439-2.413 6.395-2.413 8.834 0a6.192 6.192 0 0 1 0 8.773"/></svg>

我想创建一个根据名称加载 svg 的组件。

组件/Icon.js

export const Icon = ({ name, ...props }) => {
  return (
    <svg height="24" width="24" viewBox="0 0 24 24" role="img">
      <path d={name} />
    </svg>
  );
};

我寻找的示例用法：(App.js)

<Icon name="heart" />  // should load heart.svg
<Icon name="star" /> // should load star.svg

Answer 1

您可以创建一个文件来导出所有 svg 文件并为每个文件命名。

import heart from './icons/heart.svg'

export { heart };

然后你可以根据名称将你的图标导入到任何你想要的地方；

import { heart } from './<path_of_above_file>'

如果你想创建一个 Icon 组件，那么创建一个组件并在其中渲染图标。

export const Icon = ({ icon, ...props }) => {
  return (
   <div {...props}>
     {icon}
   </div>
  );
};

然后在任何你喜欢的地方使用它。

import { heart } from './path_of_above_file';
<Icon icon={heart} />

另一种解决方案是将路径作为道具传递；

export const Icon = ({ path, ...props }) => {
  return (
    <svg {...props} viewBox="0 0 24 24" role="img">
      <path d={path} />
    </svg>
  );
};

并使用传递路径的图标作为道具。

<Icon path='M22.178 13.583l-9.131 8.992a1.502 1.502 0 0 1-2.094 0l-9.131-8.992a6.192 6.192 0 0 1 0-8.773c2.439-2.413 6.395-2.413 8.834 0L12 6.154l1.344-1.344c2.439-2.413 6.395-2.413 8.834 0a6.192 6.192 0 0 1 0 8.773' height="24" width="24" />