我想封装一个Svgicon组件不知道怎么做

Question

我使用react+vite+ts创建了一个项目，我想封装一个Svgicon组件不知道怎么做，我在src下创建了一个icons文件夹，里面存放我从阿里矢量图标库上下载的svg

<Svgicon name="xxx">

我想通过传入一个name属性就能展示对应名字的svg

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答由chatgpt基于相关博客总结生成:

  我可以帮助你封装Svgicon组件。首先，你需要安装React和react-dom库。

  然后，你可以按照以下步骤进行封装:

  1. 在icons文件夹中放置从阿里矢量图标库下载的SVG图标。确保每个图标都保存为单独的SVG文件。

  2. 在src目录下创建一个名为Svgicon.tsx的文件，用于编写Svgicon组件的代码。这个文件将包含Svgicon组件的所有逻辑和样式。

  import React from 'react';
  
  interface SvgiconProps {
    name: string;
  }
  
  const Svgicon: React.FC<SvgiconProps> = ({ name }) => {
    const svgPath = `./icons/${name}.svg`;
  
    return (
      <div>
        <img src={svgPath} alt={name} />
      </div>
    );
  };
  
  export default Svgicon;
  

  1. 在使用Svgicon组件的地方导入并使用它。

  import React from 'react';
  import Svgicon from './Svgicon';
  
  const App: React.FC = () => {
    return (
      <div>
        <Svgicon name="xxx" />
      </div>
    );
  };
  
  export default App;
  

  确保替换name属性的值为你想要展示的实际SVG图标的文件名，不要包括文件后缀。

  1. 运行你的React项目，你应该能够看到Svgicon组件展示了与传入的name属性对应的SVG图标。

  这就是如何在React项目中封装一个Svgicon组件的步骤。请注意，这只是一个简单的示例，你可以根据自己的需求对Svgicon组件进行进一步的扩展和样式设计。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^