使用对象反应 SVG 组件

Question

我正在尝试在对象文件中获取 SVG。然后像这样使用 SVG。

import {CustomIcons} from "./Icons"

<CustomIcons name="FrameIcon" />
<CustomIcons name="VectorIcon" />

我只想导入一个文件，然后根据名称得到一个自定义图标。我已经尝试了几个小时，但我迷路了

CustomIcon.tsx

export const CustomIcons = {
  FrameIcon: (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491"
        fill="#232323"
      />
    </svg>
  ),

  VectorIcon: (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C69"
        fill="#232323"
      />
    </svg>
  ),
};

Answer 1

我看到这里有几个问题，我会尽力解释：

导出值的类型（例如FrameIcon）应该是一个函数例如，您的文件应以这种方式导出：

export {
  FrameIcon: () => (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491"
        fill="#232323"
      />
    </svg>
  ),

  VectorIcon: () => (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C69"
        fill="#232323"
      />
    </svg>
  ),
};

导入应该是： import { FrameIcon } from './Icons'

额外小费

创建一个名为 Icon 的文件夹，在其中创建以下文件：

index.js
FrameIcon.jsx
VectorIcon.jsx

您的 index.js 应导出在此文件夹中创建的所有图标，例如：

export * from './FrameIcon';
export * from './VectorIcon';

例如您的 FrameIcon 应该是：

const FrameIcon = () => (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491"
        fill="#232323"
      />
    </svg>
  )

export { FrameIcon };

希望对您有所帮助。

Answer 2

您应该将 CustomIcons 定义为功能组件

像这样的东西应该有用

import React from 'react';
const CustomIcons = (props) =>  {

 const icons = {
     FrameIcon : 
         <svg width="632" height="330" viewBox="0 0 632 330" fill="none" xmlns="http://www.w3.org/2000/svg" >
            <path d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491" fill="#232323"/>
         </svg>,
     VectorIcon: 
         <svg width="632" height="330"  viewBox="0 0 632 330" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C69" fill="#232323"/>
       </svg>
 }
 
 return <> 
   {icons[props.name]}
 </>

};

export default CustomIcons;
`

使用对象反应 SVG 组件

React SVG Component using Objects

javascript

icons

svg

typescript

reactjs

额外小费